Auto expanding Container in flutter -- for all devices

Question

I need a Container with some text in to auto expand. I have an API call, which can be anything from 5 words to 500 words. I don't want to just have 1 fixed size that's huge, but contains 10 words.

I have tried Expanded() and SizedBox.Expand(), but I might be using them wrong

Card( 
 elevation: defaultTargetPlatform ==
      TargetPlatform.android ? 5.0 : 0.0,
  child: Column(
    children: <Widget>[
      Container(
        margin: const EdgeInsets.all(0.0),
        padding: const EdgeInsets.all(2.0),
        decoration: BoxDecoration(color: Colors.black),
        width: _screenSize.width,
        height: 250,
        child: Column(
          children: <Widget>[
            Container(
              color: Colors.black,
              width: _screenSize.width,
              height: 35,
              child: Padding(
                padding: const EdgeInsets.only(
                    left: 15, top: 11),
                child: Text("Title".toUpperCase(),
                  style: TextStyle(
                      color: Colors.white
                  ),
                ),
              ),
            ),
            Container(
              color: Colors.white,
              width: _screenSize.width,
              height: 210,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.only(top: 8, bottom: 5),
                    child: Text("Title of expanding text", style: TextStyle(
                      fontSize: 25,
                    ),
                    ),
                  ),
                  Text("Expanding text", style: TextStyle(
                      fontSize: 35,
                      fontWeight: FontWeight.w800
                  ),),
                ],
              ),
            ),
          ],
        ),
      ),
    ],
  ),
),

I just need the Container to expand, but stay small/get bigger

Did you find any solution?? – Sarthak Singhal Oct 09 '20 at 21:27 — Sarthak Singhal, Oct 09 '20 at 21:27

score 34 · Accepted Answer · answered Apr 10 '19 at 10:15

34

Have you tried not specifying height at all? The Container should wrap according to the child in this case.

Otherwise, the widget has a child but no height, no width, no constraints, and no alignment, and the Container passes the constraints from the parent to the child and sizes itself to match the child.

Above is an extract from the official flutter documentation for Container.

Here is the official flutter documentation link.

answered Apr 10 '19 at 10:15

bytesizedwizard

5,529
3
17
39

Thanks this solved it. I just added some padding as well, so that it doesn't touch the bottom of the Container – Randy Apr 10 '19 at 10:29
Great! Glad I could help! – bytesizedwizard Apr 10 '19 at 12:04
13

What about when a child is a listview? – Waheed Akhtar Aug 19 '19 at 14:19
3

The above method will throw an error for `ListView` since `ListView` always tends to wrap itself within the bounds of the parent widget. – bytesizedwizard Aug 20 '19 at 11:20
2

This does NOT work with a GridView or ListView – Petro Jan 25 '21 at 18:34
2

Container can't auto height a unknown height Listview child. – noveleven May 18 '21 at 07:42

score 23 · Answer 2 · edited Jun 12 '23 at 22:03

23

You can use FittedBox, this will resize your text according to available area.

You can use it like this :

FittedBox(child: Text('...............Your text...............'));

edited Jun 12 '23 at 22:03

mega6382

9,211
17
48
69

answered Apr 10 '19 at 10:15

Kalpesh Kundanani

5,413
4
22
32

3

This will also decrease the `fontSize` automatically. – CopsOnRoad Apr 10 '19 at 10:16
1

You can use: FittedBox(fit: BoxFit.none) @CopsOnRoad – Lucas Paz Sep 07 '19 at 02:32

score 17 · Answer 3 · edited Jan 03 '21 at 13:35

I would suggest you to use Constraints...this will set Container height according to the Text child's requirement. Please see the example...

Container(
    constraints: BoxConstraints(
    maxHeight: double.infinity,
),
child: Column(
children: [
  Text(
    'Hello flutter...i like flutter...i like google...',
    softWrap: true,
    style: TextStyle(
        color: Colors.white, fontSize: 20 , ),

  ),],),)

score 9 · Answer 4 · answered Jun 28 '22 at 21:55

we just neeed to add mainAxisSize: MainAxisSize.min, properties inside child Column or Row where the child is set to Container

for example

AnythingYourWidget(
  child: Container(
    child: Column( // For Example Column
      mainAxisSize: MainAxisSize.min, // these properties following the children content height available.
      children: [
          // YourWidget
      ]
    )
  )
),

score 4 · Answer 5 · answered Dec 01 '21 at 18:13

I too had a container with a text widget inside that would not scale as the text increased in character count. Make the widget tree Container -> IntrinsicWidth -> Text/TextField and it seems to play nicely for me.

IntrinsicWidth will scale the size of the container to its child.

Auto expanding Container in flutter -- for all devices

5 Answers5

Linked