简体   繁体   中英

How can I create a button with an icon on the top right under the appbar on Flutter

I want to create a button under the appbar (navbar) with a button not too big just normal size but I couldn't. It needs to be on top right and icon will be on the right like "Categories(List Icon)"

在此处输入图像描述

I don't know how exactly you want it to be. As mentioned you can use endDrawer or else, like in the screenshot, you can do something like this,

Scaffold(
      appBar: AppBar(title: Text('Category Demo')),
      body: Column(children: [
        Row(mainAxisAlignment: MainAxisAlignment.end,
          children: [
          Container(
            width: 130.0,
            child: FlatButton(
              onPressed: () {
                Navigator.push(context,
                    MaterialPageRoute(builder: (context) => Categories()));
              },
              child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text("Categories"),
                    Icon(Icons.menu),
                  ]
               ),
            ),
          )
        ])
      ]),
    );

Output:

在此处输入图像描述

Hope that works!

You can try endDrawer in Scaffold from this example: https://api.flutter.dev/flutter/material/Scaffold/endDrawer.html

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM