简体   繁体   中英

How to create a Floating action button like Office application [ Flutter ]

I need to create a floating action button like [Floating action button in Office application]

Office 应用程序中的浮动操作按钮

It's my first question, sorry about the grammar

I'm not a Microsoft fan actually I'm avoiding anything Microsoft maiden because of my high blood pressure :) but according to your picture you probably want to use something like drawer

Scafold(
    appBar: AppBar(
       title: Text('Example'),
     drawer: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                IconButton(
                  icon: Icon(Icons.category),
                  onPressed: () {},
                ),
                IconButton(icon: Icon(Icons.title), onPressed: () {}),
                IconButton(icon: Icon(Icons.print), onPressed: () {})
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                IconButton(
                    icon: Icon(
                      Icons.close,
                    ),
                    onPressed: () {}),
              ],
            ),
          ],
        ),
      )
)

You will have to modify it to your needs. This is just a sample

use Stack widget

Stack(
  children:<Widget>[
      ...renderOtherWidgets(),
      FloatingBar()
   ]
);

means FloatingBar() is the widget with the all floating buttons. and with Fade block as well.

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