Exploring Flutter widgets
This repository contains sample apps build while exploring flutter widgets.
Bottom Navigation
- Implementation of Material design Bottom Navigation Bar
| Tab Bar | Bottom Navigation | |
@override
void initState() {
super.initState();
tabController =
new TabController(
length: 2,
vsync: this);
}
----------------------------
----------------------------
new TabBarView(
children: [
new Page("First"),
new Page("Second")
],
controller: tabController,
),
|
bottomNavigationBar:
new Material(
color: Colors.teal,
child: new TabBar(
controller: tabController,
tabs: [
new Tab(
icon: new Icon(Icons.favorite),
),
new Tab(
icon: new Icon(Icons.email),
)
],
),
),
|
|
Material Chat App
| List View | |
new Column(
children: [
new Flexible(
child: new ListView.builder(
padding: new EdgeInsets.all(8.0),
reverse: true,
// item builder takes buildcontext and index
itemBuilder: (_, int index) => _messages[index],
itemCount: _messages.length,
),
),
new Divider(
height: 1.0,
),
new Container(
decoration: new BoxDecoration(
color: Theme.of(context).cardColor,
),
child: _textComposerWidget(),
)
],
);
|
|
Calculator App
| Simple app implementing +,-,*,/ features | |
new TextField(
keyboardType: TextInputType.number,
decoration: new InputDecoration(hintText: "Enter Number 1"),
controller: t1,
),
|
|
Network Request
- App using flutter http module to get a list of images and load them from network inside a widget.
Login Design
| - Login app UI | |
new TextFormField(
decoration: new InputDecoration(
labelText: "Enter Email",
fillColor: Colors.white),
keyboardType: TextInputType.emailAddress,
),
new TextFormField(
decoration: new InputDecoration(
labelText: "Enter Password"),
keyboardType: TextInputType.text,
obscureText: true, // show dots or star in password
),
new Padding(
padding: const EdgeInsets.only(top: 60.0),
),
new MaterialButton(
height: 50.0,
minWidth: 150.0,
color: Colors.teal,
textColor: Colors.white,
child: new Icon(
Icons.arrow_right,
size: 40.0,
),
onPressed: () => {},
splashColor: Colors.redAccent,
),
|
|
State Management using Streams
- using Stateful Widgets
- using Global Instance(BLOC pattern)
- using Scoped Instance(BLOC pattern)
- using RxDart
Downside of the last two approaches is complexity in merging of two streams. Solution: RxDart Implementation
CryptoApp
- App which fetches data from Coinmarket API and displays a list of cryptocurrencies in a ListView
| ListView | |
Future getCurrenciesFromApi() async {
String url = "https://api.coinmarketcap.com/v1/ticker/?limit=50";
http.Response response = await http.get(url);
return json.decode(response.body);
}
|
|
Stepper Widger
- Implementation of Stepper widget
| Build Step Widget | Stepper Widget | |
List my_steps = [
new Step(
title: new Text(
"Step 1"
),
content: new Text(
"Content text 1"
),
isActive: true
),
new Step(
title: new Text(
"Step 2"
),
content: new Text(
"Content text 2"
),
isActive: true
),
new Step(
title: new Text(
"Step 3"
),
content: new Text(
"Content text 3"
),
isActive: true
),
];
|
new Stepper( steps: my_steps, currentStep: this.current_step, type: StepperType.vertical, ), |
|
Alert Dialog
- Implementation of Alert dialog
| Build Alert Widget | |
AlertDialog dialog = new AlertDialog(
content: new Text(
"This is a dialog widget",
style: new TextStyle(fontSize: 18.0)
),
title: new Text("Diaog Title"),
);
----------------------------
----------------------------
onPressed: () =>
showDialog(context: context, child: dialog),
|
|
Snackbar
- Implementation of Snackbar
| Build Snackbar Widget | |
onPressed: () => Scaffold.of(context)
.showSnackBar(
new SnackBar(
content: new Text("File downloading started"),
duration: new Duration(seconds: 3),
)),
|
|