CODEWITHSUNDEEP
flutterflutter-layout
jirkapenzes
jirkapenzes

Reputation: 103

How expand nested container in layout?

I trying expand a container layout. I tried use Expanded widget but still not works for me properly. I would like expand to max size blue container as you can see in example bellow. Do you have any tips how I can do it? Or what widget can I use it to solve my problem?

Here is my code: 

Container(
padding: EdgeInsets.all(3),
child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
    Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
        CircleAvatar(
            backgroundColor: Colors.brown.shade800,
            child: Text("J")),
        Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
            Text("Some text"),
            Container(
                decoration: new BoxDecoration(
                    border: new Border.all(color: Colors.blueAccent)),
                child: Text("How expand this container to max width?"))
            ],
        )
        ],
    )
    ],
));

widget screenshot

Thanks

Upvotes: 1

Views: 1878

Answers (3)

Matiullah Karimi
Matiullah Karimi

Reputation: 1314

Wrap the column widget with the Expanded widget and change the crossAxisAlignment: CrossAxisAlignment.start to crossAxisAlignment: CrossAxisAlignment.stretch.

Expanded(
  child: Column(
     crossAxisAlignment: CrossAxisAlignment.stretch,
     children: <Widget>[
        Text("Some text"),
        Container(
           decoration: new BoxDecoration(
              border: new Border.all(color: Colors.blueAccent)
           ),
           child: Text("How expand this container to max width?")
       )
    ],
 ),
)

Upvotes: 2

Andrii Turkovskyi
Andrii Turkovskyi

Reputation: 29438

I can't explain this, but it works only with two Expandeds:

ConstrainedBox(
  constraints: BoxConstraints(maxWidth: MediaQuery.of(context).size.width),
  child: Container(
    padding: EdgeInsets.all(3),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            CircleAvatar(
                backgroundColor: Colors.brown.shade800, child: Text("J")),
            Expanded(
              child: Column(
                key: key,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text("Some text"),
                  Container(
                    decoration: new BoxDecoration(
                        border: new Border.all(color: Colors.blueAccent)),
                    child: Row(
                      children: <Widget>[
                        Expanded(
                            child: Text(
                                "How expand this container to max width?"))
                      ],
                    ),
                  ),
                ],
              ),
            )
          ],
        )
      ],
    ),
  ),
);

Upvotes: 3

Extreme Geek
Extreme Geek

Reputation: 713

Did u tried Wrapping It With An Expanded Widget?

Upvotes: 0

Related Questions