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.