title: Flutter :- Row Column Layout - Text overflow and Spacer disappear
body: <p>I created a layout (code below) but I am facing 2 issues with it.</p>
  
  <p><a href="https://i.stack.imgur.com/kOOCI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kOOCI.png" alt="enter image description here"></a></p>
  
  <p><code>Issue 1:</code> the text in bottomRightSection overflows outside the screen instead of going to the next line. </p>
  
  <p>I tried to put it in a wrap and container widgets, and I also tried to add the max lines attribute, but it still overflows outside.</p>
  
  <p><code>Issue 2:</code> on the topRightSection, I want to move the Text and Icon buttons to the end of the screen to the right. </p>
  
  <p>When I add Spacer() in between, or wrap them in Expanded/Flexible, they disappear. </p>
  
  <p>I would appreciate your time and support</p>
  
  <pre><code>import 'package:flutter/material.dart';
  
  class ProductItemUi extends StatefulWidget {
    @override
    _ProductItemUiState createState() =&gt; _ProductItemUiState();
  }
  
  class _ProductItemUiState extends State&lt;ProductItemUi&gt; {
    @override
    Widget build(BuildContext context) {
      Widget leftSection() {
        return Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.min,
          children: &lt;Widget&gt;[
            Text(
              'New',
              style: TextStyle(
                color: Colors.red,
                fontSize: 18.0,
                fontWeight: FontWeight.w400,
              ),
            ),
            SizedBox(
              height: 10.0,
            ),
            CircleAvatar(
              backgroundColor: Colors.grey,
              radius: 25.0,
            ),
          ],
        );
      }
  
      Widget topRightSection() {
        return Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: &lt;Widget&gt;[
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: &lt;Widget&gt;[
                Text(
                  'Product Name',
                  style: TextStyle(
                    color: Colors.black,
                    fontSize: 18.0,
                  ),
                ),
                Text(
                  'Product Price',
                  style: TextStyle(
                    color: Colors.black,
                    fontSize: 15.0,
                  ),
                ),
              ],
            ),
            //Spacer(),
            FlatButton(
              onPressed: () {},
              child: Text(
                'Cart',
                style: TextStyle(
                  color: Colors.black,
                  fontSize: 15.0,
                ),
              ),
            ),
            IconButton(
              onPressed: () {},
              icon: Icon(
                Icons.more_vert,
                color: Colors.black,
              ),
            )
          ],
        );
      }
  
      Widget bottomRightSection() {
        return Container(
          color: Colors.grey[300],
          height: 50.0,
          child: Text(
            'This text will be a long description about the product. Lorem ipsum dolor sit amet, consectetur adipis elit.',
            maxLines: 2,
            overflow: TextOverflow.fade,
            softWrap: false,
            style: TextStyle(
              color: Colors.black,
              fontSize: 15.0,
            ),
          ),
        );
      }
  
      return Scaffold(
        backgroundColor: Colors.black,
        body: Container(
          margin: EdgeInsets.only(top: 100.0),
          width: MediaQuery.of(context).size.width,
          height: 100.0,
          color: Colors.white,
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: &lt;Widget&gt;[
              leftSection(),
              SizedBox(
                width: 5.0,
              ),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: &lt;Widget&gt;[
                  topRightSection(),
                  bottomRightSection(),
                ],
              ),
            ],
          ),
        ),
      );
    }
  }
  </code></pre>