Buy Flutter100 Ebook on

Flutter Layout Guide

Flutter Layout Guide

Learn how layouts and widgets work in Flutter with this awesome practical guide.

Container

Container(
  color: Colors.cyanAccent,
  width: 80.0,
  height: 80.0,
 )

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      home: LayoutGuide(),
    );
  }
}

class LayoutGuide extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          color: Colors.cyanAccent,
          width: 80.0,
          height: 80.0,
        ),
      ),
    );
  }
}

Row

MainAxisAlignment

Note: The below example is with CrossAxisAlignment.center
.center.start.end
.spaceEvenly.spaceAround.spaceBetween

CrossAxisAlignment

.center.start.end.stretch
		Row(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.max,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Container(
              color: Colors.cyanAccent,
              width: 80.0,
              height: 80.0,
            ),
            Container(
              color: Colors.blueAccent,
              width: 80.0,
              height: 80.0,
            ),
            Container(
              color: Colors.orangeAccent,
              width: 80.0,
              height: 80.0,
            ),
          ],
        )
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      home: LayoutGuide(),
    );
  }
}

class LayoutGuide extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.max,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Container(
              color: Colors.cyanAccent,
              width: 80.0,
              height: 80.0,
            ),
            Container(
              color: Colors.blueAccent,
              width: 80.0,
              height: 80.0,
            ),
            Container(
              color: Colors.orangeAccent,
              width: 80.0,
              height: 80.0,
            ),
          ],
        ),
      ),
    );
  }
}

Column

MainAxisAlignment

Note: The below example is with CrossAxisAlignment.center
.center.start.end.spaceEvenly.spaceAround.spaceBetween

CrossAxisAlignment

.center.start.end.stretch
	Column(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.max,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Container(
              color: Colors.cyanAccent,
              width: 80.0,
              height: 80.0,
            ),
            Container(
              color: Colors.blueAccent,
              width: 80.0,
              height: 80.0,
            ),
            Container(
              color: Colors.orangeAccent,
              width: 80.0,
              height: 80.0,
            ),
          ],
        )

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      home: LayoutGuide(),
    );
  }
}

class LayoutGuide extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.max,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Container(
              color: Colors.cyanAccent,
              width: 80.0,
              height: 80.0,
            ),
            Container(
              color: Colors.blueAccent,
              width: 80.0,
              height: 80.0,
            ),
            Container(
              color: Colors.orangeAccent,
              width: 80.0,
              height: 80.0,
            ),
          ],
        ),
      ),
    );
  }
}

Center

	Center(
        child: Container(
          color: Colors.cyanAccent,
          width: 80.0,
          height: 80.0,
        ),
      )
Note: Center wraps any widget to center to its parent widget. (i.e orange is the parent widget)

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      home: LayoutGuide(),
    );
  }
}

class LayoutGuide extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          color: Colors.cyanAccent,
          width: 80.0,
          height: 80.0,
        ),
      ),
    );
  }
}

Align

.topLeft.topCenter.topRight
.centerLeft.center.centerRight
.bottomLeft.bottomCenter.bottomRight
	Align(
        alignment: Alignment.topLeft,
        child: Container(
          color: Colors.cyanAccent,
          width: 80.0,
          height: 80.0,
        ),
      )
Note: Align wraps any widget based on the Alignment direction to its parent widget. The default alignment for Align is center.
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      home: LayoutGuide(),
    );
  }
}

class LayoutGuide extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Align(
        alignment: Alignment.topLeft,
        child: Container(
          color: Colors.cyanAccent,
          width: 80.0,
          height: 80.0,
        ),
      ),
    );
  }
}

Padding

	Padding(
        padding: EdgeInsets.fromLTRB(24, 32, 24, 32),
        child: Container(
          color: Colors.cyanAccent,
          width: 80.0,
          height: 80.0,
        ),
      )
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      home: LayoutGuide(),
    );
  }
}

class LayoutGuide extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: EdgeInsets.fromLTRB(24, 32, 24, 32),
        child: Container(
          color: Colors.cyanAccent,
          width: 80.0,
          height: 80.0,
        ),
      ),
    );
  }
}

SizedBox

	SizedBox(
        width: 200.0,
        height: 100.0,
        child: Card(
          color: Colors.indigoAccent,
          child: Center(
            child: Text(
              'SizedBox',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      )

Note: SizedBox constraints its child widget to match based on specific size of width and height.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      home: LayoutGuide(),
    );
  }
}

class LayoutGuide extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SizedBox(
        width: 200.0,
        height: 100.0,
        child: Card(
          color: Colors.indigoAccent,
          child: Center(
            child: Text(
              'SizedBox',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }
}

Expanded

RowColumn
	Row(
        mainAxisAlignment: MainAxisAlignment.center,
        mainAxisSize: MainAxisSize.max,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Expanded(
            child: Container(color: Colors.cyan, height: 80),
            flex: 2,
          ),
          Expanded(
            child: Container(color: Colors.indigoAccent, height: 80),
            flex: 3,
          ),
          Expanded(
            child: Container(color: Colors.orange, height: 80),
            flex: 4,
          ),
        ],
      )

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      home: LayoutGuide(),
    );
  }
}

class LayoutGuide extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        mainAxisSize: MainAxisSize.max,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Expanded(
            child: Container(color: Colors.cyan, height: 80),
            flex: 2,
          ),
          Expanded(
            child: Container(color: Colors.indigoAccent, height: 80),
            flex: 3,
          ),
          Expanded(
            child: Container(color: Colors.orange, height: 80),
            flex: 4,
          ),
        ],
      ),
    );
  }
}

Flexible

RowColumn
	Row(
        mainAxisAlignment: MainAxisAlignment.center,
        mainAxisSize: MainAxisSize.max,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Flexible(
            child: Container(color: Colors.cyanAccent, height: 80, 					width: 80),
            flex: 2,
          ),
          Flexible(
            child: Container(color: Colors.indigoAccent, height: 80, 				width: 80),
            flex: 3,
          ),
          Flexible(
            child: Container(color: Colors.orange, height: 80, width: 				80),
            flex: 4,
          ),
        ],
      )
Hint: * To make Flexible behave similar to Expanded, then add fit: FlexFit.tight
* By default fit type for Flexible is fit: FlexFit.loose.
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      home: LayoutGuide(),
    );
  }
}

class LayoutGuide extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        mainAxisSize: MainAxisSize.max,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Flexible(
            child: Container(color: Colors.cyanAccent, height: 80, width: 80),
            flex: 2,
          ),
          Flexible(
            child: Container(color: Colors.indigoAccent, height: 80, width: 80),
            flex: 3,
          ),
          Flexible(
            child: Container(color: Colors.orange, height: 80, width: 80),
            flex: 4,
          ),
        ],
      ),
    );
  }
}

ConstrainedBox

ExpandExpand with HeightTightLoose
BoxConstraints.expand()BoxConstraints.expand(height: 100)BoxConstraints.tight(Size(125, 100))BoxConstraints.loose(Size(125, 100))
	ConstrainedBox(
        constraints: BoxConstraints.expand(height: 100),
        child: Container(
          color: Colors.orange,
          child: Padding(
            padding: EdgeInsets.all(16),
            child: Text(
              'Box Constraint',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      )
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      home: LayoutGuide(),
    );
  }
}

class LayoutGuide extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ConstrainedBox(
        constraints: BoxConstraints.expand(height: 100),
        child: Container(
          color: Colors.orange,
          child: Padding(
            padding: EdgeInsets.all(16),
            child: Text(
              'Box Constraint',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }
}

Stack

AlignmentDirectional.centerStartAlignmentDirectional.centerAlignmentDirectional.centerEnd
AlignmentDirectional.bottomStartAlignmentDirectional.bottomCenterAlignmentDirectional.bottomEnd
AlignmentDirectional.topStartAlignmentDirectional.topCenterAlignmentDirectional.topEnd
	Stack(
        alignment: AlignmentDirectional.center,
        children: [
          Container(
            height: 200.0,
            width: 200.0,
            color: Colors.red,
          ),
          Container(
            height: 150.0,
            width: 150.0,
            color: Colors.blue,
          ),
          Container(
            height: 100.0,
            width: 100.0,
            color: Colors.green,
          ),
          Container(
            height: 50.0,
            width: 50.0,
            color: Colors.yellow,
          ),
        ],
      )

Credits: Fore more detailed blog post for this. Please visit :

Flutter For Android Developers : How to design FrameLayout in Flutter.
This blog is meant for Android developers looking to apply their existing Android knowledge to build mobile apps with Flutter. In this blog, we are going to explore what is equivalent design widget…

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      home: LayoutGuide(),
    );
  }
}

class LayoutGuide extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        alignment: AlignmentDirectional.center,
        children: [
          Container(
            height: 200.0,
            width: 200.0,
            color: Colors.red,
          ),
          Container(
            height: 150.0,
            width: 150.0,
            color: Colors.blue,
          ),
          Container(
            height: 100.0,
            width: 100.0,
            color: Colors.green,
          ),
          Container(
            height: 50.0,
            width: 50.0,
            color: Colors.yellow,
          ),
        ],
      ),
    );
  }
}

Wrap

	Wrap(
        spacing: 4.0,
        children: <Widget>[
          Chip(
            avatar: CircleAvatar(
                backgroundColor: Colors.orange,
                child: Text('C', style: TextStyle(color: 								Colors.white))),
            label: Text('Cupcake'),
            backgroundColor: Colors.white,
          ),
          Chip(
            avatar: CircleAvatar(
                backgroundColor: Colors.cyanAccent,
                child: Text('D', style: TextStyle(color: 								Colors.black45))),
            label: Text('Donut'),
            backgroundColor: Colors.white,
          )
        ],
      )
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      home: LayoutGuide(),
    );
  }
}

class LayoutGuide extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Wrap(
        spacing: 4.0,
        children: <Widget>[
          Chip(
            avatar: CircleAvatar(
                backgroundColor: Colors.orange,
                child: Text('C', style: TextStyle(color: Colors.white))),
            label: Text('Cupcake'),
            backgroundColor: Colors.white,
          ),
          Chip(
            avatar: CircleAvatar(
                backgroundColor: Colors.cyanAccent,
                child: Text('D', style: TextStyle(color: Colors.black45))),
            label: Text('Donut'),
            backgroundColor: Colors.white,
          ),
          Chip(
            avatar: CircleAvatar(
                backgroundColor: Colors.indigoAccent,
                child: Text('E', style: TextStyle(color: Colors.white))),
            label: Text('Eclair'),
            backgroundColor: Colors.white,
          ),
          Chip(
            avatar: CircleAvatar(
                backgroundColor: Colors.yellowAccent,
                child: Text('F', style: TextStyle(color: Colors.black45))),
            label: Text('Froyo'),
            backgroundColor: Colors.white,
          ),
          Chip(
            avatar: CircleAvatar(
                backgroundColor: Colors.green,
                child: Text('G', style: TextStyle(color: Colors.white))),
            label: Text('Gingerbread'),
            backgroundColor: Colors.white,
          ),
          Chip(
            avatar: CircleAvatar(
                backgroundColor: Colors.redAccent,
                child: Text('H', style: TextStyle(color: Colors.white))),
            label: Text('Honeycomb'),
            backgroundColor: Colors.white,
          ),
          Chip(
            avatar: CircleAvatar(
                backgroundColor: Colors.greenAccent,
                child: Text('I', style: TextStyle(color: Colors.black45))),
            label: Text('Ice cream Sandwich'),
            backgroundColor: Colors.white,
          ),
          Chip(
            avatar: CircleAvatar(
                backgroundColor: Colors.deepOrangeAccent,
                child: Text('J', style: TextStyle(color: Colors.white))),
            label: Text('Jelly Bean'),
            backgroundColor: Colors.white,
          ),
          Chip(
            avatar: CircleAvatar(
                backgroundColor: Colors.indigo,
                child: Text('K', style: TextStyle(color: Colors.white))),
            label: Text('Kit Kat'),
            backgroundColor: Colors.white,
          ),
          Chip(
            avatar: CircleAvatar(
                backgroundColor: Colors.tealAccent,
                child: Text('L', style: TextStyle(color: Colors.black45))),
            label: Text('Lollipop'),
            backgroundColor: Colors.white,
          ),
          Chip(
            avatar: CircleAvatar(
                backgroundColor: Colors.amberAccent,
                child: Text('M', style: TextStyle(color: Colors.white))),
            label: Text('Marshmallow'),
            backgroundColor: Colors.white,
          ),
          Chip(
            avatar: CircleAvatar(
                backgroundColor: Colors.cyan,
                child: Text('N', style: TextStyle(color: Colors.white))),
            label: Text('Nougat'),
            backgroundColor: Colors.white,
          ),
          Chip(
            avatar: CircleAvatar(
                backgroundColor: Colors.red,
                child: Text('O', style: TextStyle(color: Colors.white))),
            label: Text('Oreo'),
            backgroundColor: Colors.white,
          ),
          Chip(
            avatar: CircleAvatar(
                backgroundColor: Colors.greenAccent,
                child: Text('P', style: TextStyle(color: Colors.black45))),
            label: Text('Pie'),
            backgroundColor: Colors.white,
          ),
        ],
      ),
    );
  }
}

Positioned

	ConstrainedBox(
        constraints: BoxConstraints.tight(Size(double.infinity, 256)),
        child: Stack(
          alignment: AlignmentDirectional.center,
          children: <Widget>[
            Positioned(
              top: 0.0,
              child: Icon(
                Icons.calendar_today,
                size: 128.0,
                color: Colors.lightBlueAccent,
              ),
            ),
            Positioned(
              top: 4,
              right: 80,
              child: CircleAvatar(
                radius: 16,
                backgroundColor: Colors.red,
              ),
            ),
          ],
        ),
      ),
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      home: LayoutGuide(),
    );
  }
}

class LayoutGuide extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ConstrainedBox(
        constraints: BoxConstraints.tight(Size(double.infinity, 256)),
        child: Stack(
          alignment: AlignmentDirectional.center,
          children: <Widget>[
            Positioned(
              top: 0.0,
              child: Icon(
                Icons.calendar_today,
                size: 128.0,
                color: Colors.lightBlueAccent,
              ),
            ),
            Positioned(
              top: 4,
              right: 30,
              child: CircleAvatar(
                radius: 16,
                backgroundColor: Colors.red,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

ListView

Simple

final List<String> names = [
      'Alpha',
      'Beta',
      'Cupcake',
      'Donut',
      'Eclair',
      'Froyo',
      'Ginger bread',
      'Honey comb',
      'Ice cream sandwich',
      'Jelly bean',
      'Kitkat',
      'Lollipop',
      'Marshmallow',
      'Nougat',
      'Oreo',
      'Pie'
    ];
    return Scaffold(
      appBar: AppBar(title: Text('ListView')),
      body: Center(
        child: ListView.builder(
          itemCount: names.length,
          itemBuilder: (BuildContext context, int position) {
            var name = names[position];
            return ListTile(
              title: Text(name),
            );
          },
        ),
      ),
    );
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      home: LayoutGuide(),
    );
  }
}

class LayoutGuide extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final List<String> names = [
      'Alpha',
      'Beta',
      'Cupcake',
      'Donut',
      'Eclair',
      'Froyo',
      'Ginger bread',
      'Honey comb',
      'Ice cream sandwich',
      'Jelly bean',
      'Kitkat',
      'Lollipop',
      'Marshmallow',
      'Nougat',
      'Oreo',
      'Pie'
    ];
    return Scaffold(
      appBar: AppBar(title: Text('ListView')),
      body: Center(
        child: ListView.builder(
          itemCount: names.length,
          itemBuilder: (BuildContext context, int position) {
            var name = names[position];
            return ListTile(
              title: Text(name),
            );
          },
        ),
      ),
    );
  }
}

Divider

		ListView.separated(
          itemBuilder: (BuildContext context, int position) {
            final name = names[position];
            return ListTile(
              title: Text(name),
            );
          },
          separatorBuilder: (BuildContext context, int index) => 					Divider(),
          itemCount: names.length,
        ),
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      home: LayoutGuide(),
    );
  }
}

class LayoutGuide extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final List<String> names = [
      'Alpha',
      'Beta',
      'Cupcake',
      'Donut',
      'Eclair',
      'Froyo',
      'Ginger bread',
      'Honey comb',
      'Ice cream sandwich',
      'Jelly bean',
      'Kitkat',
      'Lollipop',
      'Marshmallow',
      'Nougat',
      'Oreo',
      'Pie'
    ];
    return Scaffold(
      appBar: AppBar(title: Text('ListView')),
      body: Center(
        child: ListView.separated(
          itemBuilder: (BuildContext context, int position) {
            final name = names[position];
            return ListTile(
              title: Text(name),
            );
          },
          separatorBuilder: (BuildContext context, int index) => Divider(),
          itemCount: names.length,
        ),
      ),
    );
  }
}

Card

		Card(
            margin: EdgeInsets.fromLTRB(8, 4, 8, 4),
            child: ListTile(
              title: Text(name),
            )
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      home: LayoutGuide(),
    );
  }
}

class LayoutGuide extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final List<String> names = [
      'Alpha',
      'Beta',
      'Cupcake',
      'Donut',
      'Eclair',
      'Froyo',
      'Ginger bread',
      'Honey comb',
      'Ice cream sandwich',
      'Jelly bean',
      'Kitkat',
      'Lollipop',
      'Marshmallow',
      'Nougat',
      'Oreo',
      'Pie'
    ];
    return Scaffold(
      appBar: AppBar(title: Text('ListView')),
      body: ListView.builder(
        itemCount: names.length,
        itemBuilder: (BuildContext context, int position) {
          final name = names[position];
          return Card(
            margin: EdgeInsets.fromLTRB(8, 4, 8, 4),
            child: ListTile(
              title: Text(name),
            ),
          );
        },
      ),
    );
  }
}

Text

	Text(
        "Flutter is Awesome",
        style: TextStyle(
          fontSize: 18.0,
          color: Colors.greenAccent,
          fontWeight: FontWeight.w500,
          fontFamily: "Roboto",
        ),
      )
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      home: LayoutGuide(),
    );
  }
}

class LayoutGuide extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('TextView')),
      body: Text(
        "Flutter is Awesome",
        style: TextStyle(
          fontSize: 18.0,
          color: Colors.greenAccent,
          fontWeight: FontWeight.w500,
          fontFamily: "Roboto",
        ),
      ),
    );
  }
}

Icon

	Icon(
        Icons.flight_takeoff,
        color: Colors.blueAccent,
        size: 96.0,
      )
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Layout Guide',
      debugShowCheckedModeBanner: false,
      home: LayoutGuide(),
    );
  }
}

class LayoutGuide extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Icon')),
      body: Icon(
        Icons.flight_takeoff,
        color: Colors.blueAccent,
        size: 96.0,
      ),
    );
  }
}

Material

Button

Material Button

	MaterialButton(
        onPressed: () {
          debugPrint('I am a material button');
        },
        shape: const StadiumBorder(),
        textColor: Colors.black,
        color: Colors.blue[300],
        splashColor: Colors.blue[900],
        disabledColor: Colors.grey,
        disabledTextColor: Colors.white,
        child: Text('Material Button'),
      )
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Layout Guide',
      debugShowCheckedModeBanner: false,
      home: LayoutGuide(),
    );
  }
}

class LayoutGuide extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: MaterialButton(
        onPressed: () {
          debugPrint('I am a material button');
        },
        shape: const StadiumBorder(),
        textColor: Colors.black,
        color: Colors.blue[300],
        splashColor: Colors.blue[900],
        disabledColor: Colors.grey,
        disabledTextColor: Colors.white,
        child: Text('Material Button'),
      ),
    );
  }
}

Text Button

	TextButton(
        onPressed: () {
          debugPrint('I am Awesome');
        },
        child: Text('Text Button'),
      )
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Layout Guide',
      debugShowCheckedModeBanner: false,
      home: LayoutGuide(),
    );
  }
}

class LayoutGuide extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: TextButton(
        onPressed: () {
          debugPrint('I am Awesome');
        },
        child: Text('Text Button'),
      ),
    );
  }
}

Elevated Button

	ElevatedButton(
        onPressed: () {
          debugPrint('I am Awesome');
        },
        child: Text('Elevated Button'),
      ),
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Layout Guide',
      debugShowCheckedModeBanner: false,
      home: LayoutGuide(),
    );
  }
}

class LayoutGuide extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ElevatedButton(
        onPressed: () {
          debugPrint('I am Awesome');
        },
        child: Text('Elevated Button'),
      ),
    );
  }
}

Icon Button

	IconButton(
        onPressed: () {
          debugPrint("Starred Me!");
        },
        color: Colors.orangeAccent,
        icon: Icon(Icons.star),
        disabledColor: Colors.grey,
        highlightColor: Colors.black38,
      )
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Layout Guide',
      debugShowCheckedModeBanner: false,
      home: LayoutGuide(),
    );
  }
}

class LayoutGuide extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IconButton(
        onPressed: () {
          debugPrint("Starred Me!");
        },
        color: Colors.orangeAccent,
        icon: Icon(Icons.star),
        disabledColor: Colors.grey,
        highlightColor: Colors.black38,
      ),
    );
  }
}

Floating Action Button

(FAB)

NormalMini
--------mini: true
	floatingActionButton: FloatingActionButton(
        mini: true,
        child: Icon(Icons.add),
        onPressed: () {},
      )
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Layout Guide',
      debugShowCheckedModeBanner: false,
      home: LayoutGuide(),
    );
  }
}

class LayoutGuide extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {},
      ),
    );
  }
}

DropdownButtonDropdownMenuItem
class CustomDropDownWidget extends StatefulWidget {
  @override
  ChangeBGColorDropdownState createState() {
    return new ChangeBGColorDropdownState();
  }
}

class ChangeBGColorDropdownState extends State<CustomDropDownWidget> {
  final List<DropDownItemModel> _dropDownItemModelList = [
    DropDownItemModel(versionName: "Cupcake"),
    DropDownItemModel(versionName: "Donut"),
    DropDownItemModel(versionName: "Eclair"),
    DropDownItemModel(versionName: "Froyo"),
  ];
  DropDownItemModel _dropDownItemModel;
  @override
  void initState() {
    super.initState();
    _dropDownItemModel = _dropDownItemModelList[0];
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            padding: EdgeInsets.fromLTRB(16, 0, 16, 0),
            color: Colors.orangeAccent,
            child: DropdownButton<DropDownItemModel>(
              underline: Container(
                decoration: const BoxDecoration(
                    border:
                        Border(bottom: BorderSide(color: Colors.transparent))),
              ),
              iconEnabledColor: Colors.white,
              items: _dropDownItemModelList
                  .map((dropDownItemModel) =>
                      DropdownMenuItem<DropDownItemModel>(
                        child: Text(dropDownItemModel.versionName),
                        value: dropDownItemModel,
                      ))
                  .toList(),
              onChanged: (DropDownItemModel dropDownItemModel) {
                setState(() => _dropDownItemModel = dropDownItemModel);
              },
              hint: Text(
                _dropDownItemModel.versionName,
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class DropDownItemModel {
  String versionName;
  DropDownItemModel({this.versionName});
}

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Layout Guide',
      debugShowCheckedModeBanner: false,
      home: CustomDropDownWidget(),
    );
  }
}

class CustomDropDownWidget extends StatefulWidget {
  @override
  ChangeBGColorDropdownState createState() {
    return new ChangeBGColorDropdownState();
  }
}

class ChangeBGColorDropdownState extends State<CustomDropDownWidget> {
  final List<DropDownItemModel> _dropDownItemModelList = [
    DropDownItemModel(versionName: "Cupcake"),
    DropDownItemModel(versionName: "Donut"),
    DropDownItemModel(versionName: "Eclair"),
    DropDownItemModel(versionName: "Froyo"),
  ];
  DropDownItemModel _dropDownItemModel;
  @override
  void initState() {
    super.initState();
    _dropDownItemModel = _dropDownItemModelList[0];
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            padding: EdgeInsets.fromLTRB(16, 0, 16, 0),
            color: Colors.orangeAccent,
            child: DropdownButton<DropDownItemModel>(
              underline: Container(
                decoration: const BoxDecoration(
                    border:
                        Border(bottom: BorderSide(color: Colors.transparent))),
              ),
              iconEnabledColor: Colors.white,
              items: _dropDownItemModelList
                  .map((dropDownItemModel) =>
                      DropdownMenuItem<DropDownItemModel>(
                        child: Text(dropDownItemModel.versionName),
                        value: dropDownItemModel,
                      ))
                  .toList(),
              onChanged: (DropDownItemModel dropDownItemModel) {
                setState(() => _dropDownItemModel = dropDownItemModel);
              },
              hint: Text(
                _dropDownItemModel.versionName,
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class DropDownItemModel {
  String versionName;
  DropDownItemModel({this.versionName});
}

Radio Button

Vertical

enum Gender { MALE, FEMALE, OTHER }

class RadioButton extends StatefulWidget {
  @override
  _RadioButtonState createState() => _RadioButtonState();
}

class _RadioButtonState extends State<RadioButton> {
  Gender _genderValue = Gender.MALE;
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            RadioListTile(
              title: const Text('Male'),
              value: Gender.MALE,
              groupValue: _genderValue,
              onChanged: (Gender value) {
                setState(() {
                  _genderValue = value;
                });
              },
            ),
            RadioListTile(
              title: const Text('Female'),
              value: Gender.FEMALE,
              groupValue: _genderValue,
              onChanged: (Gender value) {
                setState(() {
                  _genderValue = value;
                });
              },
            ),
            RadioListTile(
              title: const Text('Other'),
              value: Gender.OTHER,
              groupValue: _genderValue,
              onChanged: (Gender value) {
                setState(() {
                  _genderValue = value;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Layout Guide',
      debugShowCheckedModeBanner: false,
      home: RadioButton(),
    );
  }
}

enum Gender { MALE, FEMALE, OTHER }

class RadioButton extends StatefulWidget {
  @override
  _RadioButtonState createState() => _RadioButtonState();
}

class _RadioButtonState extends State<RadioButton> {
  Gender _genderValue = Gender.MALE;
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            RadioListTile(
              title: const Text('Male'),
              value: Gender.MALE,
              groupValue: _genderValue,
              onChanged: (Gender value) {
                setState(() {
                  _genderValue = value;
                });
              },
            ),
            RadioListTile(
              title: const Text('Female'),
              value: Gender.FEMALE,
              groupValue: _genderValue,
              onChanged: (Gender value) {
                setState(() {
                  _genderValue = value;
                });
              },
            ),
            RadioListTile(
              title: const Text('Other'),
              value: Gender.OTHER,
              groupValue: _genderValue,
              onChanged: (Gender value) {
                setState(() {
                  _genderValue = value;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

Horizontal

enum Gender { MALE, FEMALE, OTHER }

class RadioButtonHorizontal extends StatefulWidget {
  @override
  _RadioButtonHorizontalState createState() => _RadioButtonHorizontalState();
}

class _RadioButtonHorizontalState extends State<RadioButtonHorizontal> {
  Gender _genderValue = Gender.MALE;
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              TextButton.icon(
                label: const Text('Male'),
                icon: Radio(
                  value: Gender.MALE,
                  groupValue: _genderValue,
                  onChanged: (Gender value) {
                    setState(() {
                      _genderValue = value;
                    });
                  },
                ),
                onPressed: () {
                  setState(() {
                    _genderValue = Gender.MALE;
                  });
                },
              ),
              TextButton.icon(
                label: const Text('Female'),
                icon: Radio(
                  value: Gender.FEMALE,
                  groupValue: _genderValue,
                  onChanged: (Gender value) {
                    setState(() {
                      _genderValue = value;
                    });
                  },
                ),
                onPressed: () {
                  setState(() {
                    _genderValue = Gender.FEMALE;
                  });
                },
              ),
              TextButton.icon(
                label: const Text('Others'),
                icon: Radio(
                  value: Gender.OTHER,
                  groupValue: _genderValue,
                  onChanged: (Gender value) {
                    setState(() {
                      _genderValue = value;
                    });
                  },
                ),
                onPressed: () {
                  setState(() {
                    _genderValue = Gender.OTHER;
                  });
                },
              )
            ],
          ),
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Layout Guide',
      debugShowCheckedModeBanner: false,
      home: RadioButtonHorizontal(),
    );
  }
}

enum Gender { MALE, FEMALE, OTHER }

class RadioButtonHorizontal extends StatefulWidget {
  @override
  _RadioButtonHorizontalState createState() => _RadioButtonHorizontalState();
}

class _RadioButtonHorizontalState extends State<RadioButtonHorizontal> {
  Gender _genderValue = Gender.MALE;
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              TextButton.icon(
                label: const Text('Male'),
                icon: Radio(
                  value: Gender.MALE,
                  groupValue: _genderValue,
                  onChanged: (Gender value) {
                    setState(() {
                      _genderValue = value;
                    });
                  },
                ),
                onPressed: () {
                  setState(() {
                    _genderValue = Gender.MALE;
                  });
                },
              ),
              TextButton.icon(
                label: const Text('Female'),
                icon: Radio(
                  value: Gender.FEMALE,
                  groupValue: _genderValue,
                  onChanged: (Gender value) {
                    setState(() {
                      _genderValue = value;
                    });
                  },
                ),
                onPressed: () {
                  setState(() {
                    _genderValue = Gender.FEMALE;
                  });
                },
              ),
              TextButton.icon(
                label: const Text('Others'),
                icon: Radio(
                  value: Gender.OTHER,
                  groupValue: _genderValue,
                  onChanged: (Gender value) {
                    setState(() {
                      _genderValue = value;
                    });
                  },
                ),
                onPressed: () {
                  setState(() {
                    _genderValue = Gender.OTHER;
                  });
                },
              )
            ],
          ),
        ),
      ),
    );
  }
}

Scaffold(
      appBar:
          AppBar(backgroundColor: Colors.deepPurple, title: 							Text("Drawer")),
      drawer:  Drawer(
        child:  ListView(
          children: <Widget>[
             UserAccountsDrawerHeader(
              accountName:  Text("TakeoffAndroid"),
              accountEmail:  Text("takeoffandroid@gmail.com"),
              currentAccountPicture: CircleAvatar(
                  backgroundColor: Colors.yellow,
                  child: Text('T', style: TextStyle(color: 									Colors.black87))),
              decoration:  BoxDecoration(
                gradient: LinearGradient(
                  begin: Alignment.centerLeft,
                  end: Alignment.centerRight,
                  colors: [Colors.deepPurple[200], 											Colors.deepPurple[800]],
                ),
              ),
            ),
            ListTile(
                leading: Icon(Icons.home),
                title:  Text("Home"),
                onTap: () {
                  Navigator.pop(context);
                }),
            ListTile(
                leading: Icon(Icons.person),
                title:  Text("Friends"),
                onTap: () {
                  Navigator.pop(context);
                }),
            ListTile(
                leading: Icon(Icons.share),
                title: Text("Share"),
                onTap: () {
                  Navigator.pop(context);
                }),
            Divider(),
            ListTile(
                leading: Icon(Icons.settings),
                title: Text("Settings"),
                onTap: () {
                  Navigator.pop(context);
                }),
            ListTile(
                leading: Icon(Icons.power_settings_new),
                title: Text("Logout"),
                onTap: () {
                  Navigator.pop(context);
                }),
          ],
        ),
      ),
    )

Input Field

TextField

(Text box or Edit Text)

Under Line Style

SimpleIcon
PrefixSuffix
	TextField(
        decoration: InputDecoration(
          hintText: "Enter your name!",
          hintStyle: TextStyle(
            fontWeight: FontWeight.w300,
            color: Colors.blue,
          ),
          enabledBorder: UnderlineInputBorder(
            borderSide: BorderSide(color: Colors.blue),
          ),
          focusedBorder: UnderlineInputBorder(
            borderSide: BorderSide(
              color: Colors.orange,
            ),
          ),
        ),
      )
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Layout Guide',
      debugShowCheckedModeBanner: false,
      home: LayoutGuide(),
    );
  }
}

class LayoutGuide extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: TextField(
        decoration: InputDecoration(
          hintText: "Enter your name!",
          hintStyle: TextStyle(
            fontWeight: FontWeight.w300,
            color: Colors.blue,
          ),
          enabledBorder: UnderlineInputBorder(
            borderSide: BorderSide(color: Colors.blue),
          ),
          focusedBorder: UnderlineInputBorder(
            borderSide: BorderSide(
              color: Colors.orange,
            ),
          ),
        ),
      ),
    );
  }
}

IconPrefixSuffix
InputDecoration(icon: Icon(Icons.account_circle, color: Colors.blue))InputDecoration(prefixIcon: Icon(Icons.account_circle, color: Colors.blue))InputDecoration(suffixIcon: Icon(Icons.account_circle, color: Colors.blue))

Outer Line Style

	Padding(
        padding: const EdgeInsets.all(16.0),
        child: TextField(
          decoration: InputDecoration(
            hintText: "Enter your name!",
            hintStyle:
                TextStyle(fontWeight: FontWeight.w300, color: 								Colors.blue),
            enabledBorder:
                OutlineInputBorder(borderSide: BorderSide(color: 								Colors.blue)),
            focusedBorder: OutlineInputBorder(
              borderSide: BorderSide(color: Colors.orange),
            ),
          ),
        ),
      )
Note: Icon, Prefix Icon and Suffix Icon are similar to Underline TextField
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Layout Guide',
      debugShowCheckedModeBanner: false,
      home: LayoutGuide(),
    );
  }
}

class LayoutGuide extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: TextField(
          decoration: InputDecoration(
            hintText: "Enter your name!",
            hintStyle:
                TextStyle(fontWeight: FontWeight.w300, color: Colors.blue),
            enabledBorder:
                OutlineInputBorder(borderSide: BorderSide(color: Colors.blue)),
            focusedBorder: OutlineInputBorder(
              borderSide: BorderSide(color: Colors.orange),
            ),
          ),
        ),
      ),
    );
  }
}

TextFormField

	TextFormField(
          style: TextStyle(color: Colors.white),
          obscureText: true,
          decoration: InputDecoration(
            enabledBorder: UnderlineInputBorder(
                borderSide: BorderSide(color: Colors.white)),
            focusedBorder: UnderlineInputBorder(
                borderSide: BorderSide(color: Colors.yellow)),
            hintText: 'Password',
            hintStyle: TextStyle(color: Colors.white),
            labelText: 'Type your password',
            labelStyle: TextStyle(color: Colors.yellow),
          ),
        ),
      )
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Layout Guide',
      debugShowCheckedModeBanner: false,
      home: LayoutGuide(),
    );
  }
}

class LayoutGuide extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.deepPurple,
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: TextFormField(
          style: TextStyle(color: Colors.white),
          obscureText: true,
          decoration: InputDecoration(
            enabledBorder: UnderlineInputBorder(
                borderSide: BorderSide(color: Colors.white)),
            focusedBorder: UnderlineInputBorder(
                borderSide: BorderSide(color: Colors.yellow)),
            hintText: 'Password',
            hintStyle: TextStyle(color: Colors.white),
            labelText: 'Type your password',
            labelStyle: TextStyle(color: Colors.yellow),
          ),
        ),
      ),
    );
  }
}

Sliver List

slivers2
  • SliverList takes a delegate parameter which provides the items in the list as they scroll into view.
  • You can specify the actual list of children with a SliverChildListDelegate Or build them lazily with a SliverChildBuilderDelegate.
	CustomScrollView(
        slivers: <Widget>[
          SliverList(
            delegate: SliverChildListDelegate(
              [
                Container(color: Colors.red, height: 150.0),
                Container(color: Colors.purple, height: 150.0),
                Container(color: Colors.green, height: 150.0),
              ],
            ),
          ),
          // This builds an infinite scrollable list of differently 				colored
          // Containers.
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                // To convert this infinite list to a list with three 						items,
                // uncomment the following line:
                // if (index > 3) return null;
                return Container(
                  color: Colors.primaries[index],
                  height: 150.0,
                );
              },
              // Or, uncomment the following line:
              // childCount: 3,
            ),
          )
        ],
      )
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Layout Guide',
      debugShowCheckedModeBanner: false,
      home: LayoutGuide(),
    );
  }
}

class LayoutGuide extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverList(
            delegate: SliverChildListDelegate(
              [
                Container(color: Colors.red, height: 150.0),
                Container(color: Colors.purple, height: 150.0),
                Container(color: Colors.green, height: 150.0),
              ],
            ),
          ),
          // This builds an infinite scrollable list of differently colored
          // Containers.
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                // To convert this infinite list to a list with three items,
                // uncomment the following line:
                // if (index > 3) return null;
                return Container(
                  color: Colors.primaries[index],
                  height: 150.0,
                );
              },
              // Or, uncomment the following line:
              // childCount: 3,
            ),
          )
        ],
      ),
    );
  }
}

References:
  1. https://medium.com/@anilcan/forms-in-flutter-6e1364eafdb5
  2. https://codingwithjoe.com/building-forms-with-flutter/

Credit - Chandrasekar @takeoffandroid

Table of Contents
Great! Next, complete checkout for full access to Codepur.
Welcome back! You've successfully signed in.
You've successfully subscribed to Codepur.
Success! Your account is fully activated, you now have access to all content.
Success! Your billing info has been updated.
Your billing was not updated.