Flutter - нельзя использовать Flexible inside Padding для переноса текста

Question

В моем приложении для флаттера я хочу, чтобы карточка и четыре прямоугольника были выровнены по горизонтали с равной шириной и высотой внутри. Код следует:

   @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, заключается в том, что я хотел, чтобы текст был обернут в несколько строк, где это необходимо.

Но я понял ошибка:

════════ Исключение, обнаруженное библиотекой виджетов ═════════════════════════════ ══════════════════════════ Следующее утверждение было сгенерировано при создании контейнера (отступ: EdgeInsets (0.0, 40.0, 0.0, 0.0), bg: BoxDecoration (color: MaterialColor (основное значение: Color (0xfff44336))), ограничения: BoxConstraints (0.0 <= w <= Infinity, h = 150.0)): неправильное использование ParentDataWidget. </p>

Гибкие виджеты должны размещаться непосредственно внутри виджетов Flex. Гибкий (без глубины, flex: 1, dirty) имеет предка Flex, но между ними есть другие виджеты: - Padding (padding: EdgeInsets (0.0, 25.0, 0.0, 0.0)) Эти виджеты не могут находиться между Flexible и его Flex. Цепочка владения для родителя нарушителя Гибкая была: Заполнение ← Строка ← Центр ← Колонка ← Заполнение ← Декорированный ящик ← ConstrainedBox ← Контейнер ← Расширенный ← Строка ← ⋯

Так как мне обернуть правильно ли текст? Без проблемы с переносом код работает хорошо.

РЕДАКТИРОВАТЬ: Мой предполагаемый макет, как на рисунке ниже:

Edit2: Позвольте мне дать вам более точное представление о макете:

Edit3: После получения решения (см. здесь ) в чате от pskink, у меня был следующий макет. Обратите внимание, что отмеченная красным часть не выравнивает текст по центру. Как выровнять текст по центру?

Answer 1

попробуй textAlign: TextAlign.center, внутри текста Виджет

Answer 2

Пожалуйста, попробуйте это ...

@override
Widget build(BuildContext context) {
 return Scaffold(
    body: SafeArea(
        child: SingleChildScrollView(
  child: Column(
    children: <Widget>[
      Card(
        margin: EdgeInsets.all(10),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Container(
              width: MediaQuery.of(context).size.width,
              color: Colors.blue,
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text(
                  "Online Pharmacy",
                  style: TextStyle(fontSize: 16, color: Colors.white),
                ),
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.max,
              children: <Widget>[
                Expanded(
                  child: Container(
                    child: Center(
                      child: Container(
                        child: Padding(
                          padding: const EdgeInsets.all(10.0),
                          child: Column(
                            children: <Widget>[
                              FlutterLogo(
                                size: 50,
                              ),
                              SizedBox(
                                height: 10,
                              ),
                              //Image.asset("images/medicine.jpg"),
                              Text('Picture of your Prescription',
                                  textAlign: TextAlign.center,
                                  style: TextStyle(
                                      color: Colors.black, fontSize: 14)),
                            ],
                            mainAxisSize: MainAxisSize.max,
                            mainAxisAlignment: MainAxisAlignment.center,
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
                Container(
                  margin:
                      EdgeInsets.symmetric(vertical: 10, horizontal: 10),
                  width: 2,
                  height: 70,
                  color: Colors.grey,
                ),
                Expanded(
                  child: Container(
                    child: Center(
                      child: Container(
                        child: Padding(
                          padding: const EdgeInsets.all(10.0),
                          child: Column(
                            children: <Widget>[
                              FlutterLogo(
                                size: 50,
                              ),
                              SizedBox(
                                height: 10,
                              ),
                              //Image.asset("images/medicine.jpg"),
                              Text('Picture of your Prescription',
                                  textAlign: TextAlign.center,
                                  style: TextStyle(
                                      color: Colors.black, fontSize: 14)),
                            ],
                            mainAxisSize: MainAxisSize.max,
                            mainAxisAlignment: MainAxisAlignment.center,
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
                Container(
                  margin:
                      EdgeInsets.symmetric(vertical: 10, horizontal: 10),
                  width: 2,
                  height: 70,
                  color: Colors.grey,
                ),
                Expanded(
                  child: Container(
                    child: Center(
                      child: Container(
                        child: Padding(
                          padding: const EdgeInsets.all(10.0),
                          child: Column(
                            children: <Widget>[
                              FlutterLogo(
                                size: 50,
                              ),
                              SizedBox(
                                height: 10,
                              ),
                              //Image.asset("images/medicine.jpg"),
                              Text('Picture of your Prescription',
                                  textAlign: TextAlign.center,
                                  style: TextStyle(
                                      color: Colors.black, fontSize: 14)),
                            ],
                            mainAxisSize: MainAxisSize.max,
                            mainAxisAlignment: MainAxisAlignment.center,
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            )
          ],
        ),
      ),
      Card(
        margin: EdgeInsets.all(10),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Container(
              width: MediaQuery.of(context).size.width,
              color: Colors.blue,
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text(
                  "Online Pharmacy",
                  style: TextStyle(fontSize: 16, color: Colors.white),
                ),
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.max,
              children: <Widget>[
                Expanded(
                  child: Container(
                    child: Center(
                      child: Container(
                        child: Padding(
                          padding: const EdgeInsets.all(10.0),
                          child: Column(
                            children: <Widget>[
                              FlutterLogo(
                                size: 50,
                              ),
                              SizedBox(
                                height: 10,
                              ),
                              //Image.asset("images/medicine.jpg"),
                              Text('Picture of your Prescription',
                                  textAlign: TextAlign.center,
                                  style: TextStyle(
                                      color: Colors.black, fontSize: 14)),
                            ],
                            mainAxisSize: MainAxisSize.max,
                            mainAxisAlignment: MainAxisAlignment.center,
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
                Container(
                  margin:
                      EdgeInsets.symmetric(vertical: 10, horizontal: 10),
                  width: 2,
                  height: 70,
                  color: Colors.grey,
                ),
                Expanded(
                  child: Container(
                    child: Center(
                      child: Container(
                        child: Padding(
                          padding: const EdgeInsets.all(10.0),
                          child: Column(
                            children: <Widget>[
                              FlutterLogo(
                                size: 50,
                              ),
                              SizedBox(
                                height: 10,
                              ),
                              //Image.asset("images/medicine.jpg"),
                              Text('Picture of your Prescription',
                                  textAlign: TextAlign.center,
                                  style: TextStyle(
                                      color: Colors.black, fontSize: 14)),
                            ],
                            mainAxisSize: MainAxisSize.max,
                            mainAxisAlignment: MainAxisAlignment.center,
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
                Container(
                  margin:
                      EdgeInsets.symmetric(vertical: 10, horizontal: 10),
                  width: 2,
                  height: 70,
                  color: Colors.grey,
                ),
                Expanded(
                  child: Container(
                    child: Center(
                      child: Container(
                        child: Padding(
                          padding: const EdgeInsets.all(10.0),
                          child: Column(
                            children: <Widget>[
                              FlutterLogo(
                                size: 50,
                              ),
                              SizedBox(
                                height: 10,
                              ),
                              //Image.asset("images/medicine.jpg"),
                              Text('Picture of your Prescription',
                                  textAlign: TextAlign.center,
                                  style: TextStyle(
                                      color: Colors.black, fontSize: 14)),
                            ],
                            mainAxisSize: MainAxisSize.max,
                            mainAxisAlignment: MainAxisAlignment.center,
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            )
          ],
        ),
      ),
      Card(
        margin: EdgeInsets.all(10),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Container(
              width: MediaQuery.of(context).size.width,
              color: Colors.blue,
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text(
                  "Online Pharmacy",
                  style: TextStyle(fontSize: 16, color: Colors.white),
                ),
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.max,
              children: <Widget>[
                Expanded(
                  child: Container(
                    child: Center(
                      child: Container(
                        child: Padding(
                          padding: const EdgeInsets.all(10.0),
                          child: Column(
                            children: <Widget>[
                              FlutterLogo(
                                size: 50,
                              ),
                              SizedBox(
                                height: 10,
                              ),
                              //Image.asset("images/medicine.jpg"),
                              Text('Picture of your Prescription',
                                  textAlign: TextAlign.center,
                                  style: TextStyle(
                                      color: Colors.black, fontSize: 14)),
                            ],
                            mainAxisSize: MainAxisSize.max,
                            mainAxisAlignment: MainAxisAlignment.center,
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
                Container(
                  margin:
                      EdgeInsets.symmetric(vertical: 10, horizontal: 10),
                  width: 2,
                  height: 70,
                  color: Colors.grey,
                ),
                Expanded(
                  child: Container(
                    child: Center(
                      child: Container(
                        child: Padding(
                          padding: const EdgeInsets.all(10.0),
                          child: Column(
                            children: <Widget>[
                              FlutterLogo(
                                size: 50,
                              ),
                              SizedBox(
                                height: 10,
                              ),
                              //Image.asset("images/medicine.jpg"),
                              Text('Picture of your Prescription',
                                  textAlign: TextAlign.center,
                                  style: TextStyle(
                                      color: Colors.black, fontSize: 14)),
                            ],
                            mainAxisSize: MainAxisSize.max,
                            mainAxisAlignment: MainAxisAlignment.center,
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
                Container(
                  margin:
                      EdgeInsets.symmetric(vertical: 10, horizontal: 10),
                  width: 2,
                  height: 70,
                  color: Colors.grey,
                ),
                Expanded(
                  child: Container(
                    child: Center(
                      child: Container(
                        child: Padding(
                          padding: const EdgeInsets.all(10.0),
                          child: Column(
                            children: <Widget>[
                              FlutterLogo(
                                size: 50,
                              ),
                              SizedBox(
                                height: 10,
                              ),
                              //Image.asset("images/medicine.jpg"),
                              Text('Picture of your Prescription',
                                  textAlign: TextAlign.center,
                                  style: TextStyle(
                                      color: Colors.black, fontSize: 14)),
                            ],
                            mainAxisSize: MainAxisSize.max,
                            mainAxisAlignment: MainAxisAlignment.center,
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            )
          ],
        ),
      ),
      Card(
        margin: EdgeInsets.all(10),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Container(
              width: MediaQuery.of(context).size.width,
              color: Colors.blue,
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text(
                  "Online Pharmacy",
                  style: TextStyle(fontSize: 16, color: Colors.white),
                ),
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.max,
              children: <Widget>[
                Expanded(
                  child: Container(
                    child: Center(
                      child: Container(
                        child: Padding(
                          padding: const EdgeInsets.all(10.0),
                          child: Column(
                            children: <Widget>[
                              FlutterLogo(
                                size: 50,
                              ),
                              SizedBox(
                                height: 10,
                              ),
                              //Image.asset("images/medicine.jpg"),
                              Text('Picture of your Prescription',
                                  textAlign: TextAlign.center,
                                  style: TextStyle(
                                      color: Colors.black, fontSize: 14)),
                            ],
                            mainAxisSize: MainAxisSize.max,
                            mainAxisAlignment: MainAxisAlignment.center,
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
                Container(
                  margin:
                      EdgeInsets.symmetric(vertical: 10, horizontal: 10),
                  width: 2,
                  height: 70,
                  color: Colors.grey,
                ),
                Expanded(
                  child: Container(
                    child: Center(
                      child: Container(
                        child: Padding(
                          padding: const EdgeInsets.all(10.0),
                          child: Column(
                            children: <Widget>[
                              FlutterLogo(
                                size: 50,
                              ),
                              SizedBox(
                                height: 10,
                              ),
                              //Image.asset("images/medicine.jpg"),
                              Text('Picture of your Prescription',
                                  textAlign: TextAlign.center,
                                  style: TextStyle(
                                      color: Colors.black, fontSize: 14)),
                            ],
                            mainAxisSize: MainAxisSize.max,
                            mainAxisAlignment: MainAxisAlignment.center,
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
                Container(
                  margin:
                      EdgeInsets.symmetric(vertical: 10, horizontal: 10),
                  width: 2,
                  height: 70,
                  color: Colors.grey,
                ),
                Expanded(
                  child: Container(
                    child: Center(
                      child: Container(
                        child: Padding(
                          padding: const EdgeInsets.all(10.0),
                          child: Column(
                            children: <Widget>[
                              FlutterLogo(
                                size: 50,
                              ),
                              SizedBox(
                                height: 10,
                              ),
                              //Image.asset("images/medicine.jpg"),
                              Text('Picture of your Prescription',
                                  textAlign: TextAlign.center,
                                  style: TextStyle(
                                      color: Colors.black, fontSize: 14)),
                            ],
                            mainAxisSize: MainAxisSize.max,
                            mainAxisAlignment: MainAxisAlignment.center,
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            )
          ],
        ),
      ),
      Card(
        margin: EdgeInsets.all(10),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Container(
              width: MediaQuery.of(context).size.width,
              color: Colors.blue,
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text(
                  "Online Pharmacy",
                  style: TextStyle(fontSize: 16, color: Colors.white),
                ),
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.max,
              children: <Widget>[
                Expanded(
                  child: Container(
                    child: Center(
                      child: Container(
                        child: Padding(
                          padding: const EdgeInsets.all(10.0),
                          child: Column(
                            children: <Widget>[
                              FlutterLogo(
                                size: 50,
                              ),
                              SizedBox(
                                height: 10,
                              ),
                              //Image.asset("images/medicine.jpg"),
                              Text('Picture of your Prescription',
                                  textAlign: TextAlign.center,
                                  style: TextStyle(
                                      color: Colors.black, fontSize: 14)),
                            ],
                            mainAxisSize: MainAxisSize.max,
                            mainAxisAlignment: MainAxisAlignment.center,
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
                Container(
                  margin:
                      EdgeInsets.symmetric(vertical: 10, horizontal: 10),
                  width: 2,
                  height: 70,
                  color: Colors.grey,
                ),
                Expanded(
                  child: Container(
                    child: Center(
                      child: Container(
                        child: Padding(
                          padding: const EdgeInsets.all(10.0),
                          child: Column(
                            children: <Widget>[
                              FlutterLogo(
                                size: 50,
                              ),
                              SizedBox(
                                height: 10,
                              ),
                              //Image.asset("images/medicine.jpg"),
                              Text('Picture of your Prescription',
                                  textAlign: TextAlign.center,
                                  style: TextStyle(
                                      color: Colors.black, fontSize: 14)),
                            ],
                            mainAxisSize: MainAxisSize.max,
                            mainAxisAlignment: MainAxisAlignment.center,
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
                Container(
                  margin:
                      EdgeInsets.symmetric(vertical: 10, horizontal: 10),
                  width: 2,
                  height: 70,
                  color: Colors.grey,
                ),
                Expanded(
                  child: Container(
                    child: Center(
                      child: Container(
                        child: Padding(
                          padding: const EdgeInsets.all(10.0),
                          child: Column(
                            children: <Widget>[
                              FlutterLogo(
                                size: 50,
                              ),
                              SizedBox(
                                height: 10,
                              ),
                              //Image.asset("images/medicine.jpg"),
                              Text('Picture of your Prescription',
                                  textAlign: TextAlign.center,
                                  style: TextStyle(
                                      color: Colors.black, fontSize: 14)),
                            ],
                            mainAxisSize: MainAxisSize.max,
                            mainAxisAlignment: MainAxisAlignment.center,
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            )
          ],
        ),
      ),
    ],
  ),
)));
}

Просто скопируйте код вставки и посмотрите, что происходит ... Пусть это вам поможет.

Answer 3

Вот мой подход к тому, что вам нужно:

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,
                          ))
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        )),
      ),
    )