Search code examples
material-designfluttermaterial-uiflutter-layout

Bottom menu options


How can I achieve a simple bottom menu in Flutter? I want to show a set number of menu items and respond appropriately to clicks. I haven't been able to find anything in the gallery

Here is an example of what I'm trying to achieve, with custom options (not just media options)

enter image description here


Solution

  • maybe this could help https://github.com/flutter/flutter/blob/master/examples/flutter_gallery/lib/demo/material/modal_bottom_sheet_demo.dart

    @override
     Widget build(BuildContext context) {
     return new Scaffold(
      appBar: new AppBar(title: const Text('Modal bottom sheet')),
      body: new Center(
        child: new RaisedButton(
          child: const Text('SHOW BOTTOM SHEET'),
          onPressed: () {
            showModalBottomSheet<void>(context: context, builder: (BuildContext context) 
             {
              return new Container(
                child: new Padding(
                  padding: const EdgeInsets.all(32.0),
                  child: ListView(
                   children: <Widget>[
                     ListTile(title: Text('Map'),onTap:null),//handle on tap here
                     //build other menu here
                     ],
                  );
                    )
                    textAlign: TextAlign.center,
                    style: new TextStyle(
                      color: Theme.of(context).accentColor,
                      fontSize: 24.0
                    )
                  )
                )
              );
            });
          }
        )
      )
    );