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
.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
Row Column
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
Row Column
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
Expand Expand with Height Tight Loose 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.centerStart AlignmentDirectional.center AlignmentDirectional.centerEnd
AlignmentDirectional.bottomStart AlignmentDirectional.bottomCenter AlignmentDirectional.bottomEnd
AlignmentDirectional.topStart AlignmentDirectional.topCenter AlignmentDirectional.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 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'),
),
);
}
}
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'),
),
);
}
}
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,
),
);
}
}
(FAB)
Normal Mini -------- 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: () {},
),
);
}
}
DropdownButton DropdownMenuItem
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});
}
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;
});
},
)
],
),
),
),
);
}
}
Navigation Drawer 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);
}),
],
),
),
)
TextField (Text box or Edit Text)
Under Line Style
Simple Icon
Prefix Suffix
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,
),
),
),
),
);
}
}
Icon Prefix Suffix 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 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: https://medium.com/@anilcan/forms-in-flutter-6e1364eafdb5 https://codingwithjoe.com/building-forms-with-flutter/ Credit - Chandrasekar @takeoffandroid
Burhanuddin Rashid
