Auto expanding Container in flutter -- for all devices

flutter containers expand

58,611

Solution 1

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.

Solution 2

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

You can use it like this :

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

Solution 3

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 , ),

  ),],),)

58,611

Author by

Randy

Updated on December 02, 2021

Comments

Randy over 2 years

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

CopsOnRoad about 5 years

This will also decrease the fontSize automatically.
Randy about 5 years

Thanks this solved it. I just added some padding as well, so that it doesn't touch the bottom of the Container
thedarthcoder about 5 years

Great! Glad I could help!
Waheed Akhtar almost 5 years

What about when a child is a listview?
thedarthcoder almost 5 years

The above method will throw an error for ListView since ListView always tends to wrap itself within the bounds of the parent widget.
Lucas Paz almost 5 years

You can use: FittedBox(fit: BoxFit.none) @CopsOnRoad
Petro over 3 years

This does NOT work with a GridView or ListView
noveleven about 3 years

Container can't auto height a unknown height Listview child.