The Flutter Layout Cheat Sheet: A Must-Have Resource for Developers

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.

Row And Columns

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 And Columns l flutter layout

Row /*or Column*/( 

  mainAxisAlignment: MainAxisAlignment.center,

  children: <Widget>[

    Icon(Icons.back, size: 40),

    Icon(Icons.back, size: 40),

    Icon(Icons.back, size: 40),

  ],

),

Row And Columns l flutter layout

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 And Columns l flutter layout

Row /*or Column*/( 

  mainAxisAlignment: MainAxisAlignment.spaceEvenly,

  children: <Widget>[

    Icon(Icons.back, size: 40),

    Icon(Icons.back, size: 40),

    Icon(Icons.back, size: 40),

  ],

),

Row And Columns l flutter layout

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),

  ],

),

CrossAxisAlignment l flutter layout

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),

  ],

),

IntrinsicWidth And IntrinsicHeight

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.

Stack

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

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,

    ),

  ],

),

ConstrainedBox

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,

  ),

),

Align

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.

Container

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"),

    ),

  );

}

Hire Flutter Developers at your Ease

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.

Decoration

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"),

    ),

  );

}

Container as Transform

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,

      ),

    ),

  );

}

BoxDecoration

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',

          ),

        ),

      ),

    ),

  ),

);

border: Border

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),

      ),

    ),

  ),

);

borderRadius: BorderRadius

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));

      ),

    ),

  ),

);

shape: BoxShape

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,

      ),

    ),

  ),

);

boxShadow: List<BoxShadow>

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.

LinearGradient

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,

          ],

        ),

      ),

    ),

  ),

);

RadialGradient

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],

        ),

      ),

    ),

  ),

);

SweepGradient

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],

        ),

      ),

    ),

  ),

);

backgroundBlendMode

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,

            ],

          ),

        ),

      ),

    ),

  ),

);

Material

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,

      ),

    ),

  ),

);

Slivers

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,

              ),

            ],

          ),

        ),

      ),

    ],

  ),

);

SizedBox

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**

SafeArea

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),

      ),

    ),

  );

}
coma

Conclusion

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.

Keep Reading

Keep Reading

Struggling with EHR integration? Learn about next-gen solutions in our upcoming webinar on Mar 6, at 11 AM EST.

Register Now

Let's create something together!