如何展开图标按钮？

Question

嗨，我正在努力实现这一目标

这是我的脚本

  Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
          Container(
            child: FlatButton.icon(
                onPressed: null,
                icon: Icon(Icons.add),
                label: Text("satu")),
            color: Colors.red,
          ),
          Column(
            children: <Widget>[
              Container(
                child: FlatButton.icon(
                    onPressed: null,
                    icon: Icon(Icons.add),
                    label: Text("dua")),
                color: Colors.green,
              ),
              SizedBox(
                height: 10,
              ),
              Container(
                child: FlatButton.icon(
                    onPressed: null,
                    icon: Icon(Icons.add),
                    label: Text("tiga")),
                color: Colors.yellow,
              ),

            ],
          ),
          Column(
            children: <Widget>[
              Container(
                child: FlatButton.icon(
                    onPressed: null,
                    icon: Icon(Icons.add),
                    label: Text("dua")),
                color: Colors.red,
              ),
              SizedBox(
                height: 10,
              ),
              Container(
                child: FlatButton.icon(
                    onPressed: null,
                    icon: Icon(Icons.add),
                    label: Text("tiga")),
                color: Colors.blue,
              ),

            ],
          ),
        ]),

但是，我的脚本的结果是这样的。

然后我尝试使用SizeBox.expand 到我的FlatButton.icon 但它给我一个错误

这是错误

I/flutter (5643): ══╡ 渲染库发现异常 ╞═════════════════════════════════════════════════ ════════ I/颤振 ( 5643)：在 performLayout() 期间引发了以下断言： I/flutter（5643）：BoxConstraints 强制无限宽度和 无限高。 I/flutter (5643)：这些无效的约束是 由 RenderSemanticsAnnotations 的 layout() 函数提供 I/flutter（5643）：以下函数，它可能计算了 有问题的无效约束：I/flutter (5643)：
RenderConstrainedBox.performLayout (包:flutter/src/rendering/proxy_box.dart:259:13) I/flutter ( 5643）：有问题的约束是：I/flutter（5643）：
BoxConstraints（最大）

任何帮助将不胜感激

Answer 1

您应该使用Expanded 类来使小部件填满所有剩余空间。 我使用GestureDetector 来处理Container 而不是FlatButton 上的点击事件...

我创建了一个简短的示例：

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('Stackoverflow example'),
      ),

      body: Container(
        margin: EdgeInsets.all(10),

        height: 150,

        child: Row(          
          children: <Widget>[
            // First
            Expanded(
              child: GestureDetector(
                child: Container(
                  margin: EdgeInsets.only(right: 5),

                  decoration: BoxDecoration(
                    color: Colors.red,

                    borderRadius: BorderRadius.all(
                      Radius.circular(10)
                    )
                  ),

                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Icon(
                        Icons.add,
                        color: Colors.white,                      
                      ),
                      SizedBox(
                        height: 10,
                      ),
                      Text(
                        'Motors',
                        style: TextStyle(
                          color: Colors.white
                        ),
                      )
                    ],
                  )
                ),
                onTap: () {
                  print('execute motors');
                },
              ),
            ),
            // Second
            Container(
              width: 125,

              child: Column(
                children: <Widget>[
                  Expanded(
                    child: GestureDetector(
                      child: Container(
                        margin: EdgeInsets.only(left: 5, right: 5, bottom: 5),

                        decoration: BoxDecoration(
                          color: Colors.green,

                          borderRadius: BorderRadius.all(
                            Radius.circular(10)
                          )
                        ),


                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            Icon(
                              Icons.add,
                              color: Colors.white,                      
                            ),
                            SizedBox(
                              width: 10,
                            ),
                            Text(
                              'Classified',
                              style: TextStyle(
                                color: Colors.white
                              ),
                            )
                          ],
                        )
                      ),
                      onTap: () {
                        print('execute classified');
                      },
                    ),
                  ),
                  Expanded(
                    child: GestureDetector(
                      child: Container(                      
                        margin: EdgeInsets.only(left: 5, top: 5, right: 5),

                        decoration: BoxDecoration(
                          color: Colors.orange,

                          borderRadius: BorderRadius.all(
                            Radius.circular(10)
                          )
                        ),


                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            Icon(
                              Icons.add,
                              color: Colors.white,                      
                            ),
                            SizedBox(
                              width: 10,
                            ),
                            Text(
                              'Services',
                              style: TextStyle(
                                color: Colors.white
                              ),
                            )
                          ],
                        )
                      ),
                      onTap: () {
                        print('execute services');
                      },
                    ),
                  ),
                ],
              ),
            ),
            // Third
            Container(
              width: 125,

              child: Column(
                children: <Widget>[
                  Expanded(
                    child: GestureDetector(
                      child: Container(  
                        margin: EdgeInsets.only(left: 5, bottom: 5),                   

                        decoration: BoxDecoration(
                          color: Colors.blueAccent,

                          borderRadius: BorderRadius.all(
                            Radius.circular(10)
                          )
                        ),


                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            Icon(
                              Icons.add,
                              color: Colors.white,                      
                            ),
                            SizedBox(
                              width: 10,
                            ),
                            Text(
                              'Properties',
                              style: TextStyle(
                                color: Colors.white
                              ),
                            )
                          ],
                        )
                      ),
                      onTap: () {
                        print('execute properties');
                      },
                    ),
                  ),
                  Expanded(
                    child: GestureDetector(
                      child: Container(     
                        margin: EdgeInsets.only(left: 5, top: 5),

                        decoration: BoxDecoration(
                          color: Colors.orangeAccent,

                          borderRadius: BorderRadius.all(
                            Radius.circular(10)
                          )
                        ),


                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            Icon(
                              Icons.add,
                              color: Colors.white,                      
                            ),
                            SizedBox(
                              width: 10,
                            ),
                            Text(
                              'Jobs',
                              style: TextStyle(
                                color: Colors.white
                              ),
                            )
                          ],
                        )
                      ),
                      onTap: () {
                        print('execute jobs');
                      },
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

这是结果：

希望这会有所帮助，杜比

Answer 2

也可以将ElevatedButton 与图标一起用作子项