Implement A Bottom Navigation Drawer
Complete Code For Implement A Bottom Navigation Drawer In Flutter
main.dart
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(), ); } } class MyHomePage extends StatefulWidget { @override MyHomePageState createState() { return new MyHomePageState(); } } class MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin { static final List<String> _listViewData = [ "CSS", "Flutter", "PHP", "HTML", "LARAVEL", "JAVASCRIPT", "JQUERY", ]; _showDrawer() { showModalBottomSheet( context: context, builder: (context) { return Container( color: Colors.red[700], child: ListView( children: [ Column( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.start, children: _listViewData .map((data) => ListTile( title: Text(data,style: TextStyle(color: Colors.white),), )) .toList(), ) ], ), ); }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( backgroundColor: Colors.red[900], title: Text(" Bottom Nav Drawer"), ), bottomNavigationBar: BottomAppBar( child: Container( padding: EdgeInsets.symmetric(horizontal: 10.0), height: 50.0, child: Row( children: <Widget>[ IconButton( icon: Icon(Icons.menu), onPressed: _showDrawer, ) ], ), ), ), body: Center( child: Text('Main Body'), ), ); } }