Home > Enterprise >  Flutter menubar
Flutter menubar

Time:07-03

I started with Flutter/Dart and now I'm trying to write a program for Linux. I'm just wondering how to make menubars with Flutter (like in Atom or VSCode). I can't find anything helpful on the internet, unfortunately. Can someone here maybe help me?

CodePudding user response:

I think that you would probably use an app bar and in the actions field you would create a drop down menu. Something on the lines of these:

In the build method:

@override
Widget build(BuildContext context){
    return Scaffold(
        appBar: AppBar(
            actions: [
                //Here you can pass the PopupMenu
                ElevatedButton(onPress: (){
                     //Show the menu here
                }, child: "File")
            ]
        ),
        body: Container()
    );
}

//From the material.io docs https://material.io/components/menus/flutter/

And probably you have to show the menu using these widgets:

PopupMenuButton(
  icon: Icon(Icons.more_vert),
  itemBuilder: (BuildContext context) => <PopupMenuEntry>[
    const PopupMenuItem(
      child: ListTile(
        leading: Icon(Icons.add),
        title: Text('Item 1'),
      ),
    ),
    const PopupMenuItem(
      child: ListTile(
        leading: Icon(Icons.anchor),
        title: Text('Item 2'),
      ),
    ),
    const PopupMenuItem(
      child: ListTile(
        leading: Icon(Icons.article),
        title: Text('Item 3'),
      ),
    ),
    const PopupMenuDivider(),
    const PopupMenuItem(child: Text('Item A')),
    const PopupMenuItem(child: Text('Item B')),
  ],
),

Instead of PopupMenuButton you can also use DropdownMenuButton also :).

  • Related