Flutter Question posted in
The official Flutter documentation can be found here.

Open flutter DropdownButton on hover

I’m working on a flutter web application and I have used a DropdownButton widget as top menu on my site. How can i open the dropdown button upon a mouse hover. Below is my dropdown button

DropdownButton(
                      value: teachingsDropdownValue,
                      icon: SizedBox.shrink(),
                      focusColor: Colors.white,
                      elevation: 0,
                      onTap: (){},
                      underline: Container(
                        height: 2,
                        color: Colors.white,
                      ),
                      items: teachingsItems.map((String items) {
                        return DropdownMenuItem(
                          value: items,
                          child: Text(items,textAlign: TextAlign.center,),
                        );
                      }).toList(),
                      onChanged: (String? newValue) {
                        setState(() {
                          // teachingsDropdownValue = newValue!;
                          if(newValue == "Salivation"){
                            Navigator.of(context).push(MaterialPageRoute(builder: (context) => TeachingsSalivationScreen()));
                          }

                        });
                      },
                    ),
Tags:

2

Answers


  1. 0

    Result

    enter image description here

    Explanation

    There are two steps that you need:

    1. Detect the hover.

    2. Open the Dropdown.

    To detect a hover, use MouseRegion‘s onHover

    Then, to open the drawer, you can use the code from

    Code

    Here’s a complete working snippet:

    import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final _dropdownButtonKey = GlobalKey();
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Material App Bar'),
        ),
        body: MouseRegion(
          onHover: (event) {
            openDropdown();
          },
          child: DropdownButton(
            key: _dropdownButtonKey,
            hint: Text('Select Item'),
            value: null,
            items: ['A', 'B', 'C']
                .map((e) => DropdownMenuItem(child: Text(e), value: e))
                .toList(),
            onChanged: (value) {
              print(value);
            },
          ),
        ),
      ),
    );
  }

  void openDropdown() {
    // See --  https://stackoverflow.com/a/59499191/12349734
    _dropdownButtonKey.currentContext?.visitChildElements((element) {
      if (element.widget is Semantics) {
        element.visitChildElements((element) {
          if (element.widget is Actions) {
            element.visitChildElements((element) {
              Actions.invoke(element, ActivateIntent());
            });
          }
        });
      }
    });
  }
}
    Login or Signup to reply.
  2. 0

    Just uset hover_menu: ^1.1.1

    import 'package:hover_menu/hover_menu.dart';

HoverMenu(
  title: Text('Menu Title'),
  items: [
    ListTile(title: Text('Item 1')),
    ListTile(title: Text('Item 2')),
    ListTile(title: Text('Item 3')),
  ],
)

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search