How to create a shaped drawer in Flutter ?
How to create a shaped drawer in Flutter ?
Example:
import 'package:flutter/material.dart';
/// ---------------------------
/// Shaped Light Drawer Drawer widget goes here.
/// ---------------------------
class ShapedDarwer1 extends StatelessWidget {
static const routeName = '/LightDrawerPage';
final GlobalKey<ScaffoldState> _key = GlobalKey<ScaffoldState>();
final Color primary = Colors.white;
final Color active = Colors.grey.shade800;
final Color divider = Colors.grey.shade600;
@override
Widget build(BuildContext context) {
return Scaffold(
key: _key,
appBar: AppBar(
backgroundColor: Colors.indigo.withOpacity(0.9),
title: Text('Ligh Drawer Navigation'),
automaticallyImplyLeading: false,
leading: IconButton(
icon: Icon(Icons.menu),
onPressed: () {
_key.currentState.openDrawer();
},
),
),
/// ----------------
/// Building drawer here .
/// ---------------
drawer: _buildDrawer(),
/// ----------------
/// Main Content .
/// ---------------
body: SingleChildScrollView(
padding: const EdgeInsets.all(16.0),
child: Column(
children: <Widget>[
/// ---------------------------
/// Building some main content.
/// ---------------------------
Container(
width: double.infinity,
height: 200,
decoration: BoxDecoration(
color: Colors.deepOrange,
borderRadius: BorderRadius.circular(10.0)),
),
SizedBox(height: 10.0),
Container(
width: double.infinity,
height: 200,
decoration: BoxDecoration(
color: Colors.lightGreen,
borderRadius: BorderRadius.circular(10.0)),
),
SizedBox(height: 10.0),
Container(
width: double.infinity,
height: 200,
decoration: BoxDecoration(
color: Colors.pink,
borderRadius: BorderRadius.circular(10.0)),
),
SizedBox(height: 10.0),
Container(
width: double.infinity,
height: 200,
decoration: BoxDecoration(
color: Colors.deepOrange,
borderRadius: BorderRadius.circular(10.0)),
),
SizedBox(height: 10.0),
Container(
width: double.infinity,
height: 200,
decoration: BoxDecoration(
color: Colors.lightGreen,
borderRadius: BorderRadius.circular(10.0)),
),
SizedBox(height: 10.0),
Container(
width: double.infinity,
height: 200,
decoration: BoxDecoration(
color: Colors.pink,
borderRadius: BorderRadius.circular(10.0)),
),
],
),
),
);
}
_buildDrawer() {
final String image ='assets/images/background.jpg';
return ClipPath(
/// ---------------------------
/// Building Shape for drawer .
/// ---------------------------
clipper: OvalRightBorderClipper(),
/// ---------------------------
/// Building drawer widget .
/// ---------------------------
child: Drawer(
child: Container(
padding: const EdgeInsets.only(left: 16.0, right: 40),
decoration: BoxDecoration(
color: primary, boxShadow: [BoxShadow(color: Colors.black45)]),
width: 300,
child: SafeArea(
/// ---------------------------
/// Building scrolling content for drawer .
/// ---------------------------
child: SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
alignment: Alignment.centerRight,
child: IconButton(
icon: Icon(
Icons.power_settings_new,
color: active,
),
onPressed: () {},
),
),
/// ---------------------------
/// Building header for drawer .
/// ---------------------------
Container(
height: 90,
alignment: Alignment.center,
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: LinearGradient(
colors: [Colors.orange, Colors.deepOrange])),
child: CircleAvatar(
radius: 40,
backgroundImage: AssetImage(image),
),
),
SizedBox(height: 5.0),
/// ---------------------------
/// Building header title for drawer .
/// ---------------------------
Text(
"John Doe",
style: TextStyle(
color: Colors.black,
fontSize: 18.0,
fontWeight: FontWeight.w600),
),
/// ---------------------------
/// Building items list for drawer .
/// ---------------------------
SizedBox(height: 30.0),
_buildRow(Icons.home, "Home"),
_buildDivider(),
_buildRow(Icons.person_pin, "My profile"),
_buildDivider(),
_buildRow(Icons.message, "Messages", showBadge: true),
_buildDivider(),
_buildRow(Icons.notifications, "Notifications",
showBadge: true),
_buildDivider(),
_buildRow(Icons.settings, "Settings"),
_buildDivider(),
_buildRow(Icons.email, "Contact us"),
_buildDivider(),
_buildRow(Icons.info_outline, "Help"),
_buildDivider(),
],
),
),
),
),
),
);
}
/// ---------------------------
/// Building divider for drawer .
/// ---------------------------
Divider _buildDivider() {
return Divider(
color: divider,
);
}
/// ---------------------------
/// Building item for drawer .
/// ---------------------------
Widget _buildRow(IconData icon, String title, {bool showBadge = false}) {
final TextStyle tStyle = TextStyle(color: active, fontSize: 16.0);
return Container(
padding: const EdgeInsets.symmetric(vertical: 5.0),
child: Row(children: [
Icon(
icon,
color: active,
),
SizedBox(width: 10.0),
Text(
title,
style: tStyle,
),
Spacer(),
if(showBadge)
Material(
color: Colors.deepOrange,
elevation: 5.0,
shadowColor: Colors.red,
borderRadius: BorderRadius.circular(5.0),
child: Container(
width: 25,
height: 25,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.deepOrange,
borderRadius: BorderRadius.circular(5.0),
),
child: Text(
"10+",
style: TextStyle(
color: Colors.white,
fontSize: 12.0,
fontWeight: FontWeight.bold),
),
),
) ,
],),
);
}
}
/// ------------------
/// for shaping the drawer. You can customize it as your own
/// ------------------
class OvalRightBorderClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
var path = Path();
path.lineTo(0, 0);
path.lineTo(size.width-40, 0);
path.quadraticBezierTo(
size.width, size.height / 4, size.width, size.height/2);
path.quadraticBezierTo(
size.width, size.height - (size.height / 4), size.width-40, size.height);
path.lineTo(0, size.height);
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) {
return true;
}
}
