Flutter-不能在文本换行中使用Flex的内部填充

Question

在我的flutter应用程序中，我想有一张卡片和四个水平对齐的框，其中的宽度和高度相等。代码如下；

   @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            body: Container(
              padding: EdgeInsets.fromLTRB(20,10,10,0),
              height: 220,
              width: double.maxFinite,
              child: Card(
                elevation: 5,


                child: Column(
                  children: <Widget>[
                Row(
                  children: <Widget>[
                    Expanded(
                      child: Container(
                        height:25,
                        color:Color(0xff6898F7),
                        child: Text('Online Pharmacy',
                        style:TextStyle(color: Color(0xffffffff)))
                      )
                    )

                  ],
                ),
                    Row(
                      children: <Widget>[
                        Expanded(
                          flex: 1,
                          child: Container(
                            height: 150,
                            padding: EdgeInsets.only(top:40),
                            color: Colors.red,
                            child: Column(
                              children: <Widget>[
                                Image.asset("images/medicine.jpg"),

                                Center(
                                   child: Row(
                                      mainAxisAlignment: MainAxisAlignment.center,
                                      children: <Widget>[
                                        Padding(
                                          padding:EdgeInsets.only(top:25),
                                          child:Flexible(
                                            child:Text('Medicine', style: TextStyle(color: Colors.white)),
                                          ),
                                        ),

                                      ],
                                    ),


                                ),
                            ],
                            )

                          ),
                        ),
       ],
                    ),
                  ],
                ),

我使用Flexible的原因是我希望在必要时将文本包装成多行。

但是我得到这个错误：

════════小部件库捕获到异常═══════════════════════════════════ ════════════════════抛出以下断言来构建Container（padding：EdgeInsets（0.0，40.0，0.0，0.0），bg：BoxDecoration（color：MaterialColor（主值：Color（0xfff44336））））约束：BoxConstraints（0.0 <= w <= Infinity ，h = 150.0））：不正确使用ParentDataWidget。

Flexible widget必须直接放置在Flex widget中。Flexible（无深度，flex：1，脏）具有Flex祖先，但它们之间还有其他小部件：-填充（填充：EdgeInsets（0.0，25.0，0.0，0.0））这些小部件不能介于Flex及其Flex之间。有问题的Flexible的父级的所有权链为：填充←行←中心←列←填充←DecoratedBox←ConstrainedBox←容器←展开←行←⋯

所以我如何正确包装文本？ 没有包装问题，代码就可以正常工作。

编辑：我的预期布局似乎类似于下图：

Edit2：让我给您一个关于布局的更精确的想法：

Answer 1

[我对您所需要的方法：

Padding(
      padding: const EdgeInsets.all(8.0),
      child: Material(
        elevation: 5.0,
        child: Container(
//            height: 220,
            child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Container(
              padding: EdgeInsets.symmetric(horizontal: 8.0),
              height: 25,
              color: Color(0xff6898F7),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Text(
                    'Online Pharmacy',
                    style: TextStyle(
                      color: Color(0xffffffff),
                    ),
                  ),
                  Text(
                    'your hidden text lol',
                    style: TextStyle(
                      color: Color(0xffffffff),
                    ),
                  ),
                ],
              ),
            ),
            Container(
              height: 150.0,
              child: Row(
                children: <Widget>[
                  Expanded(
                    child: Container(
                      padding: EdgeInsets.all(8.0),
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
//                              you could use icon instead of image
//                              Container(
//                                height: 80,
//                                child: Image.asset(
//                                  "images/medicine.jpg",
//                                  fit: BoxFit.fill,
//                                ),
//                              ),
                          Icon(
                            Icons.touch_app,
                            size: 40.0,
                          ),
                          SizedBox(height: 10.0),
                          Flexible(
                              child: Text(
                            'Browse Through Database',
                            textAlign: TextAlign.center,
                          ))
                        ],
                      ),
                    ),
                  ),
                  Expanded(
                    child: Container(
                      padding: EdgeInsets.all(8.0),
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
//                              you could use icon instead of image
//                              Container(
//                                height: 80,
//                                child: Image.asset(
//                                  "images/medicine.jpg",
//                                  fit: BoxFit.fill,
//                                ),
//                              ),
                          Icon(
                            Icons.input,
                            size: 40.0,
                          ),
                          SizedBox(height: 10.0),
                          Flexible(
                              child: Text(
                            'Type your own medicine',
                            textAlign: TextAlign.center,
                          ))
                        ],
                      ),
                    ),
                  ),
                  Expanded(
                    child: Container(
                      padding: EdgeInsets.all(8.0),
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
//                              you could use icon instead of image
//                              Container(
//                                height: 80,
//                                child: Image.asset(
//                                  "images/medicine.jpg",
//                                  fit: BoxFit.fill,
//                                ),
//                              ),
                          Icon(
                            Icons.image,
                            size: 40.0,
                          ),
                          SizedBox(height: 10.0),
                          Flexible(
                              child: Text(
                            'Picture of your prescription',
                            textAlign: TextAlign.center,
                          ))
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        )),
      ),
    )