Info

ABC of Flutter widgets. Intended for super beginners at Flutter. Play with 35+ examples given and get familiar with various basic widgets in Flutter.

Basic Widgets Examples

This is aimed for complete beginners in Flutter, to get them acquainted with the various basic widgets in Flutter.

Run this project

Fork this project.
Rename the directory to “flutter_widgets” or something with all_lowercase_and_underscore. (Unfortunately Flutter doesnt like CamelCases)
In your terminal, run flutter create . This will create the android and iOS projects for you.
Run in your emulator or simulator.

OR you can always copy the examples from here and try it out in your apps.

Examples

Text

Play with Text properties and styles
Text( “Hello Flutter It is Awesome WOW”, textAlign: TextAlign.right, textDirection: TextDirection.ltr, overflow: TextOverflow.ellipsis, maxLines: 2, style: TextStyle( color: Colors.black, fontSize: 50.0, fontWeight: FontWeight.w200, letterSpacing: 2.0, wordSpacing: 40.0, decoration: TextDecoration.overline, decorationStyle: TextDecorationStyle.wavy), ),

AppBar

AppBar with Title
AppBar( backgroundColor: Colors.red, title: new Text(“Title”,), elevation: 4.0, ),
AppBar with List of Actions
AppBar( title: new Text(“Title”), actions: [ new IconButton( icon: new Icon(Icons.search), onPressed: () {}, ), new IconButton( icon: new Icon(Icons.add), onPressed: () {}, ), ], ),
AppBar with Text and Icon Themes
AppBar( backgroundColor: Colors.blueAccent, title: new Text(“Title”), actions: [ new IconButton( icon: new Icon(Icons.search), onPressed: () {}, ), ], iconTheme: IconThemeData( color: Colors.white, ), textTheme: TextTheme( title: TextStyle( color: Colors.white, fontSize: 20.0 ), ), ),
AppBar with centered Title and Subtitle
AppBar( automaticallyImplyLeading: false, title: Center( child: Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.center, children: [ new Text( “Title”, style: TextStyle(fontSize: 18.0), ), new Text( “subtitle”, style: TextStyle(fontSize: 14.0), ), ], ), ), ),
AppBar with Logo
AppBar( automaticallyImplyLeading: false, backgroundColor: Colors.yellow, title: Row( mainAxisAlignment: MainAxisAlignment.start, mainAxisSize: MainAxisSize.max, children: [ new FlutterLogo(), Padding( padding: const EdgeInsets.only(left: 16.0), child: new Text( “Title with image”, ), ), ], ), ),
Transparent AppBar
AppBar( backgroundColor: Colors.transparent, title: Text(“Transparent AppBar”), actions: [ IconButton( icon: Icon( Icons.search, ), onPressed: () {}, ) ], ),

Container

Container with full-device sized Flutter Logo
Container( height: MediaQuery.of(context).size.height, width: MediaQuery.of(context).size.width, margin: EdgeInsets.all(25.0), decoration: FlutterLogoDecoration(), ),
Container with shadow, border, and child
Container( height: MediaQuery.of(context).size.height, width: MediaQuery.of(context).size.width, margin: EdgeInsets.all(25.0), decoration: new ShapeDecoration( color: Colors.white, shadows: [ BoxShadow(color: Colors.black, blurRadius: 15.0) ], shape: new Border.all( color: Colors.red, width: 8.0, ), ), child: Center(child: const Text(‘Hello Flutter’, textAlign: TextAlign.center)), ),
Rounded rectangle containers with border
Container( height: MediaQuery.of(context).size.height, width: MediaQuery.of(context).size.width, margin: EdgeInsets.all(25.0), decoration: new BoxDecoration( color: Colors.yellow, borderRadius: new BorderRadius.circular(55.0), border: new Border.all( width: 5.0, color: Colors.red, ), ), child: Center(child: const Text(‘Hello Flutter’, textAlign: TextAlign.center)), ),
Container with alignment property
Container( margin: EdgeInsets.all(20.0), width: double.infinity, height: 300.0, color: Colors.red, alignment: Alignment.topRight, padding: EdgeInsets.all(20.0), child: FlutterLogo(size: 100.0,), ),
Container with minWidth and maxWidth Box Constraints
Container( margin: EdgeInsets.all(20.0), constraints: BoxConstraints( maxWidth: 400.0, minWidth: 200.0 ), width: 50.0, alignment: Alignment.topCenter, child: Image.network(‘https://picsum.photos/500/400’), ),
Container with List of Box Shadow
Container( height: 100.0, width: 200.0, decoration: BoxDecoration( color: Colors.white, boxShadow: [ BoxShadow(color: Colors.red, blurRadius: 12.0 ), BoxShadow(color: Colors.green, blurRadius: 40.0) ] ), )
Container with Image and Rounded Border
Container( height: 200.0, width: 200.0, decoration: BoxDecoration( borderRadius: BorderRadius.circular(20.0), color: Colors.white, image: DecorationImage(fit: BoxFit.cover, image: NetworkImage(‘https://picsum.photos/200/300’)) ), )
Circular Container
Container( height: 200.0, width: 200.0, alignment: Alignment.center, decoration: BoxDecoration( borderRadius: BorderRadius.circular(200.0), color: Colors.green, ), child: Text(‘Hello’), )
Container with Horizontal Radius of left and right Radius
Container( height: 200.0, width: 200.0, alignment: Alignment.center, decoration: BoxDecoration( borderRadius: BorderRadius.horizontal( left: Radius.circular(20.0), right: Radius.circular(80.0) ), color: Colors.green, ), child: Text(‘Hello’), )
Container with Vertical Radius of top and bottom Radius
Container( height: 200.0, width: 200.0, alignment: Alignment.center, decoration: BoxDecoration( borderRadius: BorderRadius.vertical( top: Radius.circular(20.0), bottom: Radius.circular(80.0) ), color: Colors.green, ), child: Text(‘Hello’), )

Column

Simple Column of similar Text children
Column( children: [ Text(“Column 1”, style: bigStyle,), Text(“Column 2”, style: bigStyle,), Text(“Column 3”, style: bigStyle,) ], )
Column of different Widget children
Column( children: [ FlutterLogo( size: 100.0, colors: Colors.red, ), Text(“Column 2”, style: bigStyle,), Container( color: Colors.green, height: 100.0, width: 100.0, ) ], )
Playing with MainAxisAlignment
Column( mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.spaceAround, crossAxisAlignment: CrossAxisAlignment.end, children: [ FlutterLogo( size: 100.0, colors: Colors.red, ), Text(“Child Two”, style: bigStyle,), Container( color: Colors.blue, height: 100.0, width: 100.0, ) ], ),
Column having Row as child
Column( mainAxisSize: MainAxisSize.max, crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.spaceAround, children: [ Text(“Parent Text 1”), Text(“Parent Text 2”), Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children: [ Text(“Child Row Text 1”), Text(“Child Row Text 2”) ], ), ], ),

Row

Simple Row of similar Text children
Row( mainAxisSize: MainAxisSize.min, children: [ Text(“Column 1”, style: bigStyle,), Text(“Column 2”, style: bigStyle,), Text(“Column 3”, style: bigStyle,) ], )
Row with children of different Widgets
Row( mainAxisSize: MainAxisSize.min, children: [ FlutterLogo( size: 100.0, colors: Colors.red, ), Text(“Column 2”, style: bigStyle,), Container( color: Colors.green, height: 100.0, width: 100.0, ) ], )
Playing with MainAxisAlignment
Row( mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.center, children: [ FlutterLogo( size: 100.0, colors: Colors.red, ), Text(“Child Two”, style: bigStyle,), Container( color: Colors.blue, height: 100.0, width: 100.0, ) ], ),
Row having Column as child
Row( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.spaceAround, children: [ Text(“Parent Text 1”), Text(“Parent Text 2”), Column( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.spaceAround, children: [ Text(“Child Row Text 1”), Text(“Child Row Text 2”) ], ), ], ),

Buttons

RaisedButton( onPressed: (){}, color: Colors.yellow, disabledTextColor: Colors.grey, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(20.0) ), elevation: 20.0, splashColor: Colors.green, highlightColor: Colors.red, highlightElevation: 1.0, child: Text(“Raised Button”), ),
MaterialButton( minWidth: 250.0, onPressed: (){}, colorBrightness: Brightness.dark, color: Colors.deepPurpleAccent, elevation: 20.0, splashColor: Colors.green, //highlightColor: Colors.red, highlightElevation: 1.0, child: Text(“Material Button”), ),
FlatButton( onPressed: (){}, colorBrightness: Brightness.dark, color: Colors.deepPurpleAccent, splashColor: Colors.green, highlightColor: Colors.red, child: Text(“Raised Button”), shape: RoundedRectangleBorder( borderRadius: BorderRadius.horizontal( left: Radius.circular(20.0), right: Radius.circular(1.0)) ), ),
OutlineButton( onPressed: (){}, borderSide: BorderSide( width: 5.0, color: Colors.deepPurpleAccent ), color: Colors.deepPurpleAccent, highlightedBorderColor: Colors.purple, splashColor: Colors.green, //highlightColor: Colors.red, child: Text(“Raised Button”), shape: RoundedRectangleBorder( borderRadius: BorderRadius.vertical( top: Radius.circular(20.0), bottom: Radius.circular(1.0)) ), ),
IconButton( color: Colors.purple, splashColor: Colors.yellow, // highlightColor: Colors.red, icon: Icon(Icons.build, size: 40.0,), onPressed: (){}) ),
Column( mainAxisAlignment: MainAxisAlignment.center, children: [ FloatingActionButton( backgroundColor: Colors.orange, child: Icon(Icons.mic, size: 30.0, color: Colors.white,), onPressed: (){}), FloatingActionButton( mini: true, backgroundColor: Colors.green, child: Icon(Icons.mic, size: 30.0, color: Colors.white,), onPressed: (){}), ], ) ),

Stack

Stack of overlapping containers of reducing size
Stack( children: [ Container( height: 300.0, width: 300.0, color: Colors.red, ), Container( height: 250.0, width: 250.0, color: Colors.green, ), Container( height: 200.0, width: 200.0, color: Colors.yellow, ) ], ),
Playing with Alignment property
Stack( alignment: Alignment.center, children: [ Container( height: 300.0, width: 300.0, color: Colors.red, ), Container( height: 250.0, width: 250.0, color: Colors.green, ), Container( height: 200.0, width: 200.0, color: Colors.yellow, ) ], ),
One child on top of another using Positioned
Container( height: 400.0, //color: Colors.yellow, child: Padding( padding: const EdgeInsets.all(8.0), child: Stack( alignment: Alignment.center, children: [ Container( height: 300.0, width: 300.0, color: Colors.red, ), Positioned( top: 0.0, child: Container( height: 250.0, width: 250.0, color: Colors.green, ), ), ], ), ), ),
Playing with Positioned properties
Container( height: 400.0, //color: Colors.yellow, child: Padding( padding: const EdgeInsets.all(8.0), child: Stack( alignment: Alignment.center, children: [ Container( height: 300.0, width: 300.0, color: Colors.red, ), Positioned( top: 0.0, bottom: 0.0, child: Container( height: 250.0, width: 250.0, color: Colors.green, ), ), ], ), ), ),
Playing with Positioned
Container( height: 400.0, width: 350.0, //color: Colors.yellow, child: Padding( padding: const EdgeInsets.all(8.0), child: Stack( alignment: Alignment.center, children: [ Container( height: 300.0, width: 200.0, color: Colors.red, ), Positioned( right: 0.0, child: Container( height: 250.0, width: 150.0, color: Colors.green, ), ), ], ), ), ),