Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Auto expanding Container in flutter -- for all devices

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

like image 441
Randy Avatar asked Apr 10 '19 10:04

Randy


People also ask

What is the difference between SizedBox and container in flutter?

The main advantage seems to be that SizedBox can be const and won't even create a new instance during runtime. Thanks to the magic of open source, you don't have to guess too much. Container is basically just a convenience widget which sometimes saves you to nest 4 other widgets.

How do you use a container in flutter?

Container class in flutter is a convenience widget that combines common painting, positioning, and sizing of widgets. A Container class can be used to store one or more widgets and position them on the screen according to our convenience. Basically, a container is like a box to store contents.


2 Answers

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

  ),],),)
like image 118
Fun Tadka Avatar answered Oct 10 '22 19:10

Fun Tadka


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

You can use it like this :

FittedBox(child: Text('...............Your text...............'));
like image 22
Kalpesh Kundanani Avatar answered Oct 10 '22 20:10

Kalpesh Kundanani