![Buy Me a Coffee at ko-fi.com](https://camo.githubusercontent.com/28ae3f3405ebe857fe366ad7aa16346b6e750b21659f9b342150a6062fbe0f1b/68747470733a2f2f617a3734333730322e766f2e6d7365636e642e6e65742f63646e2f6b6f6669342e706e673f763d66)
![Android Arsenal](https://camo.githubusercontent.com/e37badf125494ad38619decf91b5f873cf21fcf52a6d7aabe574bed8516df3cd/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f416e64726f6964253230417273656e616c2d466c75747465724578616d706c65732d627269676874677265656e2e7376673f7374796c653d706c6173746963)
![](https://camo.githubusercontent.com/c94b7305fbf9c15ce41a402ab61419442e724f9306df0d2eee5f544824adc4d0/68747470733a2f2f696d672e736869656c64732e696f2f747769747465722f666f6c6c6f772f657370616472696e652e7376673f6c6162656c3d466f6c6c6f77267374796c653d736f6369616c)
![](https://camo.githubusercontent.com/a00d957c85627f2862ae61b59289e25f875e9ae40a716efdf5c3e032d6b8f863/68747470733a2f2f696d672e736869656c64732e696f2f747769747465722f75726c2f687474702f736869656c64732e696f2e7376673f7374796c653d736f6369616c)
![source: imgur.com](https://camo.githubusercontent.com/4aa2d69feee572aa9a10c83319c71d4b0e268beb36f7b29889a15d37b344e67a/68747470733a2f2f692e696d6775722e636f6d2f564e327375324b2e706e67)
![source: imgur.com](https://camo.githubusercontent.com/6c935259a28b72ce2326c07e8a470a3894cd466a1f63290bec21c897aa22b4a2/68747470733a2f2f696d6775722e636f6d2f704741317972422e706e67)
Container(
padding: const EdgeInsets.all(0.0),
color: Colors.cyanAccent,
width: 80.0,
height: 80.0,
),
Note: The below example is with CrossAxisAlignment.center
.spaceEvenly |
.spaceAround |
.spaceBetween |
![source: imgur.com](https://camo.githubusercontent.com/660b990de46552e5d7be6580cf4e2a231c4b1fdb611e05b9cb7051a8d9caabc8/68747470733a2f2f696d6775722e636f6d2f695831473046362e706e67) |
![source: imgur.com](https://camo.githubusercontent.com/aa1a211504e924e5c4a3c928ffb7e2dec6c17fb21378388a4edc0038a9d87bf2/68747470733a2f2f696d6775722e636f6d2f464a4a647a46382e706e67) |
![source: imgur.com](https://camo.githubusercontent.com/1635698373791746d7040128ae7eb191d51402ff19435efceff94c0ca845d73d/68747470733a2f2f696d6775722e636f6d2f4c7a50637169312e706e67) |
.center |
.start |
.end |
.stretch |
![source: imgur.com](https://camo.githubusercontent.com/b9a43bc87efd12fdb71a4c12748d2b4fb0ca35ef4ccb09524f3b2edc6e04354c/68747470733a2f2f696d6775722e636f6d2f585233646d4a632e706e67) |
![source: imgur.com](https://camo.githubusercontent.com/fdb5688a8243e7593c912b7a118154b2f5fba8558453a47dce5e1c2713e621a6/68747470733a2f2f696d6775722e636f6d2f425036553948492e706e67) |
![source: imgur.com](https://camo.githubusercontent.com/145ed4523d01af5f9e7f979a56bec1647fb713156764cebb63121714627ac281/68747470733a2f2f696d6775722e636f6d2f4352325a44536f2e706e67) |
![source: imgur.com](https://camo.githubusercontent.com/36d92a2ec058ae3b306f34b2ac636e74affb2a1d98f18af616b4fc1b54f438f8/68747470733a2f2f696d6775722e636f6d2f685331507534472e706e67) |
Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
padding: const EdgeInsets.all(0.0),
color: Colors.cyanAccent,
width: 80.0,
height: 80.0,
),
Container(
padding: const EdgeInsets.all(0.0),
color: Colors.blueAccent,
width: 80.0,
height: 80.0,
),
Container(
padding: const EdgeInsets.all(0.0),
color: Colors.orangeAccent,
width: 80.0,
height: 80.0,
),
],
),
Note: The below example is with CrossAxisAlignment.center
.center |
.start |
.end |
.spaceEvenly |
.spaceAround |
.spaceBetween |
![source: imgur.com](https://camo.githubusercontent.com/77bdb32139ed4699c0b9f706f25dab22fb14664b5983428300d261328b07eeae/68747470733a2f2f696d6775722e636f6d2f41543157424f792e706e67) |
![source: imgur.com](https://camo.githubusercontent.com/7241fca89b05acf856311968f586a6a2d3da876b86e4d55d68f959120e4e3259/68747470733a2f2f696d6775722e636f6d2f446633505a30452e706e67) |
![source: imgur.com](https://camo.githubusercontent.com/f029e0f008893a51b6ffd491b993c789ae654b56f1204dcd8c29ad405cd73ba4/68747470733a2f2f696d6775722e636f6d2f30354d305346532e706e67) |
![source: imgur.com](https://camo.githubusercontent.com/a7eca33755e7cd00792247115e3ff7a1c224ce9cd346f6ea7959dfed0b78b86b/68747470733a2f2f696d6775722e636f6d2f3546787a7255742e706e67) |
![source: imgur.com](https://camo.githubusercontent.com/1e308a85ab8d4c346654b92d1f2b7ee9717344a99dcbf0834839184a5875ee19/68747470733a2f2f696d6775722e636f6d2f774235753676572e706e67) |
![source: imgur.com](https://camo.githubusercontent.com/d56144955069fd918d969ae363c0b7d3e9af66a43bf2bb7ce0d7f9709e27ffb0/68747470733a2f2f696d6775722e636f6d2f584236614e756a2e706e67) |
.center |
.start |
.end |
.stretch |
![source: imgur.com](https://camo.githubusercontent.com/77bdb32139ed4699c0b9f706f25dab22fb14664b5983428300d261328b07eeae/68747470733a2f2f696d6775722e636f6d2f41543157424f792e706e67) |
![source: imgur.com](https://camo.githubusercontent.com/b7d75c08ff2874788a3e3bfeec0f0a3c884723e7059537b7364dbd6d86a342af/68747470733a2f2f692e696d6775722e636f6d2f485174323731642e706e67) |
![source: imgur.com](https://camo.githubusercontent.com/5701f36815d2e0a85e13d548c13dc1535c0f63c4634e2cbb1f5c23d74d4929b7/68747470733a2f2f692e696d6775722e636f6d2f4d5150355477512e706e67) |
![source: imgur.com](https://camo.githubusercontent.com/bf927bccaab37c3483ad369bb191f634f45c0dad23783feefc826e8bcd74f9da/68747470733a2f2f692e696d6775722e636f6d2f394667393031382e706e67) |
Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
padding: const EdgeInsets.all(0.0),
color: Colors.cyanAccent,
width: 80.0,
height: 80.0,
),
Container(
padding: const EdgeInsets.all(0.0),
color: Colors.blueAccent,
width: 80.0,
height: 80.0,
),
Container(
padding: const EdgeInsets.all(0.0),
color: Colors.orangeAccent,
width: 80.0,
height: 80.0,
),
],
),
![source: imgur.com](https://camo.githubusercontent.com/2eaec63f808ad2474b417f8266d55d05c0b42ad86565df69f9f2b628ae246244/68747470733a2f2f692e696d6775722e636f6d2f387658574263472e706e67)
Center(child: Container(
padding: const EdgeInsets.all(0.0),
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)
.topLeft |
.topCenter |
.topRight |
![source: imgur.com](https://camo.githubusercontent.com/b271ba999ade9457de521890207196be972894451203056e051bc28087f86578/68747470733a2f2f692e696d6775722e636f6d2f74556a786674352e706e67) |
![source: imgur.com](https://camo.githubusercontent.com/e0cd774920421356c64adf6ef09154353faad251fb30b5168cddc63026650cd9/68747470733a2f2f692e696d6775722e636f6d2f4342354e4c6d682e706e67) |
![source: imgur.com](https://camo.githubusercontent.com/63d1304a4505813a026220164d4e7d64ae985780a49c2f5b36fd4624cdcbb292/68747470733a2f2f692e696d6775722e636f6d2f4f6261424142692e706e67) |
.centerLeft |
.center |
.centerRight |
![source: imgur.com](https://camo.githubusercontent.com/25c794720c2a80063e23db81f42f08281a870f3505b40eb6d04b3510b62bfdd7/68747470733a2f2f692e696d6775722e636f6d2f51743064526a542e706e67) |
![source: imgur.com](https://camo.githubusercontent.com/2eaec63f808ad2474b417f8266d55d05c0b42ad86565df69f9f2b628ae246244/68747470733a2f2f692e696d6775722e636f6d2f387658574263472e706e67) |
![source: imgur.com](https://camo.githubusercontent.com/770b3a6fdb33842d029079d60bded3b14940514a845959dfde3443df5c2d17c6/68747470733a2f2f692e696d6775722e636f6d2f496a446c5a526c2e706e67) |
.bottomLeft |
.bottomCenter |
.bottomRight |
![source: imgur.com](https://camo.githubusercontent.com/6e85ff0edb8fdd064308be65bb1c9e9cfd83afdf62700405272fac116502c21a/68747470733a2f2f692e696d6775722e636f6d2f5551684c3752342e706e67) |
![source: imgur.com](https://camo.githubusercontent.com/ebc186e92813a811c1fa0a6c7c9de5c3c07f85a96b31df448882fe532fb9d828/68747470733a2f2f692e696d6775722e636f6d2f4a3237664369482e706e67) |
![source: imgur.com](https://camo.githubusercontent.com/0f0965000a352d466bc867e15554b0d4e4344897b52763157ee55afe25004e5d/68747470733a2f2f692e696d6775722e636f6d2f337271673136702e706e67) |
Align(
alignment: Alignment.center,
child: Container(
padding: const EdgeInsets.all(0.0),
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.
![source: imgur.com](https://camo.githubusercontent.com/fc28b7ba787b7dab239ba791262b41a456599bbb55ba638705da94187c70ab50/68747470733a2f2f692e696d6775722e636f6d2f76734c676b4e412e706e67)
Padding(
padding: EdgeInsets.fromLTRB(24, 32, 24, 32) ,
child: Container(
padding: const EdgeInsets.all(0.0),
color: Colors.cyanAccent,
width: 80.0,
height: 80.0,
))
![source: imgur.com](https://camo.githubusercontent.com/e0de828e736d17e91f467b6b8c0d6d173d3f2be5affdf6d4dd68bb8348a348f3/68747470733a2f2f692e696d6775722e636f6d2f3164556b65755a2e706e67)
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.
Row |
Column |
![source: imgur.com](https://camo.githubusercontent.com/f089fb06cfd3dabe5cd4d49780204bbbe497cbf13b36a7f4d815de85c975c4f4/68747470733a2f2f692e696d6775722e636f6d2f6c5144666f746a2e706e67) |
![source: imgur.com](https://camo.githubusercontent.com/685dbfd225a43d57e7ecccce9ac1ee8aae4b9da54e9a49972f807a2a7c98226f/68747470733a2f2f692e696d6775722e636f6d2f7a3846554767752e706e67) |
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,
),
],
),
Row |
Column |
![source: imgur.com](https://camo.githubusercontent.com/b6d01b041925afd55d7f0bf1e2d51b08162a00df49278206546eb767ddd5ff45/68747470733a2f2f692e696d6775722e636f6d2f355a506476354f2e706e67) |
![source: imgur.com](https://camo.githubusercontent.com/6c8b35a5c265935f26307dd3b5e4ccc5e76a642036c08fb3f8a0fd9660f5dc46/68747470733a2f2f692e696d6775722e636f6d2f6a6864755944542e706e67) |
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
.
Expand |
Expand with Height |
Tight |
Loose |
![source: imgur.com](https://camo.githubusercontent.com/5db93a67863d0f203666dbe5259e4364e4457fb1b08c97ae5df930f640a765b2/68747470733a2f2f692e696d6775722e636f6d2f4e5646524c4a6a2e706e67) |
![source: imgur.com](https://camo.githubusercontent.com/d91152ca5fd1cee85af57ffb744cb6b020f4d72e0595f3d45bf8708e917aacfa/68747470733a2f2f692e696d6775722e636f6d2f455a61763247522e706e67) |
![source: imgur.com](https://camo.githubusercontent.com/92e72e886ce058fa55e3b80c00ecae047bacf82aa8b7f33ca1185cec0f4ae9ca/68747470733a2f2f692e696d6775722e636f6d2f6b5249584471422e706e67) |
![source: imgur.com](https://camo.githubusercontent.com/38a6e03337750dc1db4c5654ce2a8319ffb10653af995fee274937b600e5fca8/68747470733a2f2f692e696d6775722e636f6d2f434432766b696f2e706e67) |
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),)),
))
AlignmentDirectional.centerStart |
AlignmentDirectional.center |
AlignmentDirectional.centerEnd |
![source: imgur.com](https://camo.githubusercontent.com/1e00a1517113dbb073b6eb673788c972cf197dec3a7bf56c88912a1dd2923916/68747470733a2f2f692e696d6775722e636f6d2f3557707a4457622e706e67) |
![source: imgur.com](https://camo.githubusercontent.com/52ecabf29c5b0df9d8a999bec496005d3fbc0d1028fe3c93d5a478280a854522/68747470733a2f2f692e696d6775722e636f6d2f426231627332322e706e67) |
![source: imgur.com](https://camo.githubusercontent.com/0f4b0331d640c01494eb9001df42e5b43a802d86b797e00b5a1e3a68d7aba3d5/68747470733a2f2f692e696d6775722e636f6d2f446b7563306d6e2e706e67) |
AlignmentDirectional.bottomStart |
AlignmentDirectional.bottomCenter |
AlignmentDirectional.bottomEnd |
![source: imgur.com](https://camo.githubusercontent.com/3786a622b7718dfb3097c0fb12de9639d80be83fac6f6f42e35b5e3de9bfb8bf/68747470733a2f2f692e696d6775722e636f6d2f6f64436734324c2e706e67) |
![source: imgur.com](https://camo.githubusercontent.com/049768edb4dd8578512c751ce401ad9922547432b0d5b22e2886f40b4a053789/68747470733a2f2f692e696d6775722e636f6d2f62796b533351662e706e67) |
![source: imgur.com](https://camo.githubusercontent.com/9765afbccf55e8705d73158de89b6fd9dc4b885b822a025fda2b268d9a0a5cc8/68747470733a2f2f692e696d6775722e636f6d2f556752695371302e706e67) |
AlignmentDirectional.topStart |
AlignmentDirectional.topCenter |
AlignmentDirectional.topEnd |
![source: imgur.com](https://camo.githubusercontent.com/21b934f8c05ee96ca1051ce1f5bc8cdef687a83f6cad627d49d5cc2af4db2d43/68747470733a2f2f692e696d6775722e636f6d2f386e75635761442e706e67) |
![source: imgur.com](https://camo.githubusercontent.com/8abf328b336ea7ea4b56c0fbd1daa98e034c988cf4fce23bb47b9b7b6cabf53c/68747470733a2f2f692e696d6775722e636f6d2f457076504652722e706e67) |
![source: imgur.com](https://camo.githubusercontent.com/54f9ce70c869f54e7535e78ea29c3f6239b932b88eb7e80ab101f7a2cbcab586/68747470733a2f2f692e696d6775722e636f6d2f4b6c384e6a724e2e706e67) |
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 https://medium.com/flutter-community/flutter-for-android-developers-how-to-design-framelayout-in-flutter-93a19fc7e7a6
![source: imgur.com](https://camo.githubusercontent.com/4bcc4618e2d2ebd4c5fadf35a51c75c0711b9a0857731f3e28e0482bad0c7baf/68747470733a2f2f692e696d6775722e636f6d2f446e4741794b322e706e67)
Wrap(
spacing: 4.0, // gap between lines
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,
),
],
)
![source: imgur.com](https://camo.githubusercontent.com/e5467357fb72661e4fecfa8a5338773e28afe2e89095c9059110774c40847165/68747470733a2f2f692e696d6775722e636f6d2f76697a515565472e6a7067)
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: 110,
child: CircleAvatar(radius: 16, backgroundColor: Colors.red)),
],
),
)
![source: imgur.com](https://camo.githubusercontent.com/0691989e50376ddc2b985a111f9b45b3769fb4dd0de2f6aee4bf9f3ebb6cae4d/68747470733a2f2f692e696d6775722e636f6d2f39306956377a472e6a7067)
@override
Widget build(BuildContext context) {
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 MaterialApp(
debugShowCheckedModeBanner: false,
home: 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));
}),
)),
);
}
![source: imgur.com](https://camo.githubusercontent.com/ccbc20119582d5ed531975baaaf0b2162b502424ceb1038a665f3d31589ce6d8/68747470733a2f2f692e696d6775722e636f6d2f71696b4a6743762e6a7067)
ListView.separated(
itemBuilder: (BuildContext context, int position) {
var name = names[position];
return ListTile(title: Text(name));
},
separatorBuilder: (BuildContext context, int index) =>
Divider(),
itemCount: names.length),
![source: imgur.com](https://camo.githubusercontent.com/adf317026a892865b69f38cda13db0650187ec0b3d5705cf7680ccc2971f0227/68747470733a2f2f692e696d6775722e636f6d2f484f30443243782e6a7067)
ListView.builder(
itemCount: names.length,
itemBuilder: (BuildContext context, int position) {
var name = names[position];
return Card(margin: EdgeInsets.fromLTRB(8, 4, 8, 4),child: ListTile(title: Text(name)));
})
![source: imgur.com](https://camo.githubusercontent.com/61e6081416281985a4073d8d1f78066bd2dbe98aa45612d08c660748ccde8e50/68747470733a2f2f696d6775722e636f6d2f795a50674250792e706e67)
Text(
"Flutter is Awesome",
style: TextStyle(
fontSize: 18.0,
color: Colors.greenAccent,
fontWeight: FontWeight.w500,
fontFamily: "Roboto"),
),
![source: imgur.com](https://camo.githubusercontent.com/b4274a8977e18ddf65ffc7f10b81904bd49e3e2fb49f6d50ef0fe326abde564e/68747470733a2f2f696d6775722e636f6d2f514750756f52352e706e67)
new Icon(Icons.flight_takeoff, color: Colors.blueAccent, size: 96.0),
![source: imgur.com](https://camo.githubusercontent.com/f1e8515e700863a54bd0fced6c4ed3df25b3836437d9c699b5d47834be5dab15/68747470733a2f2f692e696d6775722e636f6d2f64425038587a772e706e67)
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'),
),
![source: imgur.com](https://camo.githubusercontent.com/e4f9b57adaa63d7f1f2b6ef3ef327bfd88ef4d915206ea3a30d2a1b8d910284d/68747470733a2f2f692e696d6775722e636f6d2f783330584755662e706e67)
FlatButton(
onPressed: () {
debugPrint('I am Awesome');
},
textColor: Colors.white,
color: Colors.blueAccent,
disabledColor: Colors.grey,
disabledTextColor: Colors.white,
highlightColor: Colors.orangeAccent,
child: Text('Flat Button'),
),
![source: imgur.com](https://camo.githubusercontent.com/1c88df8c6e5827162e3938829eecd6dcdd1d70b8f7dbb2f9b26a41a85283056e/68747470733a2f2f696d6775722e636f6d2f4174634e74434b2e706e67)
RaisedButton(
onPressed: () {
debugPrint('I am Awesome');
},
textColor: Colors.white,
color: Colors.blueAccent,
disabledColor: Colors.grey,
disabledTextColor: Colors.white,
highlightColor: Colors.orangeAccent,
elevation: 4.0,
child: Text('Raised Button'),
),
![source: imgur.com](https://camo.githubusercontent.com/6ffc6da7dd9fa5776c91b575ff2290bc3a03f3f758989d242c1d854976040dac/68747470733a2f2f696d6775722e636f6d2f536a304a7a48632e706e67)
IconButton(
onPressed: () {
debugPrint("Starred Me!");
},
color: Colors.orangeAccent,
icon: Icon(Icons.star),
disabledColor: Colors.grey,
highlightColor: Colors.black38,
),
Normal |
Mini |
![source: imgur.com](https://camo.githubusercontent.com/fa209aa3cfa06f46ec05b944a83e7d04385f572be345ee02df20457fbdc26adb/68747470733a2f2f692e696d6775722e636f6d2f30635033484d632e706e67) |
![source: imgur.com](https://camo.githubusercontent.com/b96101a834393ecae1243c7148aef61b27dabc6a547b6de0fd4e54a330ae6aab/68747470733a2f2f692e696d6775722e636f6d2f523359584451712e706e67) |
-------- |
mini: true |
Scaffold(
floatingActionButton: new FloatingActionButton(
mini: true,
child: new Icon(Icons.add),
onPressed: () {},
),
);
DropdownButton |
DropdownMenuItem |
![source: imgur.com](https://camo.githubusercontent.com/d89f038dd75dfbc7f84f9844d7e19a26657dd6d3c3c3c158c296ebd4acda2d7e/68747470733a2f2f692e696d6775722e636f6d2f36694c426f5a6f2e706e67) |
![source: imgur.com](https://camo.githubusercontent.com/4d3c7464653ba4f12866cc29969378ef1c3e761b2be3e37283c8034a3ac9bf36/68747470733a2f2f692e696d6775722e636f6d2f3230616b6d4d4e2e6a7067) |
import 'package:flutter/material.dart';
class CustomDropDownWidget extends StatefulWidget {
@override
ChangeBGColorDropdownState createState() {
return new ChangeBGColorDropdownState();
}
}
class ChangeBGColorDropdownState extends State<CustomDropDownWidget> {
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});
}
![source: imgur.com](https://camo.githubusercontent.com/73fd06ed363cff02e989274647b0015be7380caff97e0d137010630d763e31f3/68747470733a2f2f692e696d6775722e636f6d2f7949795a7574682e706e67)
import 'package:flutter/material.dart';
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;
});
},
),
],
),
),
);
}
}
![source: imgur.com](https://camo.githubusercontent.com/f46074f38c80ef6fa7f364d4673606494db521e93cf00ebd7bf28fdca122f24d/68747470733a2f2f692e696d6775722e636f6d2f504157764872712e706e67)
import 'package:flutter/material.dart';
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>[
FlatButton.icon(
label: const Text('Male'),
icon: Radio(
value: Gender.MALE,
groupValue: _genderValue,
onChanged: (Gender value) {
setState(() {
_genderValue = value;
});
},
),
onPressed: () {
setState(() {
_genderValue = Gender.MALE;
});
},
),
FlatButton.icon(
label: const Text('Female'),
icon: Radio(
value: Gender.FEMALE,
groupValue: _genderValue,
onChanged: (Gender value) {
setState(() {
_genderValue = value;
});
},
),
onPressed: () {
setState(() {
_genderValue = Gender.FEMALE;
});
},
),
FlatButton.icon(
label: const Text('Others'),
icon: Radio(
value: Gender.OTHER,
groupValue: _genderValue,
onChanged: (Gender value) {
setState(() {
_genderValue = value;
});
},
),
onPressed: () {
setState(() {
_genderValue = Gender.OTHER;
});
},
)
],
),
),
),
);
}
}
![source: imgur.com](https://camo.githubusercontent.com/b79d28d37b8294019c79ca157fd5d6ad77aa62efa6fe6547e34b89f00266a728/68747470733a2f2f692e696d6775722e636f6d2f794736764978612e6a7067)
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: AppColors.gradient_purple_begin,
title: Text("XSpends")),
drawer: new Drawer(
child: new ListView(
children: <Widget>[
new UserAccountsDrawerHeader(
accountName: new Text("TakeoffAndroid"),
accountEmail: new Text("[email protected]"),
currentAccountPicture: CircleAvatar(
backgroundColor: Colors.yellow,
child: Text('T', style: TextStyle(color: Colors.black87))
),
decoration: new BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
AppColors.gradient_purple_begin,
AppColors.gradient_purple_end
]),
),
),
new ListTile(
leading: Icon(Icons.home),
title: new Text("Home"),
onTap: () {
Navigator.pop(context);
}),
new ListTile(
leading: Icon(Icons.person),
title: new Text("Friends"),
onTap: () {
Navigator.pop(context);
}),
new ListTile(
leading: Icon(Icons.share),
title: new Text("Share"),
onTap: () {
Navigator.pop(context);
}),
new Divider(),
new ListTile(
leading: Icon(Icons.settings),
title: new Text("Settings"),
onTap: () {
Navigator.pop(context);
}),
new ListTile(
leading: Icon(Icons.power_settings_new),
title: new Text("Logout"),
onTap: () {
Navigator.pop(context);
}),
],
),
),
);
}
(Text box or Edit Text)
Simple |
Icon |
![source: imgur.com](https://camo.githubusercontent.com/84a317aef890db00f8cd1ebbd1d60fabb748d83a37441afbfc5ab96101fc1804/68747470733a2f2f692e696d6775722e636f6d2f666d536e5a36442e706e67) |
![source: imgur.com](https://camo.githubusercontent.com/4c69ac0fce3f2c1a7ca27c5e7121ffba9401a46fd2eff7987427360362388423/68747470733a2f2f692e696d6775722e636f6d2f327969785470372e706e67) |
Prefix |
Suffix |
![source: imgur.com](https://camo.githubusercontent.com/d000fb485eec5eca1f3a39510bb425194590cdd4114965293b36df172873f4f9/68747470733a2f2f692e696d6775722e636f6d2f493344445378362e706e67) |
![source: imgur.com](https://camo.githubusercontent.com/d031f5b4f9e260f1aff932f189b94715e1cf761cc428793fc353752ac18e93d5/68747470733a2f2f692e696d6775722e636f6d2f6a7476654e49502e706e67) |
TextField(
decoration: InputDecoration(
hintText: "Enter your name!",
hintStyle: TextStyle(fontWeight: FontWeight.w300, color: Colors.blue),
enabledBorder: new UnderlineInputBorder(
borderSide: new 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)) |
![source: imgur.com](https://camo.githubusercontent.com/a5b8657b8f908b7b8eb3c5512a2bbcbe424ebf5d3bd960ed5c26260e2e968ced/68747470733a2f2f692e696d6775722e636f6d2f374a364d7548332e706e67)
TextField(
decoration: InputDecoration(
hintText: "Enter your name!",
hintStyle: TextStyle(fontWeight: FontWeight.w300, color: Colors.blue),
enabledBorder: new OutlineInputBorder(
borderSide: new BorderSide(color: Colors.blue)),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.orange),
),
),
)
Note: Icon, Prefix Icon and Suffix Icon are similar to Underline TextField
![source: imgur.com](https://camo.githubusercontent.com/4e93a996804c14aadd2c4d25eaf8f90c431ce6c4f5a2ac0459a4b313403e24e9/68747470733a2f2f692e696d6775722e636f6d2f4443416e736e732e706e67)
TextFormField(
style: TextStyle(color: Colors.white),
obscureText: true, // Use secure text for passwords.
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))
)
![slivers2](https://user-images.githubusercontent.com/46351318/85413440-74530900-b588-11ea-8616-059b15cf1a49.gif)
-
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.
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: getRandomColor(), 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/
Creates Color Utils
class AppColors {
static const Color colorPrimary = Color.fromARGB(255, 51, 51, 51);
static const Color colorPrimaryDark = Color.fromARGB(255, 41, 41, 41);
static const Color colorAccent = Color.fromARGB(255, 30, 198, 89);
static const Color yellow = Color.fromARGB(255, 252, 163, 38);
static const Color orange = Color.fromARGB(255, 252, 109, 38);
static const Color grey_unselected = Color.fromARGB(255, 96, 96, 96);
static const Color white_card = Color.fromARGB(255, 250, 250, 250);
static const Color chrome_grey = Color.fromARGB(255, 240, 240, 240);
static const Color white = Color.fromARGB(255, 255, 255, 255);
static const Color white_secondary = Color.fromARGB(255, 220, 220, 220);
static const Color white_un_selected = Color.fromARGB(255, 180, 180, 180);
static const Color indigo = Color.fromARGB(255, 51, 105, 231);
static const Color primary_text = Color.fromARGB(255, 51, 51, 51);
static const Color secondary_text = Color.fromARGB(255, 114, 114, 114);
static const Color grey = Color.fromARGB(255, 188, 187, 187);
}