msoftware/flutterexamples

An ultimate cheatbook of curated designs

• Layouts

  • Container
  • Row
    • MainAxisAlignment
    • CrossAxisAlignment
  • Column
    • MainAxisAlignment
    • CrossAxisAlignment
  • Center
  • Align
  • Padding
  • SizedBox
  • Expanded
  • Flexible
  • ConstrainedBox

• Material

  • Text
  • Icon
  • Button
    • Flat Button
    • Raised Button
    • Icon Button
    • Floating Action Button
  • TextField
    • Under Line Style
    • Outer Line Style

• Utilities

Layouts

Container

Container(
  padding: const EdgeInsets.all(0.0),
  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(
    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,
  ),
  ],
),

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

Center

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)

Align

.topLeft	.topCenter	.topRight

.centerLeft	.center	.centerRight

.bottomLeft	.bottomCenter	.bottomRight

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.

Padding

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

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.

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

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:

1. To make Flexible behave similar to Expanded, then add fit: FlexFit.tight
2. By default fit type for Flexible is fit: FlexFit.loose.

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

Material

Text

new Text(
  "Flutter is Awesome",
  style: new TextStyle(
      fontSize: 18.0,
      color: Colors.greenAccent,
      fontWeight: FontWeight.w500,
      fontFamily: "Roboto"),
),

Icon

new Icon(Icons.flight_takeoff, color: Colors.blueAccent, size: 96.0),

Button

Flat Button

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

Raised Button

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

Icon Button

IconButton(
  onPressed: () {
    debugPrint("Starred Me!");
  },
  color: Colors.orangeAccent,
  icon: Icon(Icons.star),
  disabledColor: Colors.grey,
  highlightColor: Colors.black38,
),

Floating Action Button

(FAB)

Normal	Mini
--------	mini: true

return Scaffold(
  floatingActionButton: new FloatingActionButton(
    mini: true,
    child: new Icon(Icons.add),
    onPressed: () {},
  ),
);

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

Outer Line Style

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

Utilities

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