Flutter Navigation Drawer
import 'package:flutter/material.dart'; class Home extends StatelessWidget{ @override Widget build(BuildContext context){ return Drawer ( child: Column( children: <Widget>[ Container( width: double.infinity, padding: const EdgeInsets.all(20.0), color: Theme.of(context).primaryColor, child: Column( children: <Widget>[ Container( width: 100, height: 100, margin: const EdgeInsets.only(top:30.0), decoration: BoxDecoration( shape: BoxShape.circle, image: DecorationImage( image: NetworkImage('https://i.pinimg.com/236x/92/2a/d4/922ad40a1e88dc1067065e27e7f2e9e1--king-company-company-logo.jpg'), fit: BoxFit.fill ), ), ), Text('Sapan Kumar Das', style: TextStyle(color: Colors.white, fontSize: 22.0),), ], ), ), ListTile( leading:Icon(Icons.account_circle, ) , title: Text('Home'), ), ListTile( leading:Icon(Icons.settings, ) , title: Text('Setting'), ),ListTile( leading:Icon(Icons.arrow_back, ) , title: Text('LogOut'), ), ], ), ); } }
s
Adding a Navigation Drawer
Material Design applications are used to handle navigation using tabs or drawers. Why drawers ? They are handy when lots of items need to be displayed.
The main goal for this post is adding a Navigation Drawer to the application being developed along with these articles.
...........................................................................................................................................................................................................................
Example #1
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.deepPurple,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePageState createState() => MyHomePageState();
}
class MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Drawer'),
),
drawer: Drawer(),
);
}
}
Happy coding :)
...........................................................................................................................................................................................................................
Example #2
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.deepPurple,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePageState createState() => MyHomePageState();
}
class MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Drawer'),
),
drawer: Drawer(
child: ListView(
children: [
ListTile(
title: Text("Ttem 1"),
trailing: Icon(Icons.arrow_forward),
),
ListTile(
title: Text("Ttem 1"),
trailing: Icon(Icons.arrow_forward),
),
],
),
),
);
}
}
Happy Coding :)
...........................................................................................................................................................................................................................
Example #3
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.deepPurple,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePageState createState() => MyHomePageState();
}
class MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Drawer'),
),
drawer: Drawer(
child: ListView(
children: [
createHeader(),
_createDrawerItem(icon: Icons.contacts,text: 'Contacts',),
ListTile(
trailing: Icon(Icons.arrow_forward),
title: Text('Hello World'),
),
ListTile(
trailing: Icon(Icons.arrow_forward_ios),
title: Text('Setting'),
),
ListTile(
leading: Icon(Icons.exit_to_app),
title: Text('Logout'),
)
],
),
),
);
}
Widget createHeader() {
return DrawerHeader(
margin: EdgeInsets.zero,
padding: EdgeInsets.zero,
// decoration: BoxDecoration(
// image: DecorationImage(
// fit: BoxFit.fill,
// image: AssetImage('path/to/header_background.png'))),
child: Stack(children: <Widget>[
Positioned(
bottom: 12.0,
left: 16.0,
child: Text("Flutter Drawer Header ",
style: TextStyle(
color: Colors.black,
fontSize: 20.0,
fontWeight: FontWeight.w500))),
]));
}
Widget _createDrawerItem(
{IconData icon, String text, GestureTapCallback onTap}) {
return ListTile(
title: Row(
children: <Widget>[
Icon(icon),
Padding(
padding: EdgeInsets.only(left: 8.0),
child: Text(text),
)
],
),
onTap: onTap,
);
}
}
...........................................................................................................................................................................................................................
Example #4
...........................................................................................................................................................................................................................
Example #5
...........................................................................................................................................................................................................................
Example #6
No comments:
Post a Comment