Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/PoojaB26/FlutterBasicWidgets
ABC of Flutter widgets. Intended for super beginners at Flutter. Play with 35+ examples in DartPad directly and get familiar with various basic widgets in Flutter
https://github.com/PoojaB26/FlutterBasicWidgets
basic beginner dart examples flutter playground widgets
Last synced: 6 days ago
JSON representation
ABC of Flutter widgets. Intended for super beginners at Flutter. Play with 35+ examples in DartPad directly and get familiar with various basic widgets in Flutter
- Host: GitHub
- URL: https://github.com/PoojaB26/FlutterBasicWidgets
- Owner: PoojaB26
- Created: 2018-09-16T12:53:44.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T23:32:15.000Z (almost 2 years ago)
- Last Synced: 2024-08-01T12:20:57.111Z (3 months ago)
- Topics: basic, beginner, dart, examples, flutter, playground, widgets
- Language: Dart
- Homepage:
- Size: 2.57 MB
- Stars: 883
- Watchers: 46
- Forks: 283
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://dartpad.dartlang.org/flutter). 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! [](https://paypal.me/PoojaBhaumik)
# Examples
## Text
### Try out Text widget and it's properties directly from [DartPad](https://dartpad.dev/d548285fd710d4c94cb1ff59835b85bd)
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](https://dartpad.dev/bd6bb228f0be205648a74490f35f776f)
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](https://dartpad.dev/a30023e2cb47793f2d7d586a3d791dee)
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](https://dartpad.dev/f814f180582790d428eb70df4092403d)
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](https://dartpad.dev/564ca3391b28bc035e675ea86c4355ef)
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](https://dartpad.dev/b4fb1e9bd187d4a808f85d962f63e9d1)
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](https://dartpad.dev/8452d46bb69207184364d90102855257)
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
[](https://twitter.com/pooja_bhaumik)
## Getting Started
For help getting started with Flutter, view our online
[documentation](https://flutter.io/).