title: Flutter - cannot use Flexible inside Padding for text wrapping purpose
body: <p>In my flutter app, I want to have  a card and four boxes aligned horizontally with equal width and height inside it. Code follows ;</p>
  
  <pre><code>   @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: &lt;Widget&gt;[
                  Row(
                    children: &lt;Widget&gt;[
                      Expanded(
                        child: Container(
                          height:25,
                          color:Color(0xff6898F7),
                          child: Text('Online Pharmacy',
                          style:TextStyle(color: Color(0xffffffff)))
                        )
                      )
  
                    ],
                  ),
                      Row(
                        children: &lt;Widget&gt;[
                          Expanded(
                            flex: 1,
                            child: Container(
                              height: 150,
                              padding: EdgeInsets.only(top:40),
                              color: Colors.red,
                              child: Column(
                                children: &lt;Widget&gt;[
                                  Image.asset("images/medicine.jpg"),
  
                                  Center(
                                     child: Row(
                                        mainAxisAlignment: MainAxisAlignment.center,
                                        children: &lt;Widget&gt;[
                                          Padding(
                                            padding:EdgeInsets.only(top:25),
                                            child:Flexible(
                                              child:Text('Medicine', style: TextStyle(color: Colors.white)),
                                            ),
                                          ),
  
                                        ],
                                      ),
  
  
                                  ),
                              ],
                              )
  
                            ),
                          ),
         ],
                      ),
                    ],
                  ),
  </code></pre>
  
  <p><strong>The reason I used <code>Flexible</code> is that I wanted the text to be wrapped in multiple lines where necessary.</strong></p>
  
  <p>But I get this error :</p>
  
  <p>════════ 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&lt;=w&lt;=Infinity, h=150.0)):
  Incorrect use of ParentDataWidget.</p>
  
  <p><strong>Flexible widgets must be placed directly inside Flex widgets.</strong>
  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 ← ⋯</p>
  
  <p><strong><em>So how can I wrap the text properly ?</em></strong> <strong>Without the wrapping issue, code works well.</strong></p>
  
  <p><strong>EDIT:</strong>
  My intended layout seems to be like the image below :</p>
  
  <p><a href="https://i.stack.imgur.com/Zn9CH.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Zn9CH.jpg" alt="enter image description here"></a></p>
  
  <p><strong>Edit2:</strong>
   Let me give you a  more precise idea about the layout: </p>
  
  <p><a href="https://i.stack.imgur.com/dqPQl.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dqPQl.jpg" alt="enter image description here"></a></p>
  
  <p><strong>Edit3:</strong>
    After getting a solution ( see <a href="https://paste.ubuntu.com/p/KcngFFDXcD/" rel="nofollow noreferrer">here</a> ) 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 ?</p>
  
  <p><a href="https://i.stack.imgur.com/bYQ6p.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bYQ6p.jpg" alt="enter image description here"></a></p>