Flutter web implementing drop down with hover effect

Hi Guys, Welcome to Proto Coders Point.

In this flutter tutorial, we will learn how to implement flutter dropdown with hover effect animation.

Note: Hovering effect in flutter works only on flutter web & By running same code in android & iOS you will not see any hovering animation effect.

Below GIF image is the final output for this tutorial, we have a app which has a flutter dropdown with hover effect, when a mouse pointer is hovered on items of dropdown list, you can see a item is highlighted with a slight animation effect.

Now let’s create this from start…..

1. Create/Open a flutter project

Firstly, create/open any new flutter project where you want to implement hover effect on dropdown list, I make use of Android Studio with is best IDE for Flutter development.

File -> New -> New Flutter Project(finish) // project is ready.

2. Create a custom flutterWidget OnHover.dart

Under lib directory, create a new dart file & name it as OnHover.dart.

So OnHover.dart will be our custom stateful widget which has properties such as animatedContainer & MouseRegion widget which is use to detect when our mouse pointer comes in MouseRegion to perform hover effect in flutter with animation to any widgets.

OnHover.dart

import 'package:flutter/material.dart';

class OnHover extends StatefulWidget {

  final Widget Function(bool isHovered) builder;

  const OnHover({Key? key, required this.builder}) : super(key: key);

  @override
  _OnHoverState createState() => _OnHoverState();
}

class _OnHoverState extends State<OnHover> {

  bool isHovered = false;
  @override
  Widget build(BuildContext context) {

     // on hover animation movement matrix translation
    final hovered = Matrix4.identity()..translate(10,0,0);
    final transform = isHovered ? hovered : Matrix4.identity();

    // when user enter the mouse pointer onEnter method will work
   // when user exit the mouse pointer from MouseRegion onExit method will work
    return MouseRegion(
      onEnter: (_)=> onEntered(true),
      onExit: (_)=> onEntered(false),
      child: AnimatedContainer(
        duration: Duration(milliseconds: 300),
        transform: transform,             // animation transformation hovered.
        child: widget.builder(isHovered),   // build the widget passed from main.dart
      ),
    );
  }

  //used to set bool isHovered to true/false
  void onEntered(bool isHovered){
    setState(() {
      this.isHovered = isHovered;
    });
  }
}

OnHover custom widget can be used to give hover effect to any widget in flutter, you just need to wrap widget with OnHover widget builder.

3. Create a dropdown list in flutter with hover effect

main.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hover_eg/OnHover.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: DropDownPage(),
    );
  }
}


class DropDownPage extends StatefulWidget {
  const DropDownPage({Key? key}) : super(key: key);

  @override
  _DropDownPageState createState() => _DropDownPageState();
}

class _DropDownPageState extends State<DropDownPage> {
  //list of item to show in flutter drop down 
  static final data = ['Lion', 'Tiger', 'Shark', 'Snake', 'Bear','Crocodile','Monkey'];
  String initial = data.first.toString();

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      body: Center(
          child: DropdownButton(
            value: initial,
            icon: Icon(Icons.keyboard_arrow_down),
            items: Textpage.texts.map((String items) {
              return DropdownMenuItem(
                  value: items,
                  child: OnHover(
                     //Wraping the DropDownMenuItem child so then when Items of drop down is hovering we see hovering effect
                    builder: (isHovered){
                      final color = isHovered ? Colors.blue:Colors.black;
                      return Text('$items',style: TextStyle(color: color),);
                    },
                  ));
            }).toList(),
            onChanged: (String? newvalue){
              setState(() {
                initial = newvalue!;
              });
            },
          )
      ),
    );
  }
}