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
<table>
<tr><td> <b>Play with Text properties and styles</b> </td></tr>
<tr>
<td>
<pre>
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),
),
</pre>
</td>
<td>
<img src = "https://github-bucket-2604.s3.us-east-2.amazonaws.com/Screenshot+2020-04-21+at+05.53.51.png" width = 200>
</td>
</tr>
</table>
AppBar
Try AppBar examples directly from DartPad
<table>
<tr><td> <b>AppBar with Title</b> </td></tr>
<tr>
<td>
<pre>
AppBar(
backgroundColor: Colors.red,
title: Text("Title",),
elevation: 4.0,
),
</pre></td><td><img src="https://github.com/PoojaB26/FlutterBasicWidgets/blob/master/screenshots/appb1.png" width=200></tr>
<tr><td> <b>AppBar with List of Actions</b> </td></tr>
<tr>
<td>
<pre>
AppBar(
title: Text("Title"),
actions: <Widget>[
IconButton(
icon: Icon(Icons.search),
onPressed: () {},
),
IconButton(
icon: Icon(Icons.add),
onPressed: () {},
),
],
),
</pre></td><td><img src="https://github.com/PoojaB26/FlutterBasicWidgets/blob/master/screenshots/appb2.png" width=200></tr>
<tr><td> <b>AppBar with Text and Icon Themes</b> </td></tr>
<tr>
<td>
<pre>
AppBar(
backgroundColor: Colors.blueAccent,
title: Text("Title"),
actions: <Widget>[
IconButton(
icon: Icon(Icons.search),
onPressed: () {},
),
],
iconTheme: IconThemeData(
color: Colors.white,
),
textTheme: TextTheme(
title: TextStyle(
color: Colors.white,
fontSize: 20.0
),
),
),
</pre></td><td><img src="https://github.com/PoojaB26/FlutterBasicWidgets/blob/master/screenshots/appb3.png" width=200></tr>
<tr><td> <b>AppBar with centered Title and Subtitle</b> </td></tr>
<tr>
<td>
<pre>
AppBar(
automaticallyImplyLeading: false,
title: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
"Title",
style: TextStyle(fontSize: 18.0),
),
Text(
"subtitle",
style: TextStyle(fontSize: 14.0),
),
],
),
),
),
</pre></td><td><img src="https://github.com/PoojaB26/FlutterBasicWidgets/blob/master/screenshots/appb5.png" width=200></tr>
<tr><td> <b>AppBar with Logo</b> </td></tr>
<tr>
<td>
<pre>
AppBar(
automaticallyImplyLeading: false,
backgroundColor: Colors.yellow,
title: Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
FlutterLogo(),
Padding(
padding: const EdgeInsets.only(left: 16.0),
child: Text(
"Title with image",
),
),
],
),
),
</pre></td><td><img src="https://github.com/PoojaB26/FlutterBasicWidgets/blob/master/screenshots/appb6.png" width=200></tr>
<tr><td> <b>Transparent AppBar</b> </td></tr>
<tr>
<td>
<pre>
AppBar(
backgroundColor: Colors.transparent,
title: Text("Transparent AppBar"),
actions: <Widget>[
IconButton(
icon: Icon(
Icons.search,
),
onPressed: () {},
)
],
),
</pre></td><td><img src="https://github.com/PoojaB26/FlutterBasicWidgets/blob/master/screenshots/appb7.png" width=200></tr>
</table>
Container
Try Container examples directly from DartPad
<table>
<tr><td> <b>Container with full-device sized Flutter Logo</b> </td></tr>
<tr>
<td>
<pre>
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.all(25.0),
decoration: FlutterLogoDecoration(),
),
</pre>
</td> <td><img src = "https://github.com/PoojaB26/FlutterBasicWidgets/blob/master/screenshots/con1.png" width = 500> </td></tr> <tr><td> <b>Container with shadow, border, and child</b> </td></tr>
<tr><td>
<pre>
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>[
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)),
),
</pre>
</td><td><img src = "https://github.com/PoojaB26/FlutterBasicWidgets/blob/master/screenshots/con2.png" width = 200></td>
</tr>
<tr><td> <b>Rounded rectangle containers with border</b> </td></tr>
<tr>
<td>
<pre>
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)),
),
</pre>
</td>
<td><img src = "https://github.com/PoojaB26/FlutterBasicWidgets/blob/master/screenshots/con3.png" width = 200></td>
</tr>
<tr><td> <b>Container with alignment property</b> </td></tr>
<tr>
<td>
<pre>
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,),
),
</pre>
</td>
<td><img src = "https://github.com/PoojaB26/FlutterBasicWidgets/blob/master/screenshots/con4.png" width = 200></td>
</tr>
<tr><td> <b>Container with minWidth and maxWidth Box Constraints</b> </td></tr>
<tr>
<td>
<pre>
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'),
),
</pre>
</td>
<td><img src = "https://github.com/PoojaB26/FlutterBasicWidgets/blob/master/screenshots/con5.png" width = 200></td>
</tr>
<tr><td> <b>Container with List of Box Shadow</b> </td></tr>
<tr>
<td>
<pre>
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)
]
),
)
</pre>
</td>
<td><img src = "https://github.com/PoojaB26/FlutterBasicWidgets/blob/master/screenshots/con6.png" width = 500></td>
</tr>
<tr><td> <b>Container with Image and Rounded Border</b> </td></tr>
<tr>
<td>
<pre>
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'))
),
)
</pre>
</td>
<td><img src = "https://github.com/PoojaB26/FlutterBasicWidgets/blob/master/screenshots/con7.png" width = 200></td>
</tr>
<tr><td> <b>Circular Container</b> </td></tr>
<tr>
<td>
<pre>
Container(
height: 200.0,
width: 200.0,
alignment: Alignment.center,
decoration: BoxDecoration(
