Drawer In Flutter

Drawer In Flutter :

Screenshot :

Drawer In Flutter

1.main.dart

import 'package:flutter/services.dart';
 import 'package:flutter/material.dart';
 import 'splash_page.dart';
 void main() {
   runApp(MyApp());
 }
 class MyApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     SystemChrome.setSystemUIOverlayStyle(
       SystemUiOverlayStyle.dark.copyWith(
           statusBarColor: Colors.transparent,
           statusBarIconBrightness: Brightness.light),
     );
 return MaterialApp(     theme: ThemeData(         //buttonColor: Colors.white,         brightness: Brightness.light,         accentColor: Colors.orange,         primaryColor: Colors.orangeAccent,         primarySwatch: Colors.orange),     title: "",     initialRoute: '/',     debugShowCheckedModeBanner: false,     routes: <String, WidgetBuilder>{       '/': (context) => SplashScreenPage(),     });
 }
 }

2.spash_page.dart

 import 'dart:async';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'login_page.dart';
 Color colorOne = Colors.orange[100];
 Color colorTwo = Colors.orange;
 Color colorThree = Colors.orange;
 final appTheme = ThemeData(
   primarySwatch: Colors.orange,
 );
 class SplashScreenPage extends StatefulWidget {
   @override
   createState() => new _SplashScreenPageState();
 }
 class _SplashScreenPageState extends State {
   Duration five;
   Timer t2;
   String routeName;
 @override
   void initState() {
     super.initState();
     five = const Duration(seconds: 3);
     t2 = new Timer(five, () {
       _goLogin();
     });
   }
 @override
   void dispose() {
     if (this.mounted)
     super.dispose();
     t2.cancel();
   }
 @override
   Widget build(BuildContext context) {
     SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
     return new Scaffold(
       body: Stack(
         fit: StackFit.expand,
         children:            HeaderBar()         ,
       ),
       bottomNavigationBar: new Container(
           width: MediaQuery.of(context).size.width, child: companyName()),
     );
   }
 companyName() => Padding(
     padding: EdgeInsets.all(8.0),
     child: Column(
       mainAxisSize: MainAxisSize.min,
       //mainAxisAlignment: MainAxisAlignment.end,
       crossAxisAlignment: CrossAxisAlignment.end,
       children: [
         new Text('fluttertutorial.in',
             style: TextStyle( color: Colors.black45,
                 fontSize: 13.0,
                 fontWeight: FontWeight.bold)),
       ],
     ),
   );
 _goLogin() async {
       Navigator.of(context).pushReplacement(new MaterialPageRoute(
           builder: (BuildContext context) => new LoginPage()));
   }
 }
 class HeaderBar extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return CustomPaint(
       child: Container(
         height: 300.0
       ),
       painter: CurvePainter(),
     );
   }
 }
 class CurvePainter extends CustomPainter{
   @override
   void paint(Canvas canvas, Size size) {
     Path path = Path();
     Paint paint = Paint();
 path.lineTo(0, size.height *0.75); path.quadraticBezierTo(size.width* 0.10, size.height*0.70,   size.width*0.17, size.height*0.90); path.quadraticBezierTo(size.width*0.20, size.height, size.width*0.25, size.height*0.90); path.quadraticBezierTo(size.width*0.40, size.height*0.40, size.width*0.50, size.height*0.70); path.quadraticBezierTo(size.width*0.60, size.height*0.85, size.width*0.65, size.height*0.65); path.quadraticBezierTo(size.width*0.70, size.height*0.90, size.width, 0); path.close(); paint.color = colorThree; canvas.drawPath(path, paint); path = Path(); path.lineTo(0, size.height*0.50); path.quadraticBezierTo(size.width*0.10, size.height*0.80, size.width*0.15, size.height*0.60); path.quadraticBezierTo(size.width*0.20, size.height*0.45, size.width*0.27, size.height*0.60); path.quadraticBezierTo(size.width*0.45, size.height, size.width*0.50, size.height*0.80); path.quadraticBezierTo(size.width*0.55, size.height*0.45, size.width*0.75, size.height*0.75); path.quadraticBezierTo(size.width*0.85, size.height*0.93, size.width, size.height*0.60); path.lineTo(size.width, 0); path.close(); paint.color = colorTwo; canvas.drawPath(path, paint); path =Path(); path.lineTo(0, size.height*0.75); path.quadraticBezierTo(size.width*0.10, size.height*0.55, size.width*0.22, size.height*0.70); path.quadraticBezierTo(size.width*0.30, size.height*0.90, size.width*0.40, size.height*0.75); path.quadraticBezierTo(size.width*0.52, size.height*0.50, size.width*0.65, size.height*0.70); path.quadraticBezierTo(size.width*0.75, size.height*0.85, size.width, size.height*0.60); path.lineTo(size.width, 0); path.close(); paint.color = colorOne; canvas.drawPath(path, paint);
 }
 @override
   bool shouldRepaint(CustomPainter oldDelegate) {
     return oldDelegate != this;
   }
 }

3.background_clipper.dart

import 'package:flutter/material.dart';

class BackgroundClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path()
      ..lineTo(0.0, size.height)
      ..lineTo(size.width, size.height)
      ..lineTo(size.width, 0.0)
      ..quadraticBezierTo(size.width, 0.0, size.width-20.0, 0.0)
      ..lineTo(40.0, 70.0)
      ..quadraticBezierTo(10.0, 85.0, 0.0, 120.0)
      ..close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return true;
  }
}

4.uidata.dart

import 'dart:ui';
 import 'package:flutter/material.dart';
 class UIData {
   //colors
   static List drawerArrowGradients = [
     Colors.white,
     Colors.grey.shade200,
   ];
 static List gradientsButton = [
     Colors.grey.shade200,
     Colors.orange.shade100,
   ];
 }

5.custom_float.dart

 import 'package:flutter/material.dart';
 import 'uidata.dart';
 class CustomFloat extends StatelessWidget {
   final IconData icon;
   final Widget builder;
   final VoidCallback qrCallback;
   final isMini;
 CustomFloat({this.icon, this.builder, this.qrCallback, this.isMini = false});
 @override
   Widget build(BuildContext context) {
     return FloatingActionButton(
       shape: BeveledRectangleBorder(
         borderRadius: BorderRadius.vertical(top: Radius.circular(10.0), bottom: Radius.circular(10.0)),
       ),
       clipBehavior: Clip.antiAlias,
       mini: isMini,
       onPressed: qrCallback,
       child: Ink(
         decoration: new BoxDecoration(
             gradient: new LinearGradient(colors: UIData.drawerArrowGradients)),
         child: Stack(
           fit: StackFit.expand,
           children: [
             Icon(
               icon,
               color: Colors.orange.withOpacity(0.5),
             ),
             builder != null
                 ? Positioned(
               right: 5.0,
               top: 5.0,
               child: CircleAvatar(
                 backgroundColor:Colors.orange.withOpacity(0.5),
                 child: builder,
                 radius: 85.0,
               ),
             )
                 : Container(),
             // builder
           ],
         ),
       ),
     );
   }
 }

6.custom_float_form.dart

 import 'package:flutter/material.dart';
 import 'uidata.dart';
 class CustomFloatForm extends StatelessWidget {
   final IconData icon;
   final VoidCallback qrCallback;
   final isMini;
 CustomFloatForm({this.icon, this.qrCallback, this.isMini = false});
 @override
   Widget build(BuildContext context) {
     return FloatingActionButton(
       elevation: 1,
       clipBehavior: Clip.antiAlias,
       mini: isMini,
       onPressed: qrCallback,
       child: Ink(
         decoration: new BoxDecoration(
             gradient: new LinearGradient(colors: UIData.gradientsButton)),
         child: Stack(
           fit: StackFit.expand,
           children: [
             Icon(
               icon,
               color: Colors.orangeAccent,
             )
           ],
         ),
       ),
     );
   }
 }

7 common_scaffold.dart

 import 'package:flutter/material.dart';
 import 'common_drawer.dart';
 import 'uidata.dart';
 class CommonScaffold extends StatelessWidget {
   final appTitle;
   final Widget bodyData;
   final showFAB;
   final showDrawer;
   final actionFirstIcon;
   final scaffoldKey;
   final showBottomNav;
   final centerDocked;
   final elevation;
   final Widget bottomBar;
   final showOrderItems;
   final showSorting;
 CommonScaffold(
       {this.appTitle,
       this.bodyData,
       this.showFAB = false,
       this.showDrawer = false,
       this.actionFirstIcon = Icons.search,
       this.scaffoldKey,
       this.showBottomNav = false,
       this.centerDocked = false,
       this.elevation = 0.3,
       this.bottomBar,
       this.showOrderItems = true,
       this.showSorting = false});
 @override
   Widget build(BuildContext context) {
     return Scaffold(
         key: scaffoldKey != null ? scaffoldKey : null,
         appBar: AppBar(
           //leading: new Icon(Icons.menu),
           iconTheme: new IconThemeData(color: Colors.white),
           elevation: elevation,
           backgroundColor: Colors.orange,
           title: Text(appTitle,
               style: new TextStyle(fontSize: 20.0, color: Colors.white)),
           /* actions: [
           IconButton(
             onPressed: () {
               Navigator.pushNamed(context, UIData.searchRoute);
             },
             icon: Icon(actionFirstIcon),
           )
         ],*/
         ),
         drawer: showDrawer ? CommonDrawer() : null,
         body: bodyData);
   }
 }

8.common_drawer.dart

 import 'package:flutter/material.dart';
 class CommonDrawer extends StatefulWidget {
   @override
   _CommonDrawerState createState() => _CommonDrawerState();
 }
 class _CommonDrawerState extends State {
   List> drawerMenuList = new List>();
 @override
   Widget build(BuildContext context) {
     this.drawerMenuList = this.drawerMenu();
 <code>return Drawer(   child: Column(       mainAxisAlignment: MainAxisAlignment.start,       crossAxisAlignment: CrossAxisAlignment.stretch,       children: <Widget>[         this._buildUserAccountProfileHeader(),         this._buildDrawerBody()       ]), );</code>
 }
 _buildUserAccountProfileHeader() => Expanded(
         flex: 1,
         child: ClipPath(
           clipper: DashboardCustomClipper(),
           child: Container(
             color: Colors.orange,
             padding: EdgeInsets.only(top: 35.0, left: 20.0),
             child: Column(
               children: [
                 Align(
                   alignment: Alignment.topLeft,
                   child: CircleAvatar(
                     radius: 30.0,
                     backgroundColor: Colors.transparent,
                     //backgroundImage: AssetImage(UIData.imageProfile),
                   ),
                 ),
                 Container(
                   margin: EdgeInsets.all(5),
                 ),
                 Align(
                   alignment: Alignment.topLeft,
                   child: Text(
                     'FlutterTutorial',
                     style: new TextStyle(fontSize: 20.0, color: Colors.white),
                   ),
                 ),
                 Align(
                   alignment: Alignment.topLeft,
                   child: Text('email'.toLowerCase(),
                       style:
                           new TextStyle(fontSize: 14.0, color: Colors.white)),
                 ),
               ],
             ),
           ),
         ),
       );
 Expanded _buildDrawerBody() => Expanded(
       flex: 2,
       child: ListView.builder(
           padding: EdgeInsets.only(top: 1.0),
           physics: BouncingScrollPhysics(),
           itemCount: this.drawerMenuList.length,
           itemBuilder: (BuildContext context, int index) {
             return GestureDetector(
                 onTap: () {
                   switch (index) {
                     case 0:
                       Navigator.of(context).pop();
                       break;
 <code>                case 1:                   Navigator.of(context).pop();                   break;                 case 2:                   Navigator.of(context).pop();                   break;                 case 3:                   Navigator.of(context).pop();                   break;                 case 4:                   Navigator.of(context).pop();                   break;               }             },             child: ListTile(                 leading: Icon(this.drawerMenuList[index]['icon'],                     color: Color(0xFFFFB74D)),                 title: Text(this.drawerMenuList[index]['title'],                     style: TextStyle(                         fontWeight: FontWeight.w700,                         fontSize: 18.0,                         color: Colors.black87))));       }));</code>
 List> drawerMenu() {
     List> menus = [
       {'title': 'Home', 'icon': Icons.home},
       {'title': 'My Order', 'icon': Icons.add_shopping_cart},
       {'title': 'Favourite', 'icon': Icons.favorite},
       {'title': 'Profile', 'icon': Icons.person_outline},
       {'title': 'Logout', 'icon': Icons.vpn_key},
     ];
     return menus;
   }
 }
 class DashboardCustomClipper extends CustomClipper {
   final Path path = new Path();
 @override
   Path getClip(Size size) {
     this.path.lineTo(0.0, size.height - 50);
     this.path.lineTo(size.width, size.height);
     this.path.lineTo(size.width, 0.0);
     this.path.close();
 <code>return this.path;</code>
 }
 @override
   bool shouldReclip(CustomClipper oldClipper) => false;
 }

9.login_page.dart

Screenshot :

Drawer In Flutter
 import 'dart:async';
 import 'package:flutter/material.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/services.dart';
 import 'background_clipper.dart';
 import 'common_scaffold.dart';
 import 'custom_float_form.dart';
 class LoginPage extends StatefulWidget {
   @override
   _LoginPageState createState() => _LoginPageState();
 }
 class _LoginPageState extends State {
   final GlobalKey _key = new GlobalKey();
   final TextEditingController _mobileController = new TextEditingController();
   final TextEditingController _passwordController = new TextEditingController();
 bool _validate = false;
   bool visible = true;
   String mobile, password;
 @override
   void initState() {
     super.initState();
   }
 @override
   Widget build(BuildContext context) {
     return CommonScaffold(
         appTitle: 'Flutter Tutorial',
         bodyData: Form(key: _key, autovalidate: _validate, child: loginBody(context)),
         showDrawer: true,
         centerDocked: false,
         showFAB: false,
         showBottomNav: false);
   }
 loginBody(BuildContext context) => ListView(
         physics: BouncingScrollPhysics(),
         children: [loginHeader(), formUI()],
       );
 @override
   void dispose() {
     if (this.mounted) super.dispose();
     _mobileController.dispose();
     _passwordController.dispose();
   }
 loginHeader() => Column(
         //mainAxisAlignment: MainAxisAlignment.spaceBetween,
         children: [
           SizedBox(
             height: 60.0,
           ),
           Text(
             'Sign in to continue',
             style: TextStyle(color: Colors.grey, fontSize: 18.0),
           ),
           SizedBox(
             height: 20.0,
           ),
         ],
       );
 formUI() {
     return new Container(
       child: Stack(
         children: [
           ClipPath(
             clipper: BackgroundClipper(),
             child: Container(
               height: 400,
               padding: EdgeInsets.all(10.0),
               decoration: BoxDecoration(
                 borderRadius: BorderRadius.all(Radius.circular(40.0)),
                 color: Colors.white,
               ),
               child: Column(
                 mainAxisAlignment: MainAxisAlignment.center,
                 children: [
                   SizedBox(
                     height: 90.0,
                   ),
                   _showMobileInput(),
                   _showPasswordInput(),
                   new SizedBox(height: 10.0),
                   //_showForgotPasswordButton(),
                   //SizedBox(height: 10.0),
                 ],
               ),
             ),
           ),
           _showFormIcon(false),
           _showLoginPressIcon(),
         ],
       ),
     );
   }
 _showMobileInput() {
     return Padding(
       padding: const EdgeInsets.symmetric(vertical: 5.0, horizontal: 30.0),
       child: new TextFormField(
           controller: _mobileController,
           decoration: new InputDecoration(
             hintText: 'Mobile',
             labelText: 'Mobile',
           ),
           keyboardType: TextInputType.phone,
           onSaved: (str) {
             mobile = str;
           }),
     );
   }
 _showPasswordInput() {
     return Padding(
       padding: const EdgeInsets.symmetric(vertical: 5.0, horizontal: 30.0),
       child: TextFormField(
           controller: _passwordController,
           obscureText: visible,
           decoration: InputDecoration(
               hintText: 'Password',
               labelText: 'Password',
               suffix: InkWell(
                 child: Icon(
                   visible ? Icons.visibility_off : Icons.visibility,
                 ),
                 onTap: () {
                   setState(() {
                     visible = !visible;
                   });
                 },
               )),
           onSaved: (str) {
             password = str;
           }),
     );
   }
 _showForgotPasswordButton() {
     return Row(mainAxisAlignment: MainAxisAlignment.end, children: [
       GestureDetector(
         onTap: () {
 <code>    },     child: new Column(       mainAxisAlignment: MainAxisAlignment.spaceBetween,       children: <Widget>[         Container(             padding: EdgeInsets.only(right: 27.0),             child: FlatButton(               child: new Text('Forgot Password',                   style: TextStyle(                       color: Colors.orange,                       fontSize: 15.0,                       fontWeight: FontWeight.bold)),               onPressed: () {               },             ))       ],     ),   ) ]);</code>
 }
 _showFormIcon(bool changeColor) {
     return Row(
       mainAxisAlignment: MainAxisAlignment.center,
       children: [
         CircleAvatar(
           radius: 30.0,
           backgroundColor: changeColor
               ? Colors.white.withOpacity(0.2)
               : Colors.grey.withOpacity(0.2),
           child: Icon(Icons.person, color: Colors.black),
         ),
       ],
     );
   }
 /<em>_clearData() {     _mobileController.text = "";     _passwordController.text = "";   }</em>/
 _showLoginPressIcon() {
     return Container(
         height: 430,
         child: Align(
             alignment: Alignment.bottomCenter,
             child: CustomFloatForm(
                 icon: Icons.navigate_next,
                 isMini: false,
                 qrCallback: () {
                   _sendToServer();
                 })));
   }
 _sendToServer() {
     if (_key.currentState.validate()) {
       _key.currentState.save();
     } else {
       setState(() {
         _validate = true;
       });
     }
   }
 signUp() => Padding(
         padding: EdgeInsets.all(8.0),
         child: Row(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
             new Text("You don't have account?",
                 style: TextStyle(color: Colors.grey)),
             new FlatButton(
               child: new Text('Sign Up',
                   style: TextStyle(
                       color: Colors.orange,
                       //decoration: TextDecoration.underline,
                       fontSize: 15.0,
                       fontWeight: FontWeight.bold)),
               onPressed: () {},
             ),
           ],
         ),
       );
 }