Drawer Widget and Route

  1. 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('aw84737@gmail.com'),
      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 :

C:\Users\acer\AppData\Local\Microsoft\Windows\INetCache\Content.Word\Screenshot_2021-02-21-21-47-23-72_8d57591fe6c3d4e8d164303fb58bed0f.jpg

C:\Users\acer\AppData\Local\Microsoft\Windows\INetCache\Content.Word\Screenshot_2021-02-21-21-47-29-30_8d57591fe6c3d4e8d164303fb58bed0f.jpg

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('aw84737@gmail.com'),

            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:

C:\Users\acer\AppData\Local\Microsoft\Windows\INetCache\Content.Word\Screenshot_2021-02-21-21-47-23-72_8d57591fe6c3d4e8d164303fb58bed0f.jpg

C:\Users\acer\AppData\Local\Microsoft\Windows\INetCache\Content.Word\Screenshot_2021-02-21-21-47-29-30_8d57591fe6c3d4e8d164303fb58bed0f.jpg

C:\Users\acer\AppData\Local\Microsoft\Windows\INetCache\Content.Word\Screenshot_2021-02-21-21-47-37-32_8d57591fe6c3d4e8d164303fb58bed0f.jpg

C:\Users\acer\AppData\Local\Microsoft\Windows\INetCache\Content.Word\Screenshot_2021-02-21-21-47-43-38_8d57591fe6c3d4e8d164303fb58bed0f.jpg

Leave a Comment