有没有一种方法可以在单击时创建这样的按钮，然后在其顶部弹出另一个按钮？答案

【问题标题】：Is there a way of creating such button when clicked, then pops up another buttons on top of it in flutter?有没有一种方法可以在单击时创建这样的按钮，然后在其顶部弹出另一个按钮？
【发布时间】：2020-11-23 22:53:36
【问题描述】：

Button Overlay

我正在尝试创建一个在单击时会显示其他按钮的按钮。请点击上面的链接查看我的意思的快照。

【问题讨论】：

请展示您的尝试

标签： flutter

【解决方案1】：

使用flutter_fab_dialer 包

示例

class _MyHomePageState extends State<MyHomePage> {

  //Provides an image of a cat
  static String getNewCatUrl() {
     return 'http://thecatapi.com/api/images/get?format=src&type=jpg&size=small'
         '#${new DateTime.now().millisecondsSinceEpoch}';
   }

   int _counter = 0;

  //Adds value to counter
   void _incrementCounter() {
     setState(() {
       _counter++;
     });
   }

   //Prints the value of the counter
   void _logCounter() {
     setState(() {
       print(_counter);
     });
   }

  @override
   Widget build(BuildContext context) {

     ImageProvider img = new NetworkImage(getNewCatUrl());

    //The list of FabMiniMenuItems that we are going to use
     var _fabMiniMenuItemList = [
       new FabMiniMenuItem.withTextWithImage(
         img,
         4.0,
         "Button menu",
         _logCounter,
         "Click me",
         Colors.blue,
         Colors.white,
         true
       ),

       new FabMiniMenuItem.withText(
         new Icon(Icons.add),
         Colors.blue,
         4.0,
         "Button menu",
         _incrementCounter,
         "Click me",
         Colors.blue,
         Colors.white,
         true
       ),
       new FabMiniMenuItem.noText(
         new Icon(Icons.add),
         Colors.blue,
         4.0,
         "Button menu",
         _logCounter,
         false
       ),

       new FabMiniMenuItem.noTextWithImage(
         img,
         4.0,
         "Button menu",
         _incrementCounter,
         false
       )
     ];

     return new Scaffold(
       appBar: new AppBar(
         title: new Text(widget.title),
       ),
       //Using a Stack will assure that the Dialer will appear at the end of your layout
       body:  new Stack(
         children: <Widget>[
           new Center(
             child: new Column(
               children: <Widget>[
                 new Text('You have pushed the button this many times:'),
                 new Text('$_counter', style: Theme.of(context).textTheme.display1),
               ],
             ),
           ),
           new FabDialer(_fabMiniMenuItemList, Colors.blue, new Icon(Icons.add)),
         ],
       ),
     );
   }
}

【讨论】：

【解决方案2】：

flutter_speed_dial 会按照你的要求去做。

只需使用上述包中的 SpeedDial 小部件提供 Scaffold 的 FloatingActionButton 参数。这是下面的sn-p。

                   floatingActionButton: SpeedDial(
                      animatedIcon: AnimatedIcons.menu_close,
                      backgroundColor: primaryColor,
                      elevation: 5,
                      overlayOpacity: 0,
                      children: [
                        SpeedDialChild(
                          child: Icon(Icons.add),
                          backgroundColor: primaryColor,
                          label: 'Meal Set',
                          labelStyle: TextStyle(fontSize: 16.0),
                          onTap: () {
                            Navigator.push(context,
                              MaterialPageRoute(builder: (context) => NewSet()));
                          },
                        ),
                        SpeedDialChild(
                          child: Icon(Icons.add),
                          backgroundColor: primaryColor,
                          label: 'Single Meal',
                          labelStyle: TextStyle(fontSize: 16.0),
                          onTap: () {
                            addNewMeal();
                          },
                        ),
                      ],
                    ),

【讨论】：