How To Align Menu Items Bottom Drawer Using Flutter App

admin_img Posted By Bajarangi soft , Posted On 30-10-2020

we will be looking at way of Duration: 24:41 Posted: Jan 12, 2020 I want it to look like the one in the screenshot where the bottom app bar stays on the screen and the bottom navigation drawer slides up when the "menu" button is tapped. The Material Design site shows this as a component, but doesn't link off to anywhere showing how to implement it in Flutter.

How To Align Menu Items Bottom Drawer Using Flutter App

 Align Menu Items Bottom Drawer
Complete Code For Align Menu Items Bottom Drawer In Flutter
Main.dart

import 'dart:math';
import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Transform',
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.amberAccent,
        title: Text("Align Menu Items Bottom Drawer"),
      ),
      drawer:  Container(
        width: 200,
        child: Drawer(
            elevation: 1.5,
            child: Column(children: <Widget>[
              DrawerHeader(
                  decoration: BoxDecoration(
                    color: Colors.amberAccent,
                  )),
              Expanded(
                  child: ListView(
                    padding: EdgeInsets.zero,
                    children: <Widget>[
                      ListTile(
                        title: Text('My Cart'),
                        leading: Icon(Icons.shopping_cart),
                        onTap: () {},
                      ),
                      ListTile(
                        title: Text('My Orders'),
                        leading: Icon(Icons.add_shopping_cart),
                        onTap: () {},
                      ),
                      ListTile(
                          title: Text('Logout'),
                          leading: Icon(Icons.exit_to_app),
                          onTap: () {})
                    ],
                  )),
              Container(
                color: Colors.black,
                width: double.infinity,
                height: 0.1,
              ),
              Container(
                  padding: EdgeInsets.all(10),
                  height: 100,
                  child: Text("V1.0.0",style: TextStyle(fontWeight: FontWeight.bold),)),
            ])),
      ),
      body: Center(
        child: Text('Main Body'),
      ),
    );
  }
}

 

Related Post