How can I get a Row in flutter to fill the entire space without overflowing?

user_12338762 0
Viewed 1182

I always have problems with UI in flutter, especially when going to rows/colums and their size. Basically what I have is A Row with a picture and a column in it. The first thing I want to have is a Row with MainAxisAllignment.Spacebetween, so that TextA and TextB are as far away from each other as possible. I cannot have two columns, because then the TextD, which can be pretty long, would push TextB off screen. i tried around with some expanded, flexible and mainaxissize, but I have honestly no idea how this should be done.

Usually I'd MSPaint but I'm on a Mac and don't know of anything as perfect as paint, so here my beautiful Drawing of what it looks like. the 'should' state will be TextB on the different end of the inner row

|---------------------------------------------------|
|  I  |--------------------------------------------||
|  M  |  |TextATextB|                              ||
|  A  |  |-Row------|                              ||
|  G  |  TextC                                     ||
|  E  |  TextD                                     ||
|     |-Column-------------------------------------||
|-Row-----------------------------------------------|

Row(
        children: <Widget>[
          Image.network(
            picture,
            height: 63,
          ),
          SizedBox(
            width: 6,
          ),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Text(_viewModel.time),
                  Text(_viewModel.session),
                ],
              ),
              Text(_viewModel.room),
              SizedBox(
                height: 2,
              ),
              Text(
                _viewModel.title,
                overflow: TextOverflow.ellipsis,
                maxLines: 1,
                style: TextStyle(fontWeight: FontWeight.w900),
              ),
            ],
          ),
        ],
      ),

And this is the code on how I did this widget. Thanks!

edit: with Excel i made a hopefully not confusing version. basically: i wanna make the row as long as the column is wide enter image description here

dart flutter
3 Answers

That was a neat question. As per the requirement, you have done most of the parts, some improvements were missing, hence, I am adding this into your code.

  1. CrossAxisAlignment.stretch is the key
  2. Make sure to use Expanded and wrap it around your Column to work

Final solution:

            // I have not used your data, just used mine for image, texts
            Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                  Image.network(
                   "https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80",
                    height: 63.0,
                    width: 63.0
                  ),
                  SizedBox(width: 6.0),
                  Expanded(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      children: <Widget>[
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: <Widget>[
                            Text('Text A'),
                            Text('Text B'),
                          ],
                        ),
                        Text('Text C'),
                        SizedBox(height: 2.0),
                        Text(
                          'Text D',
                          overflow: TextOverflow.ellipsis,
                          maxLines: 1,
                          style: TextStyle(fontWeight: FontWeight.w900),
                        ),
                      ]
                    )
                  )
                ]
              )

Result you will get is:

Result

user_53625830

If you want to achieve something like this, then the following code snippet will help you.

image

IntrinsicHeight(
    child: Row(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
      Image.network(
        "https://media.gettyimages.com/photos/young-man-at-sunset-picture-id496261146?s=612x612",
        fit: BoxFit.fill,
        height: 69,
      ),
      SizedBox(
        width: 6,
      ),
      Expanded(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Text("time"),
                Text("session"),
              ],
            ),
            Text("room"),
            SizedBox(
              height: 2,
            ),
            Text(
              "How can I get a Row in flutter to fill the entire space without overflowing?",
              overflow: TextOverflow.ellipsis,
              maxLines: 1,
              style: TextStyle(fontWeight: FontWeight.w900),
            ),
          ],
        ),
      ),
    ]),
  );
user_59577150

Based on the image, here's my code:

      Row(
        children: <Widget>[
          Container(child: Image(/*Your Image Here*/)),

          Column(
            children: <Widget>[
              Row( // THIS IS BLUE AND LIGHT BLUE ROW THAT SHOW UP IN THE IMAGE
                children: <Widget>[
                  Container(/*THIS IS YOUR BLUE ROW*/),
                  Container(/*THIS IS YOUR LIGHT BLUE ROW*/),
                ],
              ),

              Row( // THIS IS ANOTHER BLUE AND LIGHT BLUE ROW THAT DON'T SHOW UP IN THE IMAGE
                children: <Widget>[
                  Container(/*THIS IS YOUR ANOTHER BLUE ROW*/),
                  Container(/*THIS IS YOURANOTHER LIGHT BLUE ROW*/),
                ],
              ),

              // ADD MORE ROW HERE

            ],
          ),

        ],
      ),

But I still don't add the MainAxisAlignment or CrossAxisAlignment. And it might still don't looks like the image. But, I've done the core foundation of it.

user_135403490
Related