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

EDIT : No need of running the project, simply run the code in the new official Flutter online compiler DartPad. All the DartPad links are given along with the example.

Still want to run the project?

Fork this project.
You don't need an emulator or simulator to run this anymore, web component has been added!

This project helped you? Buy me a cupcake to support me!

Examples

Text

Try out Text widget and it's properties directly from DartPad

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

Try AppBar examples directly from DartPad

AppBar with Title
AppBar( backgroundColor: Colors.red, title: Text("Title",), elevation: 4.0, ),
AppBar with List of Actions
AppBar( title: Text("Title"), actions: [ IconButton( icon: Icon(Icons.search), onPressed: () {}, ), IconButton( icon: Icon(Icons.add), onPressed: () {}, ), ], ),
AppBar with Text and Icon Themes
AppBar( backgroundColor: Colors.blueAccent, title: Text("Title"), actions: [ IconButton( icon: 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: [ Text( "Title", style: TextStyle(fontSize: 18.0), ), 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: [ FlutterLogo(), Padding( padding: const EdgeInsets.only(left: 16.0), child: Text( "Title with image", ), ), ], ), ),
Transparent AppBar
AppBar( backgroundColor: Colors.transparent, title: Text("Transparent AppBar"), actions: [ IconButton( icon: Icon( Icons.search, ), onPressed: () {}, ) ], ),

Container

Try Container examples directly from DartPad

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: ShapeDecoration( color: Colors.white, shadows: [ BoxShadow(color: Colors.black, blurRadius: 15.0) ], shape: 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: BoxDecoration( color: Colors.yellow, borderRadius: BorderRadius.circular(55.0), border: 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

Try Column examples directly from DartPad

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

Try Row examples directly from DartPad

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

Try Buttons examples directly from DartPad

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"), ),
TextButton( onPressed: () {}, style: ButtonStyle( backgroundColor: MaterialStateProperty.all(Colors.deepPurpleAccent), overlayColor: MaterialStateProperty.all(Colors.red), foregroundColor: MaterialStateProperty.all(Colors.green), ), child: Text('Text Button'), ),
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

Try Stack examples directly from DartPad

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

TextFields

Try TextFields Examples:

Rounded TextField without Outline
TextField( decoration: new InputDecoration( border: new OutlineInputBorder( borderSide: BorderSide( width: 0, style: BorderStyle.none, ), borderRadius: const BorderRadius.all( const Radius.circular(10.0), ), ), filled: true, hintStyle: new TextStyle(color: Colors.white30), hintText: "Type in your text" );
Rounded TextField With Outline
Padding( padding: const EdgeInsets.all(30.0), child: TextField( decoration: new InputDecoration( border: new OutlineInputBorder( borderSide: BorderSide( width: 2, style: BorderStyle.none, ), borderRadius: const BorderRadius.all( const Radius.circular(10.0), ), ), filled: true, hintStyle: new TextStyle(color: Colors.white30), hintText: "Type in your text"), ), );

Contributors

Pooja Bhaumik

Getting Started

For help getting started with Flutter, view our online documentation.

I think you should specify on how to use 3rd bullet to change to flutter_widgets directory before running flutter create .

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

Also, there is an expect issue running test/widget_tests.dart . Runs fine when I run lib/main.dart Here is what Visual Code complains. Any ideas?

Finally, this is a great demo and playground. Do you have any doc recommendations I can follow as to how the widgets are organized and relate to each other. In other words something like a Widget organization chart and how one widget can be a child of another widget. At least for some of the most common widgets that would be very helpful.

Thanks!

How to get started?

Hey Pooja,

I cloned your repo, and then ran flutter run in the checkout directory and it broke in a rather spectacular fashion: https://github.com/flutter/flutter/issues/22294

Any chance of adding the expected commands to get started with your repo to your README.md?

Thanks!

opened by domesticmouse 2
Unknow property 'colors' in FlutterLogo widget

Unknown property in Dart Pad. Not able to compile and run with this property.

After removing this colors property, i'm able to compile and run the code.

opened by ChiragGrover 1
updating the app replacing deprecated API for older Flutter version

start testing the app as huge source for beginner to learn about many flutter widget's but many of them have been deprecated by the flutter team my aim is to still keep this as reference and change all the deprecated to the new versions.

opened by Elio-Muculo 0
Resolved some todos

Ran flutter create . to add the important codes to run the project after pull. Also, Resolved some todos in Button widgets and Columns widget to let the beginners see the code application properly. Thanks

opened by Mohit-Joshi-dev 0
Couple of issues / comments.
I think you should specify on how to use 3rd bullet to change to flutter_widgets directory before running flutter create .

Fork this project.

Rename the directory to "flutter_widgets" or something with all_lowercase_and_underscore. (Unfortunately Flutter doesnt like CamelCases)

In your terminal**, cd flutter_widgets and then** run flutter create . This will create the android and iOS projects for you.

Run in your emulator or simulator.

Also, there is an expect issue running test/widget_tests.dart . Runs fine when I run lib/main.dart Here is what Visual Code complains. Any ideas?

Finally, this is a great demo and playground. Do you have any doc recommendations I can follow as to how the widgets are organized and relate to each other. In other words something like a Widget organization chart and how one widget can be a child of another widget. At least for some of the most common widgets that would be very helpful.

Thanks!
opened by wyattbiker 1