CODEWITHSUNDEEP
flutterdart
Denise
Denise

Reputation: 1088

How to show popup menu on any icon in Flutter?

I want a popup menu or some kind of slide screen with options to come when i click on an icon in the app bar, however i dont want to use PopMenuButton as i dont want to use that icon. How can I do this?

My code 

  return new Scaffold(
      appBar: new AppBar(
        title: new Text("Home"),
        leading:   IconButton(
          icon: Icon(
            Icons.dehaze,
            color: Colors.black,
          ),
          onPressed: () {
            // do something
          },
        ),
      ),
      body: new Center(...),
    );

Upvotes: 4

Views: 6104

Answers (2)

Kendavar
Kendavar

Reputation: 1

If the icon is the problem in PopMenuButton. You can change it by assigning icon attribute in PopMenuButton.

PopupMenuButton<Choice>(
              onSelected: _select,
              icon:Icon(
            Icons.dehaze,
            color: Colors.black,
             ),
              itemBuilder: (BuildContext context) {
                return choices.skip(2).map((Choice choice) {
                  return PopupMenuItem<Choice>(
                    value: choice,
                    child: Text(choice.title),
                  );
                }).toList();

https://flutter.dev/docs/catalog/samples/basic-app-bar

Upvotes: 0

Pro
Pro

Reputation: 3003

@Denise, you don't need to manually create a button and assign action for drawer menu. You can simply use drawer in Scaffold with Drawer widget like so,

class MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(
              title: Text('Test'),
            ),
            drawer: Drawer(
              // Add a ListView to the drawer. This ensures the user can scroll
              // through the options in the drawer if there isn't enough vertical
              // space to fit everything.
              child: ListView(
                // Important: Remove any padding from the ListView.
                padding: EdgeInsets.zero,
                children: <Widget>[
                  DrawerHeader(
                    child: Text('Drawer Header'),
                    decoration: BoxDecoration(
                      color: Colors.blue,
                    ),
                  ),
                  ListTile(
                    title: Text('Item 1'),
                    onTap: () {
                      // Update the state of the app
                      // ...
                      // Then close the drawer
                      Navigator.pop(context);
                    },
                  ),
                  ListTile(
                    title: Text('Item 2'),
                    onTap: () {
                      // Update the state of the app
                      // ...
                      // Then close the drawer
                      Navigator.pop(context);
                    },
                  ),
                ],
              ),
            ),
            body: Padding(
                  padding: EdgeInsets.all(20.0),
                  child: Center(
                    child: Column(
                      children: <Widget>[
                        Text('')
                      ],
                    )
                  )
                  ),
        )
    );
  }
}

demo

And if you wanna use different icon,

class MyAppState extends State<MyApp> {
  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          key: _scaffoldKey,
            appBar: AppBar(
              title: Text('Test'),
                leading: new IconButton(
                    icon: new Icon(Icons.dehaze),
                    onPressed: () => _scaffoldKey.currentState.openDrawer()),
            ),
            drawer: Drawer(......

Hope this helps.

Upvotes: 1

Related Questions