Flutter widgets and layouts in minutes

Flutter widgets and layouts in minutes - Part I

Ever tried of learning fast?. Do you think it’s possible?

Now, Introducing FlutterExamples, the ultimate cheatsheet of curated examples, designs, layouts and widgets.

Github — https://github.com/TakeoffAndroid/FlutterExamples

What’s special?

The idea behind creating this repo is to learn flutter UI faster as easy as possible in minutes. Then, how? I know it’s been striking everyone’s head. Let’s see some of the beloved examples to analyse this much.

Trust me! No explanation! No theoritical proofs!

Container

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

Align

Bottom Align (Left, center and right)Center Align (Left, center and right)Top Align (Left, center and right)

Align(  alignment: Alignment.center,   child: Container(  padding: const EdgeInsets.all(0.0),  color: Colors.cyanAccent,  width: 80.0,  height: 80.0,))

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

Expanded

RowColumn

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

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 (Default)FAB (Mini)

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

TextField

Under Line Style

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

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

More collection of widgets can be found here

Flutter widgets and layouts in minutes was originally published in Hacker Noon on Medium, where people are continuing the conversation by highlighting and responding to this story.