HoverX

Hover Text over Image using HoverX

Using HoverX you can achieve beautiful results on any website with little effort. Hover effects are probably the most used elements in web design, mainly because of the ease of implementing them coupled with a greatly improved user experience. HoverX create an opportunity to add interactivity to elements on a website without slowing it down.

Demo

import 'package:flutter/material.dart';
import 'package:hoverx/hoverx.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: HoverX(
          title: "Hello World",
          image: NetworkImage(
              "https://images.unsplash.com/32/Mc8kW4x9Q3aRR3RkP5Im_IMG_4417.jpg?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80"),
          hoverColor: Colors.black,
        ),
      ),
    );
  }
}