Flutter Create Fixed Width Height Size View using SizedBox Container

SizedBox widget view in flutter is used to create box with specified width and height. If we put the SizedBox under another widget as child view then it can only be sized max as its parent widget. The default value of height and width is Zero in SizedBox. We would also used Container widget in this tutorial. Both SizedBox and Container widgets works same in flutter. So in this tutorial we would Create Fixed Width Height Size View using SizedBox and Container Widget in flutter android iOS app example.

Contents in this project Flutter Create Fixed Width Height Size View using SizedBox and Container Widget in Android iOS:

1. Import material.dart package in your app’s main.dart file.

2. Call our main MyApp class using void main runApp() function.

3. Create our main MyApp class extends with StatelessWidget.

4. Create Widget Build method in MyApp class and inside home section first create Scaffold widget. Then in Scaffold widget create SafeArea widget. Now we would define the Center widget in SafeArea widget. Finally we would put a Column widget in Center widget. Column widget can hold multiple children.

5. Create Container widget in Column widget with Green background color. As you can see in below code we have defined fixed height and width as 150 pixels. You can also add another widget here using child.

6. Create SizedBox widget in Column widget after Container. SizedBox support fixed width and height. It did not directly supports background color so we are using Decorate box to setting up background of SizedBox widget.

7. Complete source code for main.dart file:

Screenshot:

Flutter Create Fixed Width Height Size View using SizedBox Container

Leave a Reply

Your email address will not be published.