Flutter - cannot use Flexible inside Padding for text wrapping purpose

3
votes

In my flutter app, I want to have a card and four boxes aligned horizontally with equal width and height inside it. Code follows ;

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

                                      ],
                                    ),


                                ),
                            ],
                            )

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

The reason I used Flexible is that I wanted the text to be wrapped in multiple lines where necessary.

But I get this error :

════════ Exception caught by widgets library ═══════════════════════════════════════════════════════ The following assertion was thrown building Container(padding: EdgeInsets(0.0, 40.0, 0.0, 0.0), bg: BoxDecoration(color: MaterialColor(primary value: Color(0xfff44336))), constraints: BoxConstraints(0.0<=w<=Infinity, h=150.0)): Incorrect use of ParentDataWidget.

Flexible widgets must be placed directly inside Flex widgets. Flexible(no depth, flex: 1, dirty) has a Flex ancestor, but there are other widgets between them: - Padding(padding: EdgeInsets(0.0, 25.0, 0.0, 0.0)) These widgets cannot come between a Flexible and its Flex. The ownership chain for the parent of the offending Flexible was: Padding ← Row ← Center ← Column ← Padding ← DecoratedBox ← ConstrainedBox ← Container ← Expanded ← Row ← ⋯

So how can I wrap the text properly ? Without the wrapping issue, code works well.

EDIT: My intended layout seems to be like the image below :

enter image description here

Edit2: Let me give you a more precise idea about the layout:

enter image description here

Edit3: After getting a solution ( see here ) in chat room from pskink , I had the following layout. See that the red marked part does not get the text aligned in a centered fashion. How to align text in a centered way ?

enter image description here

3
flutterflutter-layoutword-wrap
@pskink, added an image in OP. You see in the image that 'Browse through database' caption is wrapped in 2 lines. I need such wrapping. Captions I used in my code are somewhat different from those in the image. – Istiaque Ahmed
so if you have 3 items laid horizontally so you need a Row as a direct child of Card, not Column – pskink
@pskink, Imagine that my app will have layouts like that in the image one after another. That is why I used `Column` – Istiaque Ahmed
i have no idea what you mean by that: i only see 3 items laid horizontally - where each item contains an image and the text below – pskink
@pskink, Added Edit2 with an image of the actually intended look of the app – Istiaque Ahmed

3 Answers

0
votes

enter image description hereThat my approach to what you need:

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

try textAlign: TextAlign.center, inside text Widget

0
votes

Please try this...

@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,
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            )
          ],
        ),
      ),
    ],
  ),
)));
}

Just copy paste code and see what happening... May this will help you.