How to fit Container in Row

Question

I'm going to ask a question about flutter.

Looking at the capture, I want the height of the left and right containers to match the height of the longer one.

Since we have to fit a longer height, we want to implement it in a way that does not declare a height.

I hope someone can help me solve this.

Thank you.

this is a my code

import 'package:flutter/material.dart';

class RowTest extends StatefulWidget {
  @override
  _RowTestState createState() => _RowTestState();
}

class _RowTestState extends State<RowTest> {
  @override
  Widget build(BuildContext context) {
    final Size size = MediaQuery.of(context).size;

    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(
              title: const Text('simple Page'),
            ),
            body: ListView(
              shrinkWrap: true,
              children: <Widget>[
                Container(
                  color: Colors.blue,
                  child: Column(
                    children: <Widget>[
                      Container(
                          child: Column(
                        children: <Widget>[
                          for (int i = 0; i < 5; i++)
                            Row(
                              children: <Widget>[
                                Container(
                                  width: 141,
                                  margin: EdgeInsets.fromLTRB(size.width * 0.1,
                                      8, size.width * 0.05, 8),
                                  padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
                                  decoration: BoxDecoration(
                                    border: Border.all(
                                      color: Color(0xff939393),
                                    ),
                                    color: Colors.red,
                                    borderRadius:
                                        BorderRadius.all(Radius.circular(5)),
                                  ),
                                  child: Center(
                                    child: Text(
                                      'testededed',
                                      textAlign: TextAlign.center,
                                      textScaleFactor: 1.0,
                                      style: TextStyle(
                                          fontSize: 16,
                                          height: 1.5,
                                          color: Colors.white),
                                    ),
                                  ),
                                ),
                                Container(
                                  width: 141,
                                  margin: EdgeInsets.fromLTRB(size.width * 0.05,
                                      8, size.width * 0.1, 8),
                                  padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
                                  decoration: BoxDecoration(
                                    border: Border.all(
                                      color: Color(0xff939393),
                                    ),
                                    color: Colors.red,
                                    borderRadius:
                                        BorderRadius.all(Radius.circular(5)),
                                  ),
                                  child: Center(
                                    child: Text(
                                      'testesttaaaaaaaaaaaaest',
                                      textAlign: TextAlign.center,
                                      textScaleFactor: 1.0,
                                      style: TextStyle(
                                          fontSize: 16,
                                          height: 1.5,
                                          color: Colors.white),
                                    ),
                                  ),
                                ),
                              ],
                            )
                        ],
                      )),
                    ],
                  ),
                )
              ],
            )));
  }
}

i would sugget checking out `gridView`, this question is a good place to start: https://stackoverflow.com/questions/48405123/how-to-set-custom-height-for-widget-in-gridview-in-flutter — Zvi Karp, Mar 13 '20 at 02:12
@Darish Yes. I tried with gridview. The height was kept constant, but it was too long. I am looking for a way to keep the height as text. — steve kim, Mar 13 '20 at 05:10
could you please post a screen shot of the gridview? what you mean by 'too long'?? could you explain it a little more — Darish, Mar 13 '20 at 05:13
@Darish, Yes. This is the captured image link [link](https://imgur.com/3s7RTAX) If you check the image, 'too long' means that the height is too long compared to the length of the input text. I am looking for a way to change this height to fit the text height. — steve kim, Mar 13 '20 at 05:52

score 2 · Answer 1 · answered Mar 13 '20 at 03:46

If you use: Row (with mainAxisSize max) > Expanded > Container, the container will fit the entire row

If you use: Column > Expanded > Container, the container will fit the entire column

If you use: Column > Row (with mainAxisSize max) > Expanded > Container, Container, Container, the 3 containers will fit the entire row with the same width

If you use: Scaffold > Stack (with fit> StackFit.expand) > Expanded > Container, the stack will try to fit the entire scaffold and the container will fit the stack

score 0 · Answer 2 · answered Mar 13 '20 at 08:10

0

Use crossAxisAlignment: CrossAxisAlignment.start to your Root Column of Tree

     Column(
              crossAxisAlignment: CrossAxisAlignment.start,

answered Mar 13 '20 at 08:10

Aamil Silawat

7,735
3
19
37

score 0 · Accepted Answer · answered Mar 23 '20 at 01:45

I'm sorry for the delay in the response because I had several things overlapped.

I solved it using IntrinsicHeight.

Thanks to everyone who helped with the comments.


class RowTest extends StatefulWidget {
  @override
  _RowTestState createState() => _RowTestState();
}

class _RowTestState extends State<RowTest> {
  @override
  Widget build(BuildContext context) {
    final Size size = MediaQuery.of(context).size;

    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(
              title: const Text('simple Page'),
            ),
            body: ListView(
              shrinkWrap: true,
              children: <Widget>[
                Container(
                  color: Colors.blue,
                  child: Column(
                    children: <Widget>[
                      Container(
                          child: Column(
                        children: <Widget>[
                          for (int i = 0; i < 5; i++)
                            IntrinsicHeight(
                              child: Row(
                                children: <Widget>[
                                  Container(
                                    width: 141,
                                    margin: EdgeInsets.fromLTRB(
                                        size.width * 0.1,
                                        8,
                                        size.width * 0.05,
                                        8),
                                    padding:
                                        EdgeInsets.fromLTRB(10, 10, 10, 10),
                                    decoration: BoxDecoration(
                                      border: Border.all(
                                        color: Color(0xff939393),
                                      ),
                                      color: Colors.red,
                                      borderRadius:
                                          BorderRadius.all(Radius.circular(5)),
                                    ),
                                    child: Center(
                                      child: Text(
                                        'testededed',
                                        textAlign: TextAlign.center,
                                        textScaleFactor: 1.0,
                                        style: TextStyle(
                                            fontSize: 16,
                                            height: 1.5,
                                            color: Colors.white),
                                      ),
                                    ),
                                  ),
                                  Container(
                                    width: 141,
                                    margin: EdgeInsets.fromLTRB(
                                        size.width * 0.05,
                                        8,
                                        size.width * 0.1,
                                        8),
                                    padding:
                                        EdgeInsets.fromLTRB(10, 10, 10, 10),
                                    decoration: BoxDecoration(
                                      border: Border.all(
                                        color: Color(0xff939393),
                                      ),
                                      color: Colors.red,
                                      borderRadius:
                                          BorderRadius.all(Radius.circular(5)),
                                    ),
                                    child: Center(
                                      child: Text(
                                        'testesttaaaaaaaaaaaaest',
                                        textAlign: TextAlign.center,
                                        textScaleFactor: 1.0,
                                        style: TextStyle(
                                            fontSize: 16,
                                            height: 1.5,
                                            color: Colors.white),
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                            )
                        ],
                      )),
                    ],
                  ),
                )
              ],
            )));
  }
}

How to fit Container in Row

3 Answers3