Flutter :- Row Column Layout - Text overflow and Spacer disappear

Question

I created a layout (code below) but I am facing 2 issues with it.

Issue 1: the text in bottomRightSection overflows outside the screen instead of going to the next line.

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.

Issue 2: on the topRightSection, I want to move the Text and Icon buttons to the end of the screen to the right.

When I add Spacer() in between, or wrap them in Expanded/Flexible, they disappear.

I would appreciate your time and support

import 'package:flutter/material.dart';

class ProductItemUi extends StatefulWidget {
  @override
  _ProductItemUiState createState() => _ProductItemUiState();
}

class _ProductItemUiState extends State<ProductItemUi> {
  @override
  Widget build(BuildContext context) {
    Widget leftSection() {
      return Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          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: <Widget>[
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              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: <Widget>[
            leftSection(),
            SizedBox(
              width: 5.0,
            ),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                topRightSection(),
                bottomRightSection(),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

You just need to use the Expanded and MediaQuery properly, just i have used in the below example.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

class HomeScreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _HomeScreen();
  }
}

class _HomeScreen extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Container(
          color: Colors.white,
          child:
          Wrap(
            children: <Widget>[
              Container(
                height: MediaQuery.of(context).size.width * 0.3,
                color: Colors.lightGreen,
                margin: EdgeInsets.only(top: 20.0, left: 5.0, right: 5.0),
                padding: EdgeInsets.all(5.0),
                child: Row(
                  children: <Widget>[
                    Expanded(
                      flex: 2,
                      child: Align(
                        alignment: Alignment.center,
                        child: Column(
                          children: <Widget>[
                            Text(
                              'New',
                              style: TextStyle(
                                color: Colors.red,
                                fontSize: 18.0,
                                fontWeight: FontWeight.w400,
                              ),
                            ),
                            SizedBox(
                              height: 10.0,
                            ),
                            CircleAvatar(
                              backgroundColor: Colors.grey,
                              radius: MediaQuery.of(context).size.width * 0.08,
                            ),
                          ],
                        ),
                      ),
                    ),
                    Expanded(
                      flex: 8,
                      child: Column(
                        children: <Widget>[
                          Expanded(
                            flex: 5,
                            child: Row(
                              children: <Widget>[
                                Expanded(
                                  flex: 6,
                                  child: Align(
                                    alignment: Alignment.centerLeft,
                                    child: Column(
                                      children: <Widget>[
                                        Text(
                                          'Product Name',
                                          style: TextStyle(
                                            color: Colors.black,
                                            fontSize: 18.0,
                                          ),
                                        ),
                                        Text(
                                          'Product Price',
                                          style: TextStyle(
                                            color: Colors.black,
                                            fontSize: 15.0,
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                ),
                                Expanded(
                                  flex: 4,
                                  child:

                                  Align(
                                    alignment: Alignment.topRight,
                                    child: Row(
                                      children: <Widget>[
                                        FlatButton(
                                          onPressed: () {},
                                          child: Text(
                                            'Cart',
                                            style: TextStyle(
                                              color: Colors.black,
                                              fontSize: 15.0,
                                            ),
                                          ),
                                        ),
                                        GestureDetector( onTap: () {}, child: Icon(
                                          Icons.more_vert,
                                          color: Colors.black,
                                        ) )


                                      ],
                                    ),
                                  )

                                  ,
                                )
                              ],
                            ),
                          ),
                          Expanded(
                            flex: 5,
                            child: Text(
                              'This text will be a long description about the product. Lorem ipsum dolor sit amet, consectetur adipis elit.',
                              textAlign: TextAlign.left,
                              maxLines: 3,
                              overflow: TextOverflow.ellipsis,
                              softWrap: false,
                              style: TextStyle(
                                color: Colors.black,
                                fontSize: 15.0,
                              ),
                            ),
                          )
                        ],
                      ),
                    )
                  ],
                ),
              )
            ],
          )

         ,
        );
  }
}

And output will be like below