In this Flutter post, we will be understanding what Flutter SizedBox is and customize it with the help of a simple but proper Flutter example code. After reading this post, you will have a complete practical knowledge of how to use and customize Flutter SizedBox in Flutter apps.
Outline
- What is Flutter SizedBox Widget?
- Implementing Flutter SizedBox(Multiple Examples)
- Example 1: Flutter Container Wrapped With Flutter SizedBox Widget
- Example 2: Flutter SizedBox Widget Between Two Flutter Container Widgets
- Flutter SizedBox Widget Implementation Source Code
- Conclusion
What is Flutter SizedBox Widget?
See the below list to understand what Flutter SizedBox widget is:
- Flutter SizedBox is as the names suggests, it is a widget in Flutter.
- Its size can be customized.
- It can be used to give its child widget the size that Flutter SizedBox will specify for them.
- It can be used to create a distance between two Flutter widgets.
Enough with the theory part, I know its boring for you. So why not understand it using practical Flutter examples.
Implementing Flutter SizedBox(Multiple Examples)
First see how to define Flutter SizedBox widget. See the below steps:
- Use the SizedBox() widget class to implement it.
- Use its height constructor to specify vertical space that Flutter SizedBox will cover.
- Width constructor is used to provide horizontal space.
- Use its child constructor to pass a child widget to this Flutter SizedBox.
Let’s now see some simple example of how to use Flutter SizedBox properly.
Example 1: Flutter Container Wrapped With Flutter SizedBox Widget
In this example, we will first define a Flutter container widget, then we will pass only color to that container widget. Finally, we will wrap this container with SizedBox widget and give that SizedBox some height and width.
If we pass the SizedBox widget directly to the body constructor of Flutter Scaffold widget then its height and width will match the screen’s height and width. So we will wrap it with column widget to stop it from inheriting its parent size. See below code:
SizedBox( height: 100, width: 200, child: Container( color: Colors.blue, ), )

You can see that the height and width of container widget was null and it has inherited the height and width of its parent SizedBox widget.
You can wrap other widgets with this Flutter SizedBox Widget to give them a specific size of your choice.
Example 2: Flutter SizedBox Widget Between Two Flutter Container Widgets
We will now see how we can create a distance between two Flutter container widgets using the Flutter SizedBox. See below code:
Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Container( height: 50, width: 50, color: Colors.blue, ), SizedBox( width: 100, ), Container( height: 50, width: 50, color: Colors.green, ), ], )

Flutter SizedBox Widget Implementation Source Code
import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: Homepage(), ); } } class Homepage extends StatefulWidget { @override State<Homepage> createState() => _HomepageState(); } class _HomepageState extends State<Homepage> { @override Widget build(BuildContext context) { return SafeArea( child: Scaffold( body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Container( height: 60, width: 60, color: Colors.purple, ), SizedBox( width: 50, child: Text( 'Sizedbox width is 50', textAlign: TextAlign.center, ), ), Container( height: 60, width: 60, color: Colors.grey, ), ], ), SizedBox( height: 50, ), Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Container( height: 50, width: 50, color: Colors.blue, ), SizedBox( width: 100, child: Text( 'Sizedbox width is 100', textAlign: TextAlign.center, ), ), Container( height: 50, width: 50, color: Colors.green, ), ], ), ], )))); } }
Conclusion
To conclude, I hope you will use and customize Flutter SizedBox widget in your own Flutter apps easily after reading this post. Do comment your valuable thoughts about this post.
Also don’t forget to read my other articles on custom Flutter animations, Flutter widgets customization, Flutter books, Flutter web, amazing Flutter templates, Flutter app development and many more.
Listed below are a number of post links related to the above mentioned topics. I would really like you to utilize the search function of this website or the main menu bar to browse more topics. Thank you for reading this Flutter post.
Flutter app articles you may like: Flutter appbar title center, Flutter basics for beginners, flutter architecture, flutter vs native, Beautiful gradient login UI, Flutter appbar actions, why learn react native framework, mobile app marketing tips, react native jobs, react native elements, Dart Vs JavaScript, flutter login UI form, flutter bottom navigation bar, Flutter sliverappbar customization, unique flutter development, widgets in flutter.
You might also like:
How To Easily Use Flutter Switch Statement
How To Easily Change Flutter Glassmorphism Container Size
How To Use If Else In Flutter – Easy Flutter Guide
How To Use Beautiful Lottie Animations In Flutter App
Flutter Range Slider Beautiful Customization With Example | Syncfusion
Flutter Carousel Slider Beautiful Customization With Example