Flutter layout system is powerful and flexible, and with the right tools, it can be easy to use as well. In this article, we’ll provide you with a variety of code snippets and examples to help you get started with Flutter layouts.
Whether you’re a beginner just learning the ropes or an experienced developer looking for inspiration, this flutter layout cheat sheet has something for everyone. We’ll focus on using Flutter widgets to create simple and complex layouts, and we’ll be constantly expanding our sample catalog to include more and more examples.
MainaxisAlignment
Row /*or Column*/( mainAxisAlignment: MainAxisAlignment.start, children: <Widget>[ Icon(Icons.back, size: 40), Icon(Icons.back, size: 40), Icon(Icons.back, size: 40), ], ),
Row /*or Column*/( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Icon(Icons.back, size: 40), Icon(Icons.back, size: 40), Icon(Icons.back, size: 40), ], ),
Row /*or Column*/( mainAxisAlignment: MainAxisAlignment.end, children: <Widget>[ Icon(Icons.back, size: 40), Icon(Icons.back, size: 40), Icon(Icons.back, size: 40), ], ),
Row /*or Column*/( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[ Icon(Icons.back, size: 40), Icon(Icons.back, size: 40), Icon(Icons.back, size: 40), ], ),
Row /*or Column*/( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: <Widget>[ Icon(Icons.back, size: 40), Icon(Icons.back, size: 40), Icon(Icons.back, size: 40), ], ),
Row /*or Column*/( mainAxisAlignment: MainAxisAlignment.spaceAround, children: <Widget>[ Icon(Icons.back, size: 40), Icon(Icons.back, size: 40), Icon(Icons.back, size: 40), ], ),
LinearGradient, RadialGradient, and SweepGradient are the three different forms of gradients.
Row( crossAxisAlignment: CrossAxisAlignment.baseline, textBaseline: TextBaseline.alphabetic, children: <Widget>[ Text( “Mindbowser”, style: Theme.of(context).textTheme.colortheme(), ), Text( “Mindbowser”, style: Theme.of(context).textTheme.redshade(), ), ], ),
CrossAxisAlignment
Row /*or Column*/( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Icon(Icons.star, size: 40), Icon(Icons.star, size: 150), Icon(Icons.star, size: 40), ], ),
Row /*or Column*/( crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ Icon(Icons.star, size: 40), Icon(Icons.star, size: 150), Icon(Icons.star, size: 40), ], ),
Row /*or Column*/( crossAxisAlignment: CrossAxisAlignment.end, children: <Widget>[ Icon(Icons.star, size: 40), Icon(Icons.star, size: 150), Icon(Icons.star, size: 40), ], ),
Row /*or Column*/( crossAxisAlignment: CrossAxisAlignment.stretch, children: <Widget>[ Icon(Icons.star, size: 40), Icon(Icons.star, size: 150), Icon(Icons.star, size: 40), ], ),
MainAxisSize
Row /*or Column*/( mainAxisSize: MainAxisSize.max, children: <Widget>[ Icon(Icons.star, size: 40), Icon(Icons.star, size: 40), Icon(Icons.star, size: 40), ], ),
Row /*or Column*/( mainAxisSize: MainAxisSize.min, children: <Widget>[ Icon(Icons.star, size: 40), Icon(Icons.star, size: 40), Icon(Icons.star, size: 40), ], ),
Do you want every widget in a row or column to match the biggest widget’s height or width? Look no further!
If your layout is of this type:
Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text(‘Mindbowser’)), body: Center( child: Column( children: <Widget>[ RaisedButton( onPressed: () {}, child: Text(“Small”), ), RaisedButton( onPressed: () {}, child: Text('Larger’'), ), RaisedButton( onPressed: () {}, child: Text('The raised button'), ), ], ), ), ); }
However, if you want every button to be the widest possible, use intrinsicwidth:
Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text(‘Mindbowser’)), body: Center( child: IntrinsicWidth( child: Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: <Widget>[ RaisedButton( onPressed: () {}, child: Text(‘Small Text’), ), RaisedButton( onPressed: () {}, child: Text('Longer Text'), ), RaisedButton( onPressed: () {}, child: Text('Raised Button'), ), ], ), ), ), ); }
Use a combination of IntrinsicHeight and Row widgets if you have a similar issue but prefer to have all the widgets the same height as the tallest.
Ideal for layering Widgets on top of one another.
@override Widget build(BuildContext context) { Widget main = Scaffold( appBar: AppBar(title: Text(‘Mindbowser’)), ); return Stack( fit: StackFit.expand, children: <Widget>[ main, Banner( message: "Banner Top ", location: BannerLocation.topStart, ), Banner( message: "Banner End", location: BannerLocation.topEnd, ), Banner( message: "Bottom Start", location: BannerLocation.bottomStart, ), Banner( message: "Bottom End", location: BannerLocation.bottomEnd, ), ], ); }
It will help if you put your widgets in a positioned widget.
Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text(‘Mindbowser’)), body: Stack( fit: StackFit.expand, children: <Widget>[ Material(color: Colors.redAccent), Positioned( top: 0, left: 0, child: Icon(Icons.star, size: 40), ), Positioned( top: 259, left: 150, child: Icon(Icons.call, size: 40), ), ], ), ); }
You can use LayoutBuilder to get the top/bottom numbers if you want to avoid hazarding a guess.
Widget build(BuildContext context) { const iconSize = 40; return Scaffold( appBar: AppBar(title: Text('Mindbowser Layout Text')), body: LayoutBuilder( builder: (context, constraints) => Stack( fit: StackFit.expand, children: <Widget>[ Material(color: Colors.redAccent), Positioned( top: 0, child: Icon(Icons.back, size: iconSize), ), Positioned( top: constraints.maxHeight - iconSize, left: constraints.maxWidth - iconSize, child: Icon(Icons.phone, size: iconSize), ), ], ), ), ); }
Expanded works well for dividing space between numerous things and is compatible with Flex-Flexbox architecture.
Row( children: <Widget>[ Expanded( child: Container( decoration: const BoxDecoration(color: Colors.yellow), ), flex: 4, ), Expanded( child: Container( decoration: const BoxDecoration(color: Colors.gray), ), flex: 3, ), Expanded( child: Container( decoration: const BoxDecoration(color: Colors.orange), ), flex: 2, ), ], ),
Most widgets will utilize the least amount of space feasible by default:
Card(child: const Text('Hey There!!!!'), color: Colors.red)A widget can use the remaining space however they like with ConstrainedBox.
ConstrainedBox( constraints: BoxConstraints.expand(), child: const Card( child: const Text('Hey There!'), color: Colors.orange, ), ),
When using BoxConstraints, you can limit the minimum and maximum height and width that a widget can have.
BoxConstraints. If not supplied, expand uses limitless (all available) space:
ConstrainedBox( constraints: BoxConstraints.expand(height: 500), child: const Card( child: const Text('Hey There!'), color: Colors.red, ), ),
And it’s the same as:
ConstrainedBox( constraints: BoxConstraints( minWidth: double.infinity, maxWidth: double.infinity, minHeight: 400, maxHeight: 400, ), child: const Card( child: const Text('Hey There!'), color: Colors.red, ), ),
Sometimes it’s not easy to adjust our widget to the right size; for instance, it keeps stretching when you don’t want it to:
As an illustration, the following occurs when you only want the button not to be extended and you have a Column with CrossAxisAlignment.stretch:
Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Align is here’')), body: Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: <Widget>[ Align( child: RaisedButton( onPressed: () {}, child: const Text(‘Raised button’), ), ), ], ), ); }
Always try wrapping your widget with align first when it refuses to obey the constraints you try to set up.
One of the most popular Widgets, and for a good reason:
The container as a tool for layout
When you don’t provide the container’s height and width, it will be the same size as its child.
Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Mindbowser’')), body: Container( color: Colors.redAccent, child: Text("Hey"), ), ); }
Use double to expand the Container such that it matches its parent. For the qualities of height and width, infinite.
Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Mindbowser')), body: Container( height: double.infinity, width: double.infinity, color: Colors.redAccent, child: Text("Hey"), ), ); }
Container As Decoration
The color attribute can affect the container’s background, as well as decoration and foregroundDecoration. (With those two parameters, you can completely alter how the container appears, but I’ll cover alternative decorations in more detail later.)
Foreground decoration is usually on top of the child, while the decoration is always behind the child.
Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Mindbowser text')), body: Container( height: double.infinity, width: double.infinity, decoration: BoxDecoration(color: Colors.redAccent), child: Text("Hi"), ), ); } decoration and foregroundDecoration Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Container.foregroundDecoration')), body: Container( height: double.infinity, width: double.infinity, decoration: BoxDecoration(color: Colors.redAccent), foregroundDecoration: BoxDecoration( color: Colors.yellow.withOpacity(0.5), ), child: Text("Hi"), ), ); }
You can use the transform property directly from the Container if you want to update your layout with something other than the Transform widget.
Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text(‘Mindbowser’)), body: Container( height: 200, width: 200, transform: Matrix4.rotationZ(pi / 3), decoration: BoxDecoration(color: Colors.redAccent), child: Text( "Hey", textAlign: TextAlign.center, ), ), ); }
The decoration is typically applied to a Container widget to alter the appearance of the container.
image: DecorationImage
Puts an image as a background:
Scaffold( appBar: AppBar(title: Text('Mindbowser’)), body: Center( child: Container( height: 200, width: 200, decoration: BoxDecoration( color: Colors.red, image: DecorationImage( fit: BoxFit.fitWidth, image: NetworkImage( 'https://flutter.io/images/background.png', ), ), ), ), ), );
Specifies what should the border of the Container looks like.
Scaffold( appBar: AppBar(title: Text(‘Mindbowser’)), body: Center( child: Container( height: 400, width: 400, decoration: BoxDecoration( color: Colors.red, border: Border.all(color: Colors.black, width: 4), ), ), ), );
Enables border corners to be rounded.
If the decoration is in the form of a BoxShape.circle, borderRadius will not function.
Scaffold( appBar: AppBar(title: Text(Mindbowser’')), body: Center( child: Container( Height: 300, width: 300, decoration: BoxDecoration( color: Colors.red, border: Border.all(color: Colors.black, width: 2), borderRadius: BorderRadius.all(Radius.circular(20)); ), ), ), );
Box decoration can be either a rectangle/square or an ellipse/circle.
For any other shape, you can use ShapeDecoration instead of BoxDecoration.
Scaffold( appBar: AppBar(title: Text('MINDBOWSER’)), body: Center( child: Container( height: 300, width: 300, decoration: BoxDecoration( color: Colors.red, shape: BoxShape.circle, ), ), ), );
Adds shadow to the Container.
This parameter is a list because you can specify multiple different shadows and merge them together.
Scaffold( appBar: AppBar(title: Text(‘Mindbowser')), body: Center( child: Container( height: 300, width: 300, decoration: BoxDecoration( color: Colors.red, boxShadow: const [ BoxShadow(blurRadius: 25), ], ), ), ), );
gradient
LinearGradient, RadialGradient, and SweepGradient are the three different forms of gradients.
Scaffold( appBar: AppBar(title: Text('gradient: LinearGradient')), body: Center( child: Container( height: 200, width: 200, decoration: BoxDecoration( gradient: LinearGradient( colors: const [ Colors.red, Colors.blue, ], ), ), ), ), );
Scaffold( appBar: AppBar(title: Text('Mindbowser’')), body: Center( child: Container( height: 300, width: 300, decoration: BoxDecoration( gradient: RadialGradient( colors: const [Colors.green, Colors.orange], stops: const [0.5, 1.5], ), ), ), ), );
Scaffold( appBar: AppBar(title: Text('Mindbowser’')), body: Center( child: Container( height: 300, width: 300, decoration: BoxDecoration( gradient: SweepGradient( colors: const [ Colors.red, Colors.grey, Colors.skyblue, Colors.lightgreen, Colors.yellow, ], stops: const [0.0, 0.5, 0.3, 0.9, 1.5], ), ), ), ), );
BoxDecoration’s backgroundBlendMode is its most intricately detailed attribute. It is in charge of blending the BoxDecoration’s color/gradient scheme with the surface it is placed on.
You can utilize a sizable number of the algorithms listed in the BlendMode enum with backgroundBlendMode.
Set BoxDecoration to foregroundDecoration, which will be drawn on top of the Container’s child first (whereas decoration is pulled behind the child).
Scaffold( appBar: AppBar(title: Text(‘Mindbowser’)), body: Center( child: Container( height: 300, width: 300, foregroundDecoration: BoxDecoration( backgroundBlendMode: BlendMode.exclusion, gradient: LinearGradient( colors: const [ Colors.orange, Colors.green, ], ), ), child: Image.network( 'https://flutter.io/images/background.png', ), ), ), );
The effect of backgroundBlendMode extends beyond the Container it is contained in.
Anything above the Container in the widget tree has its color changed by the backgroundBlendMode setting.
A parent Container draws an image, and a child Container employs backgroundBlendMode in the code below. You would nevertheless have the same result as before.
Scaffold( appBar: AppBar(title: Text(‘Mindbowser’)), body: Center( child: Container( decoration: BoxDecoration( image: DecorationImage( image: NetworkImage( 'https://flutter.io/images/background.png', ), ), ), child: Container( height: 300, width: 300, foregroundDecoration: BoxDecoration( backgroundBlendMode: BlendMode.exclusion, gradient: LinearGradient( colors: const [ Colors.orange, Colors.green, ], ), ), ), ), ), );
Border with cut corners
Scaffold( appBar: AppBar(title: Text('shape: BeveledRectangleBorder')), body: Center( child: Material( shape: const BeveledRectangleBorder( borderRadius: BorderRadius.all(Radius.circular(30)), side: BorderSide(color: Colors.grey, width: 6), ), color: Colors.blue, child: Container( height: 300, width: 300, ), ), ), );
SliverFillRemaining
When you want to centre your content even when there isn’t enough room for it, this widget is indispensable. Interactive illustration.
Scaffold( appBar: AppBar(title: Text(‘Mindbowser’)), body: CustomScrollView( slivers: [ SliverFillRemaining( hasScrollBody: false, child: Column( mainAxisAlignment: MainAxisAlignment.center, children: const [ FlutterLogo(size: 300), Text( 'Center word’ 'logo', textAlign: TextAlign.center, ), ], ), ), ], ), );
If there is not enough room for the content to be in the center, SliverFillRemaining will scroll:
Without SliverFillRemaining, the content would have overflowed as follows:
An insufficient space without SliverFillRemaining
completing the empty spot
In addition to helping you center your content, SliverFillRemaining will fill the empty viewport space. This widget must be positioned in CustomScrollView as the last sliver to accomplish that.
If there is insufficient room, the widget becomes scrollable:
Scaffold( appBar: AppBar(title: Text('SliverFillRemaining')), body: CustomScrollView( slivers: [ SliverList( delegate: SliverChildListDelegate(const [ ListTile(title: Text(‘List text 1')), ListTile(title: Text('‘List text 2')), ListTile(title: Text(‘List text 3')), ListTile(title: Text(‘List text 4’)), ]), ), SliverFillRemaining( hasScrollBody: false, child: Container( color: Colors.redAccent, child: Column( mainAxisAlignment: MainAxisAlignment.center, children: const [ FlutterLogo(size: 300), Text( 'Centered Text’' 'logo', textAlign: TextAlign.center, ), ], ), ), ), ], ), );
One of the easiest yet most practical Widgets is this one.
ConstrainedBox as SizedBox
ConstrainedBox and SizedBox can both function in a similar ways.
SizedBox as padding
You can use the Padding or Container widgets to add margin or padding as necessary. However, they might need to be more understandable and verbose than introducing a Sizedbox.
Column( children: <Widget>[ Icon(Icons.star, size: 70), const SizedBox(height: 200), Icon(Icons.star, size: 70), Icon(Icons.star, size: 70), ], ),
Because SizedBox has a const constructor, using const SizedBox() is cheap**
We should avoid drawing in some regions on various platforms, such as the Notch on the iPhone X or the Status Bar on Android.
SafeArea widget answers this issue (see examples with and without SafeArea).
Widget build(BuildContext context) { return Material( color: Colors.green, child: SafeArea( child: SizedBox.expand( child: Card(color: Colors.redAccent), ), ), ); }
In summary, using the Opacity widget with an opacity value of 0.0 is a less expensive option for hiding a widget in Flutter. However, it is important to note that this method does not completely remove the widget from the layout, as it will still occupy space even though it is invisible.
If you need to completely remove the widget from the layout and free up the occupied space, you may need to consider using a different approach, such as removing the widget from the tree entirely or using a different layout widget.
Launch Faster with Low Cost: Master GTM with Pre-built Solutions in Our Webinar!
Register Today!
I collaborated with Mindbowser for several years on a complex SaaS platform project. They took over a partially completed project and successfully transformed it into a fully functional and robust platform. Throughout the entire process, the quality of their work...
President, E.B. Carlson
Mindbowser and team are professional, talented and very responsive. They got us through a challenging situation with our IOT product successfully. They will be our go to dev team going forward.
Founder, Cascada
Amazing team to work with. Very responsive and very skilled in both front and backend engineering. Looking forward to our next project together.
Co-Founder, Emerge
The team is great to work with. Very professional, on task, and efficient.
Founder, PeriopMD
I can not express enough how pleased we are with the whole team. From the first call and meeting, they took our vision and ran with it. Communication was easy and everyone was flexible to our schedule. I’m excited to...
Founder, Seeke
Mindbowser has truly been foundational in my journey from concept to design and onto that final launch phase.
CEO, KickSnap
We had very close go live timeline and MindBowser team got us live a month before.
CEO, BuyNow WorldWide
If you want a team of great developers, I recommend them for the next project.
Founder, Teach Reach
Mindbowser built both iOS and Android apps for Mindworks, that have stood the test of time. 5 years later they still function quite beautifully. Their team always met their objectives and I'm very happy with the end result. Thank you!
Founder, Mindworks
Our CISO was extremely impressed by Mindbowser’s work. It is pretty rare to see this kind of clean security report so early in the company’s journey. Huge Thank you for the disciplined approach here.
Founder, TrestleIQ
Mindbowser has delivered a much better quality product than our previous tech vendors. Our product is stable and passed Well Architected Framework Review from AWS.
CEO, PurpleAnt
The flexibility and capacity of the Mindbower staff has been impressive.
CEO, ProofPilot
I am happy to share that we got USD 10k in cloud credits courtesy of our friends at Mindbowser. Thank you Pravin and Ayush, this means a lot to us.
CTO, Shortlist
Mindbowser is one of the reasons that our app is successful. These guys have been a great team.
Founder & CEO, MangoMirror
Kudos for all your hard work and diligence on the Telehealth platform project. You made it possible.
CEO, ThriveHealth
Mindbowser helped us build an awesome iOS app to bring balance to people’s lives.
CEO, SMILINGMIND
They were a very responsive team! Extremely easy to communicate and work with!
Founder & CEO, TotTech
We’ve had very little-to-no hiccups at all—it’s been a really pleasurable experience.
Co-Founder, TEAM8s
Mindbowser was very helpful with explaining the development process and started quickly on the project.
Executive Director of Product Development, Innovation Lab
The greatest benefit we got from Mindbowser is the expertise. Their team has developed apps in all different industries with all types of social proofs.
Co-Founder, Vesica
Mindbowser is professional, efficient and thorough.
Consultant, XPRIZE
Very committed, they create beautiful apps and are very benevolent. They have brilliant Ideas.
Founder, S.T.A.R.S of Wellness
MindBowser was great; they listened to us a lot and helped us hone in on the actual idea of the app. They had put together fantastic wireframes for us.
Co-Founder, Flat Earth
Ayush was responsive and paired me with the best team member possible, to complete my complex vision and project. Could not be happier.
Founder, Child Life On Call
As a founder of a budding start-up, it has been a great experience working with Mindbower Inc under Ayush's leadership for our online digital platform design and development activity.
Founder, Courtyardly
The team from Mindbowser stayed on task, asked the right questions, and completed the required tasks in a timely fashion! Strong work team!
CEO, SDOH2Health LLC
Mindbowser was easy to work with and hit the ground running, immediately feeling like part of our team.
CEO, Stealth Startup
Mindbowser was an excellent partner in developing my fitness app. They were patient, attentive, & understood my business needs. The end product exceeded my expectations. Thrilled to share it globally.
Owner, Phalanx
Mindbowser's expertise in tech, process & mobile development made them our choice for our app. The team was dedicated to the process & delivered high-quality features on time. They also gave valuable industry advice. Highly recommend them for app development...
Co-Founder, Fox&Fork
