Posts

Make Simple Navigation Drawer Flutter Indonesia

Asslamu’alaikum Wr. Wb.

Hallo sobat flutter kembali lagi di posting saya maaf sebelumnya saya jarang update minggu minggu ini karena ada banyak kegiatan yang harus dilakukan, pada postingan kali ini saya akan membahas bagaimana caranya membuat simple navigation drawer kurang lebih seperti ini :

Oke langsung saja kita buat caranya 

First :

  1. buatlah sebuah roject dengan nama drawer_navigation(optional)
  2. tunggu sampai proses indexing build gradle selesai
  3. Setelah proses indexing build gradle itu selesai 
  4. Kamu dapat mengedit file main.dart dengan mengetikan code berikut ini :
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: PageHome(),
);
}
}
class PageHome extends StatefulWidget {
@override
_PageHomeState createState() => _PageHomeState();
}
class _PageHomeState extends State<PageHome> {
@override
Widget build(BuildContext context) {
return Container(

);
}
}

5. Kemudian kita tambahkan pada bagian statefull tepatnya didalam statefull kita buat sebuah array dengan nama variable nya draweritem dan buatlah sebuah class baru DrawerItem diatasnya yang mana dia mempuyai constructor String dan IconData maka kurang lebih seperti ini 

....
class DrawerItem {
String title;
IconData icon;
DrawerItem(this.title,this.icon);
}


class PageHome extends StatefulWidget {
final drawerItem = [
new DrawerItem("Cart", Icons.add_shopping_cart),
new DrawerItem("Travel", Icons.card_travel),
new DrawerItem("Info", Icons.info),

];
@override
_PageHomeState createState() => _PageHomeState();
}
....

 6. Kemudian kita buat fungsi selection pada bagian state nya untuk digunakan sebagai viewpager nya dengan mengetikan code berikut ini 

....
class _PageHomeState extends State<PageHome> {

int _selectedDrawerIndex = 0;

_getDrawerItemWidget(int pos) {
switch (pos) {
case 0:
return new FirstFragment();
case 1:
return new SecondFragment();
case 2:
return new ThirdFragment();

default:
return new Text("Error");
}
}

_onSelectItem(int index) {
setState(() => _selectedDrawerIndex = index);
Navigator.of(context).pop(); // close the drawer
}
class _PageHomeState extends State<PageHome> {
@override
Widget build(BuildContext context) {
return Container(

);
}
}
....

7. Kemudian didalam context state nya kita buat sebuah perulangan untuk melooping data drawer itemnya dengan mengetikan code berikut ini :

....
@override
Widget build(BuildContext context) {
var drawerOptions = <Widget>[];
for (var i = 0; i < widget.drawerItem.length; i++) {
var d = widget.drawerItem[i];
drawerOptions.add(
new ListTile(
leading: new Icon(d.icon),
title: new Text(d.title),
trailing: new Icon(Icons.arrow_right),
selected: i == _selectedDrawerIndex,
onTap: () => _onSelectItem(i),
)
);
}

return Container(
    );
}
}
....

8. Kemudian kita edit nilai baliknya atau return nya dengan menggunakan Scaffold sekalian kita juga buat class class baru untuk membuat screen baru ketika kita click item drawer tadi 

....
return Scaffold(
appBar: new AppBar(
// here we display the title corresponding to the fragment
// you can instead choose to have a static title
title
: new Text(widget.drawerItem[_selectedDrawerIndex].title),
),
drawer: new Drawer(
child: new Column(
children: <Widget>[
new UserAccountsDrawerHeader(
accountName: Text("Muhamad Alamsyah"),
accountEmail: Text("muhamad.alamsyah@udacoding.com"),
currentAccountPicture: CircleAvatar(
backgroundColor:
Theme.of(context).platform == TargetPlatform.iOS
? Colors.blue
: Colors.white,
child: Text("A",style: TextStyle(fontSize: 40.0),
),
),
otherAccountsPictures: <Widget>[
CircleAvatar(
backgroundColor:
Theme.of(context).platform == TargetPlatform.iOS
? Colors.blue
: Colors.white,
child: Text("B",style: TextStyle(fontSize: 25.0),
),
),
],
),
new Column(children: drawerOptions)
],
),
),
body: _getDrawerItemWidget(_selectedDrawerIndex),
);
}
}

class ThirdFragment extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Center(
child: new Text("Hello Fragment Info"),
);
}
}

class SecondFragment extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Center(
child: new Text("Hello Fragment Travel"),
);
}
}

class FirstFragment extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Center(
child: new Text("Hello Fragment Cart"),
);
}
}
....

9. Kemudian kalian bisa running program tadi di emulator ataupun di smartphone kita 

1 Comment :

Leave a Reply :

* Your email address will not be published.