Layouts
- Container
- Row
  - MainAxisAlignment
  - CrossAxisAlignment
- Column
  - MainAxisAlignment
  - CrossAxisAlignment
- Center
- Align
- Padding
- SizedBox
- Expanded
- Flexible
- ConstrainedBox
- Stack
- Wrap
- Positioned
- ListView
  - Simple
  - Divider
  - Card
- Text
- Icon
Material
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, :--:, :--:, :--:, :--:, , , , , ```dart
Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
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, :--:, :--:, :--:, :--:, :--:, :--:, <a href="https://imgur.com/AT1WBOy"><img src="https://imgur.com/AT1WBOy.png" title="source: imgur.com"></a>, <a href="https://imgur.com/Df3PZ0E"><img src="https://imgur.com/Df3PZ0E.png" title="source: imgur.com"></a>, <a href="https://imgur.com/05M0SFS"><img src="https://imgur.com/05M0SFS.png" title="source: imgur.com"></a>, <a href="https://imgur.com/5FxzrUt"><img src="https://imgur.com/5FxzrUt.png" title="source: imgur.com"></a>, <a href="https://imgur.com/wB5u6vW"><img src="https://imgur.com/wB5u6vW.png" title="source: imgur.com"></a>, <a href="https://imgur.com/XB6aNuj"><img src="https://imgur.com/XB6aNuj.png" title="source: imgur.com"></a>, ### CrossAxisAlignment, .center, .start, .end, .stretch, :--:, :--:, :--:, :--:, <a href="https://imgur.com/AT1WBOy"><img src="https://imgur.com/AT1WBOy.png" title="source: imgur.com"></a>, <a href="https://imgur.com/HQt271d"><img src="https://i.imgur.com/HQt271d.png" title="source: imgur.com" /></a>, <a href="https://imgur.com/MQP5TwQ"><img src="https://i.imgur.com/MQP5TwQ.png" title="source: imgur.com" /></a>, <a href="https://imgur.com/9Fg9018"><img src="https://i.imgur.com/9Fg9018.png" title="source: imgur.com" /></a>, ```dart
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, :--:, :--:, :--:, , , , ```dart

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

<a href="https://imgur.com/vsLgkNA"><img src="https://i.imgur.com/vsLgkNA.png" title="source: imgur.com" /></a>

```dart
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, ----------------, -------------------------------, , , ```dart

Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
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, ----------------, -------------------------------, <a href="https://imgur.com/5ZPdv5O"><img src="https://i.imgur.com/5ZPdv5O.png" title="source: imgur.com" /></a>, <a href="https://imgur.com/jhduYDT"><img src="https://i.imgur.com/jhduYDT.png" title="source: imgur.com" /></a>, ```dart
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.

ConstrainedBox, Expand, Expand with Height, Tight, Loose, ----------------, ----------------------------, ---------------, ----------------, , , , , `BoxConstraints.expand()`, `BoxConstraints.expand(height: 100)`, `BoxConstraints.tight(Size(125, 100))`, `BoxConstraints.loose(Size(125, 100))`, ```dart

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, --------------------------------, ---------------------------, ------------------------------, <a href="https://imgur.com/5WpzDWb"><img src="https://i.imgur.com/5WpzDWb.png" title="source: imgur.com" /></a>, <a href="https://imgur.com/Bb1bs22"><img src="https://i.imgur.com/Bb1bs22.png" title="source: imgur.com" /></a>, <a href="https://imgur.com/Dkuc0mn"><img src="https://i.imgur.com/Dkuc0mn.png" title="source: imgur.com" /></a>, AlignmentDirectional.bottomStart, AlignmentDirectional.bottomCenter, AlignmentDirectional.bottomEnd, --------------------------------, ---------------------------, ------------------------------, <a href="https://imgur.com/odCg42L"><img src="https://i.imgur.com/odCg42L.png" title="source: imgur.com" /></a>, <a href="https://imgur.com/bykS3Qf"><img src="https://i.imgur.com/bykS3Qf.png" title="source: imgur.com" /></a>, <a href="https://imgur.com/UgRiSq0"><img src="https://i.imgur.com/UgRiSq0.png" title="source: imgur.com" /></a>, AlignmentDirectional.topStart, AlignmentDirectional.topCenter, AlignmentDirectional.topEnd, -----------------------------, ------------------------------, ---------------------------, <a href="https://imgur.com/8nucWaD"><img src="https://i.imgur.com/8nucWaD.png" title="source: imgur.com" /></a>, <a href="https://imgur.com/EpvPFRr"><img src="https://i.imgur.com/EpvPFRr.png" title="source: imgur.com" /></a>, <a href="https://imgur.com/Kl8NjrN"><img src="https://i.imgur.com/Kl8NjrN.png" title="source: imgur.com" /></a>, ```dart
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

Wrap

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

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: 110,
          child: CircleAvatar(radius: 16, backgroundColor: Colors.red)),
    ],
  ),
)

ListView

Simple

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

Divider

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

Card

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

Text

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

Icon

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

Material

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`, ```dart

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

### DropdownButton, DropdownButton, DropdownMenuItem, ------------------------, --------------------------, <a href="https://imgur.com/6iLBoZo"><img src="https://i.imgur.com/6iLBoZo.png" title="source: imgur.com" /></a>, <a href="https://imgur.com/20akmMN"><img src="https://i.imgur.com/20akmMN.jpg" title="source: imgur.com" /></a>, ```dart
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});
}

Radio Button

Vertical

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

Horizontal

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

   @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("takeoffandroid@gmail.com"),
              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);
                }),
          ],
        ),
      ),
    );
  }

Input Field

TextField

(Text box or Edit Text)

Under Line Style, Simple, Icon, ----------------, ----------------, , , Prefix, Suffix, ----------------, ----------------, , , ```dart

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

TextFormField

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

References:

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

Name With Owner	ckdevrel/flutter-examples
Primary Language
Program language	(Language Count: 0)
Platform
License:	The Unlicense

Created At	2018-08-19 19:41:38
Pushed At	2020-06-23 16:15:14
Last Commit At	2020-06-23 21:45:12
Release Count	0

Stargazers Count	0.9k
Watchers Count	34
Fork Count	148
Commits Count	392
Has Issues Enabled
Issues Count	1
Issue Open Count	0
Pull Requests Count	3
Pull Requests Open Count	1
Pull Requests Close Count	3

Has Wiki Enabled
Is Archived
Is Fork
Is Locked
Is Mirror
Is Private

flutter-examples

Github stars Tracking Chart

Layouts

Container

Row

MainAxisAlignment

Center

Align, .topLeft, .topCenter, .topRight, :--:, :--:, :--:, , , , .centerLeft, .center, .centerRight, :--:, :--:, :--:, , , , .bottomLeft, .bottomCenter, .bottomRight, :--:, :--:, :--:, , , , ```dart

SizedBox

Expanded, Row, Column, ----------------, -------------------------------, , , ```dart

Wrap

Positioned

ListView

Simple

Divider

Card

Text

Icon

Material

Button

Flat Button

Raised Button

Icon Button

Floating Action Button

(FAB), Normal, Mini, ----------------, ------------------------------, , , --------, `mini: true`, ```dart

Radio Button

Vertical

Horizontal

Navigation Drawer

Input Field

TextField

Under Line Style, Simple, Icon, ----------------, ----------------, , , Prefix, Suffix, ----------------, ----------------, , , ```dart

TextFormField

Utilities

Main metrics

flutter-examples

Github stars Tracking Chart

Layouts

Container

Row

MainAxisAlignment

Center

Align, .topLeft, .topCenter, .topRight, :--:, :--:, :--:, , , , .centerLeft, .center, .centerRight, :--:, :--:, :--:, , , , .bottomLeft, .bottomCenter, .bottomRight, :--:, :--:, :--:, , , , ```dart

SizedBox

Expanded, Row, Column, ----------------, -------------------------------, , , ```dart

ConstrainedBox, Expand, Expand with Height, Tight, Loose, ----------------, ----------------------------, ---------------, ----------------, , , , , BoxConstraints.expand(), BoxConstraints.expand(height: 100), BoxConstraints.tight(Size(125, 100)), BoxConstraints.loose(Size(125, 100)), ```dart

Wrap

Positioned

ListView

Simple

Divider

Card

Text

Icon

Material

Button

Flat Button

Raised Button

Icon Button

Floating Action Button

(FAB), Normal, Mini, ----------------, ------------------------------, , , --------, mini: true, ```dart

Radio Button

Vertical

Horizontal

Navigation Drawer

Input Field

TextField

Under Line Style, Simple, Icon, ----------------, ----------------, , , Prefix, Suffix, ----------------, ----------------, , , ```dart

TextFormField

Utilities

Main metrics

(FAB), Normal, Mini, ----------------, ------------------------------, , , --------, `mini: true`, ```dart