In this article, I'm going to share how to resize a Container irrespective of its child widgets in Flutter.
Let's see this step by step. The soultion to this problem is there in step3 and full code is at the bottom of the page.
1) First, we will create a container with a green background. You can observe that the whole background is green now.
color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;](color: #569cd6;](class color: #4ec9b0;](_MyAppState color: #569cd6;](extends color: #4ec9b0;](State {
color: #569cd6;](@override color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext context) { color: #c586c0;](return color: #4ec9b0;](MaterialApp( home: color: #4ec9b0;](Scaffold( appBar: color: #4ec9b0;](AppBar( title: color: #4ec9b0;](Text(color: #ce9178;]("Container Example"), ), body: color: #4ec9b0;](Center( child: color: #4ec9b0;](Container( color: color: #4ec9b0;](Colors.green, ), )), ); }}
![](https://fluttercentral.com/Uploads/b64974ec-478e-4fca-9cb4-9e2df9ab4e73.PNGwidth="50%height="auto](
2) After a Text is added to the container. It gets resized as its child size.
color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;](color: #569cd6;](class color: #4ec9b0;](_MyAppState color: #569cd6;](extends color: #4ec9b0;](State {
color: #569cd6;](@override color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext context) { color: #c586c0;](return color: #4ec9b0;](MaterialApp( home: color: #4ec9b0;](Scaffold( appBar: color: #4ec9b0;](AppBar( title: color: #4ec9b0;](Text(color: #ce9178;]("Expand Button Example"), ), body: color: #4ec9b0;](Center( child: color: #4ec9b0;](Container( color: color: #4ec9b0;](Colors.green, child: color: #4ec9b0;](Text(color: #ce9178;]('Hello'), ), )), ); }}
![](https://fluttercentral.com/Uploads/d97d016d-2f81-4542-97fb-11bd94455ca4.PNGwidth="50%height="auto](
3) Now in order to expand the container irrespective of its child elements. You need to wrap the Container insize a FractionallySizedBox.
color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;](color: #569cd6;](class color: #4ec9b0;](_MyAppState color: #569cd6;](extends color: #4ec9b0;](State {
color: #569cd6;](@override color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext context) { color: #c586c0;](return color: #4ec9b0;](MaterialApp( home: color: #4ec9b0;](Scaffold( appBar: color: #4ec9b0;](AppBar( title: color: #4ec9b0;](Text(color: #ce9178;]("Container Example"), ), body: color: #4ec9b0;](Center( child: color: #4ec9b0;](FractionallySizedBox( widthFactor: color: #b5cea8;](0.5, heightFactor: color: #b5cea8;](0.5, child: color: #4ec9b0;](Container( color: color: #4ec9b0;](Colors.green, child: color: #4ec9b0;](Center(child: color: #4ec9b0;](Text(color: #ce9178;]('Hello')), ) ), )), ); }}
![](https://fluttercentral.com/Uploads/ba4c6d20-2978-4de7-96e6-f805b34d4669.PNGwidth="50%height="auto](
Well, this is how you can resize the container irrespective of its child.
Here is the full code from main.dart file.
color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;](color: #569cd6;](import color: #ce9178;]('package:flutter/material.dart';
color: #569cd6;](void color: #dcdcaa;](main() => color: #dcdcaa;](runApp(color: #4ec9b0;](MyApp());
color: #569cd6;](class color: #4ec9b0;](MyApp color: #569cd6;](extends color: #4ec9b0;](StatefulWidget { color: #569cd6;](@override color: #4ec9b0;](_MyAppState color: #dcdcaa;](createState() => color: #4ec9b0;](_MyAppState();}
color: #569cd6;](class color: #4ec9b0;](_MyAppState color: #569cd6;](extends color: #4ec9b0;](State {
color: #569cd6;](@override color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext context) { color: #c586c0;](return color: #4ec9b0;](MaterialApp( home: color: #4ec9b0;](Scaffold( appBar: color: #4ec9b0;](AppBar( title: color: #4ec9b0;](Text(color: #ce9178;]("Container Example"), ), body: color: #4ec9b0;](Center( child: color: #4ec9b0;](FractionallySizedBox( widthFactor: color: #b5cea8;](0.5, heightFactor: color: #b5cea8;](0.5, child: color: #4ec9b0;](Container( color: color: #4ec9b0;](Colors.green, child: color: #4ec9b0;](Center(child: color: #4ec9b0;](Text(color: #ce9178;]('Hello')), ) ), )), ); }}
Thanks,
Srikanth