- Drawer widget
Merupakan widget yang digunakan untuk menampilkan menu leading yaitu menu seperti navigation drawer.
Contoh code :
import 'package:flutter/material.dart';
void main() {
runApp( new MaterialApp(home: MyApp()));
}
class MyApp extends StatefulWidget{
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp>{
@override
Widget build(BuildContext context) {
return new Scaffold(appBar: AppBar(title: new Text('Navigasi Drawer'),
backgroundColor: Colors.green,),
drawer: new Drawer( child: new ListView( children: <Widget>[
new UserAccountsDrawerHeader(accountName: Text('Astina Wahyuni'), accountEmail: Text('[email protected]'),
currentAccountPicture: new CircleAvatar(backgroundColor: Colors.black26,child: new Text('P'),),
decoration: new BoxDecoration(color: Colors.lightBlue), otherAccountsPictures: <Widget>[
new CircleAvatar(backgroundColor: Colors.black26,child: new Text('Y'),),
new CircleAvatar(backgroundColor: Colors.black26, child: new Text('W'),),
],),
new ListTile(title: new Text('Home Page'),trailing: new Icon(Icons.home),),
new ListTile(title: new Text('This Laptop'),trailing: new Icon(Icons.laptop),),
new ListTile(title: new Text('Close'),trailing: new Icon(Icons.close),onTap: (){
Navigator.pop(context);
},)
],),),);
}
}
Hasil running :
2. Routes Widget
Merupakan widget yang digunakan untuk mengarahkan pada halaman tertentu.
Contoh code :
import 'package:flutter/material.dart';
import 'halamanlain.dart';
void main(){
runApp(new MaterialApp(home: MyApp()));
}
class MyApp extends StatefulWidget{
@override
_MyAppState createState()=> _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return new Scaffold(appBar: AppBar(title: new Text('Navigasi Drawer'),
backgroundColor: Colors.green,),
drawer: new Drawer(
child: new ListView(children: <Widget>[
new UserAccountsDrawerHeader(accountName: Text('Astina Wahyuni'),
accountEmail: Text('[email protected]'),
currentAccountPicture: new CircleAvatar(
backgroundColor: Colors.black26, child: new Text('P'),),
decoration: new BoxDecoration(color: Colors.lightBlue),
otherAccountsPictures: <Widget>[
new CircleAvatar(
backgroundColor: Colors.black26, child: new Text('Y'),),
new CircleAvatar(
backgroundColor: Colors.black26, child: new Text('W'),),
],),
new ListTile(
title: new Text('Home Page'), trailing: new Icon(Icons.home),
onTap: () =>
Navigator.of(context).push(new MaterialPageRoute(
builder: (BuildContext contex) => PageBaru())),
),
new ListTile(
title: new Text('List Laptop'), trailing: new Icon(Icons.laptop),
onTap: () =>
Navigator.of(context).push(new MaterialPageRoute(
builder: (BuildContext contex) => Pagebaru())),
),
new ListTile(title: new Text('Close'),
trailing: new Icon(Icons.close),
onTap: () {
Navigator.pop(context);
},),
],),
),
);
}
}
class PageBaru extends StatelessWidget{
@override
Widget build(BuildContext context) {
return new MaterialApp(title: 'Welcome to Page Home',
home: Scaffold(
appBar: new AppBar(title: new Text('Welcome to Home Page'),),
body: new Row(mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Center(child: new Text("Welcome to Page Home")),
],),
),);
}
}
class Pagebaru extends StatelessWidget{
@override
Widget build(BuildContext context) {
return new MaterialApp(title: 'Welcome to My List Product',
home: Scaffold(
appBar: new AppBar(title: new Text('Welcome to My List Product'),),
body: new Row(mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Center(child: new Text("Welcome to My List Product")),
],),
),
);
}
}
Hasil running: