How to add a Container inside another Container?

<p>Usually, when you add a container inside another container, the boundaries are not restricted. So, let's find out how to restrict its boundaries by adding a container inside another container. Here is an example of what you are going to achieve in this example.</p> <p>![](https://fluttercentral.com/Uploads/48bf50d0-0245-4fca-8415-1d81a6ce0499.gifwidth="50%height="auto](</p> <p>To achieve this, we are using a ClipRRect class. It's a widget that clips its child using a rounder rectangle.</p> <p>Here is full code from main.dart file. All you need to do is, copy-paste and run to see the output.</p> <p>runApp(MyApp());</p> <p>class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState(); }</p> <p>class _MyAppState extends State { double padValue = 1; @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text("Container inside another Container"), ), body: Column( children: [ Expanded( child: Center( child: MyFillingContainer( progress: padValue / 10, size: 200, backgroundColor: Colors.grey, progressColor: Colors.blue, ), ), ), Text('Fill Value: $padValue'), ButtonBar( alignment: MainAxisAlignment.center, children: [ RaisedButton( child: Text('Fill'), onPressed: () { setState(() { padValue = padValue + 1; }); }, ), RaisedButton( child: Text('Unfill'), onPressed: () { setState(() { if (padValue != 0) { padValue = padValue - 1; } }); }, ) ], ), ], ), ), ); } }</p> <p>class MyFillingContainer extends StatelessWidget { final double progress; final double size; final Color backgroundColor; final Color progressColor;</p> <p>const MyFillingContainer( {Key key, this.progress, this.size, this.backgroundColor, this.progressColor}) : super(key: key);</p> <p>@override Widget build(BuildContext context) { return ClipRRect( child: SizedBox( height: size, width: size, child: Stack(<br /> children: [ Container( color: backgroundColor, ), Center( child: Container( height: size * progress, width: size * progress, color: progressColor, ), ) ]), ), ); } } Hope this is useful. Thanks, Srikanth</p>