Drawer In Flutter

Drawer In Flutter :

Drawer In Flutter is used to develop a drawer in tour flutter app.you can add multiple widgets into drawer.if we want to add any items in the drawer.we have need to give a child inside drawer() like this…

drawer: Drawer(
  child:,
),

for add a ListView as a child of Drawer Widget

drawer: Drawer(
  child: ListView(
  children: <Widget>[],
  ),
),

you can add multiple widgets inside the ListView

drawer: Drawer(
  child: ListView(
    children: <Widget>[
      ListTile(
        title: Text("Flutter"),
        trailing: Icon(Icons.arrow_forward),
      ),
      ListTile(
        title: Text("Tutorial"),
        trailing: Icon(Icons.arrow_forward),
      ),
    ],
  ),
),

you can add user profile in the top of the ListView in the Drawer as given in the screenshot.

Screenshot 1 :

Drawer In Flutter

Screenshot 2 :

Drawer In Flutter

UI Package:

UI Package Inside 2 Pakages

  • page Package
  • widget Package

appTheme.dart

import 'package:flutter/material.dart';

class AppTheme {
  AppTheme._();

  static const Color notWhite = Color(0xFFEDF0F2);
  static const Color nearlyWhite = Color(0xFFFEFEFE);
  static const Color white = Color(0xFFFFFFFF);
  static const Color nearlyBlack = Color(0xFF213333);
  static const Color grey = Color(0xFF3A5160);
  static const Color dark_grey = Color(0xFF313A44);

  static const Color darkText = Color(0xFF253840);
  static const Color darkerText = Color(0xFF17262A);
  static const Color lightText = Color(0xFF4A6572);
  static const Color deactivatedText = Color(0xFF767676);
  static const Color dismissibleBackground = Color(0xFF364A54);
  static const Color chipBackground = Color(0xFFEEF1F3);
  static const Color spacer = Color(0xFFF2F2F2);
  static const String fontName = 'WorkSans';

  static const TextTheme textTheme = TextTheme(
    display1: display1,
    headline: headline,
    title: title,
    subtitle: subtitle,
    body2: body2,
    body1: body1,
    caption: caption,
  );

  static const TextStyle display1 = TextStyle( // h4 -> display1
    fontFamily: fontName,
    fontWeight: FontWeight.bold,
    fontSize: 36,
    letterSpacing: 0.4,
    height: 0.9,
    color: darkerText,
  );

  static const TextStyle headline = TextStyle( // h5 -> headline
    fontFamily: fontName,
    fontWeight: FontWeight.bold,
    fontSize: 24,
    letterSpacing: 0.27,
    color: darkerText,
  );

  static const TextStyle title = TextStyle( // h6 -> title
    fontFamily: fontName,
    fontWeight: FontWeight.bold,
    fontSize: 16,
    letterSpacing: 0.18,
    color: darkerText,
  );

  static const TextStyle subtitle = TextStyle( // subtitle2 -> subtitle
    fontFamily: fontName,
    fontWeight: FontWeight.w400,
    fontSize: 14,
    letterSpacing: -0.04,
    color: darkText,
  );

  static const TextStyle body2 = TextStyle( // body1 -> body2
    fontFamily: fontName,
    fontWeight: FontWeight.w400,
    fontSize: 14,
    letterSpacing: 0.2,
    color: darkText,
  );

  static const TextStyle body1 = TextStyle( // body2 -> body1
    fontFamily: fontName,
    fontWeight: FontWeight.w400,
    fontSize: 16,
    letterSpacing: -0.05,
    color: darkText,
  );

  static const TextStyle caption = TextStyle( // Caption -> caption
    fontFamily: fontName,
    fontWeight: FontWeight.w400,
    fontSize: 12,
    letterSpacing: 0.2,
    color: lightText, // was lightText
  );

}

– page Package

dashboard.dart

import 'package:flutter/material.dart';

import '../appTheme.dart';
import 'feedback.dart';

class DashboardPage extends StatefulWidget {
  DashboardPage({Key key}) : super(key: key);

  @override
  _DashboardState createState() => _DashboardState();
}

class _DashboardState extends State<DashboardPage>
    with TickerProviderStateMixin {
  List<HomeList> homeList = HomeList.homeList;
  AnimationController animationController;
  bool multiple = false;

  @override
  void initState() {
    animationController = AnimationController(
        duration: Duration(milliseconds: 2000), vsync: this);
    super.initState();
  }

  Future<bool> getData() async {
    await Future.delayed(const Duration(milliseconds: 0));
    return true;
  }

  @override
  void dispose() {
    animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: AppTheme.white,
        body: FutureBuilder(
            future: getData(),
            builder: (context, snapshot) {
              if (!snapshot.hasData) {
                return SizedBox();
              } else {
                return Padding(
                    padding: EdgeInsets.only(
                        top: MediaQuery.of(context).padding.top),
                    child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          appBar(),
                          Expanded(
                              child: FutureBuilder(
                                  future: getData(),
                                  builder: (context, snapshot) {
                                    if (!snapshot.hasData) {
                                      return SizedBox();
                                    } else {
                                      return GridView(
                                          padding: EdgeInsets.only(
                                              top: 0, left: 12, right: 12),
                                          physics: BouncingScrollPhysics(),
                                          scrollDirection: Axis.vertical,
                                          children: List.generate(
                                              homeList.length, (index) {
                                            var count = homeList.length;
                                            var animation =
                                                Tween(begin: 0.0, end: 1.0)
                                                    .animate(
                                              CurvedAnimation(
                                                parent: animationController,
                                                curve: Interval(
                                                    (1 / count) * index, 1.0,
                                                    curve:
                                                        Curves.fastOutSlowIn),
                                              ),
                                            );
                                            animationController.forward();
                                            return HomeListView(
                                                animation: animation,
                                                animationController:
                                                    animationController,
                                                listData: homeList[index],
                                                callBack: () {
                                                  Navigator.push(
                                                      context,
                                                      MaterialPageRoute(
                                                        builder: (context) =>
                                                            homeList[index]
                                                                .navigateScreen,
                                                      ));
                                                });
                                          }),
                                          gridDelegate:
                                              SliverGridDelegateWithFixedCrossAxisCount(
                                            crossAxisCount: multiple ? 2 : 1,
                                            mainAxisSpacing: 12.0,
                                            crossAxisSpacing: 12.0,
                                            childAspectRatio: 1.5,
                                          ));
                                    }
                                  }))
                        ]));
              }
            }));
  }

  Widget appBar() {
    return SizedBox(
        height: AppBar().preferredSize.height,
        child:
            Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
          Padding(
            padding: EdgeInsets.only(top: 8, left: 8),
            child: Container(
              width: AppBar().preferredSize.height - 8,
              height: AppBar().preferredSize.height - 8,
            ),
          ),
          Expanded(
            child: Center(
              child: Padding(
                padding: const EdgeInsets.only(top: 4),
                child: Text(
                  "Flutter UI",
                  style: new TextStyle(
                    fontSize: 22,
                    color: AppTheme.darkText,
                    fontWeight: FontWeight.w700,
                  ),
                ),
              ),
            ),
          ),
          Padding(
              padding: EdgeInsets.only(top: 8, right: 8),
              child: Container(
                  width: AppBar().preferredSize.height - 8,
                  height: AppBar().preferredSize.height - 8,
                  color: Colors.white,
                  child: Material(
                      color: Colors.transparent,
                      child: InkWell(
                          borderRadius: new BorderRadius.circular(
                              AppBar().preferredSize.height),
                          child: Icon(
                            multiple ? Icons.dashboard : Icons.view_agenda,
                            color: AppTheme.dark_grey,
                          ),
                          onTap: () {
                            setState(() {
                              multiple = !multiple;
                            });
                          }))))
        ]));
  }
}

class HomeListView extends StatelessWidget {
  final HomeList listData;
  final VoidCallback callBack;
  final AnimationController animationController;
  final Animation animation;

  const HomeListView(
      {Key key,
      this.listData,
      this.callBack,
      this.animationController,
      this.animation})
      : super(key: key);
  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
        animation: animationController,
        builder: (BuildContext context, Widget child) {
          return FadeTransition(
              opacity: animation,
              child: new Transform(
                  transform: new Matrix4.translationValues(
                      0.0, 50 * (1.0 - animation.value), 0.0),
                  child: AspectRatio(
                      aspectRatio: 1.5,
                      child: ClipRRect(
                          borderRadius: BorderRadius.all(Radius.circular(4.0)),
                          child: Stack(
                              alignment: AlignmentDirectional.center,
                              children: <Widget>[
                                Image.asset(
                                  listData.imagePath,
                                  fit: BoxFit.cover,
                                ),
                                Material(
                                    color: Colors.transparent,
                                    child: InkWell(
                                        splashColor:
                                            Colors.grey.withOpacity(0.2),
                                        borderRadius: BorderRadius.all(
                                            Radius.circular(4.0)),
                                        onTap: () {
                                          callBack();
                                        }))
                              ])))));
        });
  }
}

class HomeList {
  Widget navigateScreen;
  String imagePath;

  HomeList({
    this.navigateScreen,
    this.imagePath = '',
  });

  static List<HomeList> homeList = [
    HomeList(
      imagePath: "assets/images/feedback.png",
      navigateScreen: FeedbackPage(),
    )
  ];
}

feedback.dart

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

class FeedbackPage extends StatefulWidget {
  @override
  _FeedbackState createState() => _FeedbackState();
}

class _FeedbackState extends State<FeedbackPage> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: AppTheme.nearlyWhite,
      child: SafeArea(
        top: false,
        child: Scaffold(
          backgroundColor: AppTheme.nearlyWhite,
          body: SingleChildScrollView(
            child: SizedBox(
              height: MediaQuery.of(context).size.height,
              child: Column(
                children: <Widget>[
                  Container(
                    padding: EdgeInsets.only(
                        top: MediaQuery.of(context).padding.top,
                        left: 16,
                        right: 16),
                    child: Image.asset("assets/images/feedback.png"),
                  ),
                  Container(
                    padding: EdgeInsets.only(top: 8),
                    child: Text(
                      'Your FeedBack',
                      style: TextStyle(
                        fontSize: 20,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                  Container(
                    padding: EdgeInsets.only(top: 16),
                    child: Text(
                      "Give your best time for this moment.",
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        fontSize: 16,
                      ),
                    ),
                  ),
                  _buildComposer(),
                  Padding(
                    padding: const EdgeInsets.only(top: 16),
                    child: Center(
                      child: Container(
                        width: 120,
                        height: 40,
                        decoration: BoxDecoration(
                          color: Colors.blue,
                          borderRadius: BorderRadius.all(Radius.circular(4.0)),
                          boxShadow: <BoxShadow>[
                            BoxShadow(
                                color: Colors.grey.withOpacity(0.6),
                                offset: Offset(4, 4),
                                blurRadius: 8.0),
                          ],
                        ),
                        child: Material(
                          color: Colors.transparent,
                          child: InkWell(
                            onTap: () {
                              FocusScope.of(context).requestFocus(FocusNode());
                            },
                            child: Center(
                              child: Padding(
                                padding: const EdgeInsets.all(4.0),
                                child: Text(
                                  'Send',
                                  style: TextStyle(
                                    fontWeight: FontWeight.w500,
                                    color: Colors.white,
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ),
                      ),
                    ),
                  )
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildComposer() {
    return Padding(
      padding: EdgeInsets.only(top: 16, left: 32, right: 32),
      child: Container(
        decoration: new BoxDecoration(
          color: AppTheme.white,
          borderRadius: new BorderRadius.circular(8),
          boxShadow: <BoxShadow>[
            BoxShadow(
                color: Colors.grey.withOpacity(0.8),
                offset: Offset(4, 4),
                blurRadius: 8),
          ],
        ),
        child: new ClipRRect(
          borderRadius: new BorderRadius.circular(25),
          child: Container(
            padding: EdgeInsets.all(4.0),
            constraints: BoxConstraints(minHeight: 80, maxHeight: 160),
            color: AppTheme.white,
            child: SingleChildScrollView(
              padding: EdgeInsets.only(left: 10, right: 10, top: 0, bottom: 0),
              child: TextField(
                maxLines: null,
                onChanged: (String txt) {},
                style: TextStyle(
                  fontFamily: AppTheme.fontName,
                  fontSize: 16,
                  color: AppTheme.dark_grey,
                ),
                cursorColor: Colors.blue,
                decoration: new InputDecoration(
                    border: InputBorder.none,
                    hintText: "Enter your feedback..."),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

navigation_home.dart

import 'package:flutter/material.dart';
import 'package:mobex/ui/widget/drawer/drawerUserController.dart';
import 'package:mobex/ui/widget/drawer/homeDrawer.dart';

import '../appTheme.dart';
import 'dashboard.dart';
import 'feedback.dart';

class NavigationHomePage extends StatefulWidget {
  @override
  _NavigationHomeState createState() => _NavigationHomeState();
}

class _NavigationHomeState extends State<NavigationHomePage> {
  Widget screenView;
  DrawerIndex drawerIndex;
  AnimationController sliderAnimationController;

  @override
  void initState() {
    drawerIndex = DrawerIndex.DASHBOARD;
    screenView = DashboardPage();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        color: AppTheme.nearlyWhite,
        child: SafeArea(
            top: false,
            bottom: false,
            child: Scaffold(
                backgroundColor: AppTheme.nearlyWhite,
                body: DrawerUserController(
                  screenIndex: drawerIndex,
                  drawerWidth: MediaQuery.of(context).size.width * 0.65,
                  animationController:
                      (AnimationController animationController) {
                    sliderAnimationController = animationController;
                  },
                  onDrawerCall: (DrawerIndex drawerIndex) {
                    changeIndex(drawerIndex);
                  },
                  screenView: screenView,
                ))));
  }

  void changeIndex(DrawerIndex drawerIndex) {
    if (this.drawerIndex != drawerIndex) {
      this.drawerIndex = drawerIndex;

      if (drawerIndex == DrawerIndex.DASHBOARD) {
        setState(() {
          screenView = DashboardPage();
        });
      } else if (drawerIndex == DrawerIndex.ABOUT) {
        setState(() {
          screenView = FeedbackPage();
        });
      } else if (drawerIndex == DrawerIndex.FAQ) {
        setState(() {
          screenView = Container();
        });
      } else if (drawerIndex == DrawerIndex.TC) {
        setState(() {
          screenView = Container();
        });
      } else if (drawerIndex == DrawerIndex.PRIVACY_POLICY) {
        setState(() {
          screenView = Container();
        });
      } else if (drawerIndex == DrawerIndex.CONTACT_US) {
        setState(() {
          screenView = Container();
        });
      }
    }
  }
}

– Widget Package

drawerUserController.dart

import 'package:flutter/material.dart';

import '../../appTheme.dart';
import 'homeDrawer.dart';

class DrawerUserController extends StatefulWidget {
  final double drawerWidth;
  final Function(DrawerIndex) onDrawerCall;
  final Widget screenView;
  final Function(AnimationController) animationController;
  final Function(bool) drawerIsOpen;
  final AnimatedIconData animatedIconData;
  final Widget menuView;
  final DrawerIndex screenIndex;

  const DrawerUserController({
    Key key,
    this.drawerWidth: 250,
    this.onDrawerCall,
    this.screenView,
    this.animationController,
    this.animatedIconData: AnimatedIcons.arrow_menu,
    this.menuView,
    this.drawerIsOpen,
    this.screenIndex,
  }) : super(key: key);
  @override
  _DrawerUserControllerState createState() => _DrawerUserControllerState();
}

class _DrawerUserControllerState extends State<DrawerUserController>
    with TickerProviderStateMixin {
  ScrollController scrollController;
  AnimationController iconAnimationController;
  AnimationController animationController;

  double scrolloffset = 0.0;
  bool isSetDawer = false;

  @override
  void initState() {
    animationController = AnimationController(
        duration: Duration(milliseconds: 1000), vsync: this);
    iconAnimationController =
        AnimationController(vsync: this, duration: Duration(milliseconds: 0));
    iconAnimationController.animateTo(1.0,
        duration: Duration(milliseconds: 0), curve: Curves.fastOutSlowIn);
    scrollController =
        ScrollController(initialScrollOffset: widget.drawerWidth);
    scrollController
      ..addListener(() {
        if (scrollController.offset <= 0) {
          if (scrolloffset != 1.0) {
            setState(() {
              scrolloffset = 1.0;
              try {
                widget.drawerIsOpen(true);
              } catch (e) {}
            });
          }
          iconAnimationController.animateTo(0.0,
              duration: Duration(milliseconds: 0), curve: Curves.linear);
        } else if (scrollController.offset > 0 &&
            scrollController.offset < widget.drawerWidth) {
          iconAnimationController.animateTo(
              (scrollController.offset * 100 / (widget.drawerWidth)) / 100,
              duration: Duration(milliseconds: 0),
              curve: Curves.linear);
        } else if (scrollController.offset <= widget.drawerWidth) {
          if (scrolloffset != 0.0) {
            setState(() {
              scrolloffset = 0.0;
              try {
                widget.drawerIsOpen(false);
              } catch (e) {}
            });
          }
          iconAnimationController.animateTo(1.0,
              duration: Duration(milliseconds: 0), curve: Curves.linear);
        }
      });
    getInitState();
    super.initState();
  }

  Future<bool> getInitState() async {
    await Future.delayed(const Duration(milliseconds: 300));
    try {
      widget.animationController(iconAnimationController);
    } catch (e) {}
    await Future.delayed(const Duration(milliseconds: 100));
    scrollController.jumpTo(
      widget.drawerWidth,
    );
    setState(() {
      isSetDawer = true;
    });
    return true;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: AppTheme.white,
        body: SingleChildScrollView(
            controller: scrollController,
            scrollDirection: Axis.horizontal,
            physics: PageScrollPhysics(parent: ClampingScrollPhysics()),
            child: Opacity(
                opacity: isSetDawer ? 1 : 0,
                child: SizedBox(
                    height: MediaQuery.of(context).size.height,
                    width:
                        MediaQuery.of(context).size.width + widget.drawerWidth,
                    child: Row(children: <Widget>[
                      SizedBox(
                          width: widget.drawerWidth,
                          height: MediaQuery.of(context).size.height,
                          child: AnimatedBuilder(
                              animation: iconAnimationController,
                              builder: (BuildContext context, Widget child) {
                                return new Transform(
                                    transform: new Matrix4.translationValues(
                                        scrollController.offset, 0.0, 0.0),
                                    child: SizedBox(
                                        height:
                                            MediaQuery.of(context).size.height,
                                        width: widget.drawerWidth,
                                        child: HomeDrawer(
                                            screenIndex:
                                                widget.screenIndex == null
                                                    ? DrawerIndex.DASHBOARD
                                                    : widget.screenIndex,
                                            iconAnimationController:
                                                iconAnimationController,
                                            callBackIndex:
                                                (DrawerIndex indexType) {
                                              onDrawerClick();
                                              try {
                                                widget.onDrawerCall(indexType);
                                              } catch (e) {}
                                            })));
                              })),
                      SizedBox(
                          width: MediaQuery.of(context).size.width,
                          height: MediaQuery.of(context).size.height,
                          child: Container(
                              decoration: BoxDecoration(
                                  color: AppTheme.white,
                                  boxShadow: <BoxShadow>[
                                    BoxShadow(
                                        color: AppTheme.grey.withOpacity(0.6),
                                        blurRadius: 20),
                                  ]),
                              child: Stack(children: <Widget>[
                                IgnorePointer(
                                  ignoring: scrolloffset == 1 ? true : false,
                                  child: widget.screenView == null
                                      ? Container(
                                          color: Colors.white,
                                        )
                                      : widget.screenView,
                                ),
                                scrolloffset == 1.0
                                    ? InkWell(onTap: () {
                                        onDrawerClick();
                                      })
                                    : SizedBox(),
                                Padding(
                                    padding: EdgeInsets.only(
                                        top:
                                            MediaQuery.of(context).padding.top +
                                                8,
                                        left: 8),
                                    child: SizedBox(
                                        width:
                                            AppBar().preferredSize.height - 8,
                                        height:
                                            AppBar().preferredSize.height - 8,
                                        child: Material(
                                            color: Colors.transparent,
                                            child: InkWell(
                                                borderRadius:
                                                    new BorderRadius.circular(
                                                        AppBar()
                                                            .preferredSize
                                                            .height),
                                                child: Center(
                                                  child: widget.menuView != null
                                                      ? widget.menuView
                                                      : AnimatedIcon(
                                                          icon: widget.animatedIconData !=
                                                                  null
                                                              ? widget
                                                                  .animatedIconData
                                                              : AnimatedIcons
                                                                  .arrow_menu,
                                                          progress:
                                                              iconAnimationController),
                                                ),
                                                onTap: () {
                                                  FocusScope.of(context)
                                                      .requestFocus(
                                                          FocusNode());
                                                  onDrawerClick();
                                                }))))
                              ])))
                    ])))));
  }

  void onDrawerClick() {
    if (scrollController.offset != 0.0) {
      scrollController.animateTo(
        0.0,
        duration: Duration(milliseconds: 400),
        curve: Curves.fastOutSlowIn,
      );
    } else {
      scrollController.animateTo(
        widget.drawerWidth,
        duration: Duration(milliseconds: 400),
        curve: Curves.fastOutSlowIn,
      );
    }
  }
}

homeDrawer.dart

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

class HomeDrawer extends StatefulWidget {
  final AnimationController iconAnimationController;
  final DrawerIndex screenIndex;
  final Function(DrawerIndex) callBackIndex;
  HomeDrawer(
      {Key key,
      this.screenIndex,
      this.iconAnimationController,
      this.callBackIndex})
      : super(key: key);

  @override
  _HomeDrawerState createState() => _HomeDrawerState();
}

class _HomeDrawerState extends State<HomeDrawer> {
  List<DrawerList> drawerList;
  @override
  void initState() {
    setDrawer();
    super.initState();
  }

  void setDrawer() {
    drawerList = [
      DrawerList(
        index: DrawerIndex.DASHBOARD,
        labelName: 'Dashboard',
        icon: new Icon(Icons.home),
      ),
      DrawerList(
        index: DrawerIndex.ABOUT,
        labelName: 'About',
        icon: new Icon(Icons.help),
      ),
      DrawerList(
        index: DrawerIndex.FAQ,
        labelName: "Faq's",
        isAssetsImage: false,
        icon: new Icon(Icons.group),
      ),
      DrawerList(
        index: DrawerIndex.TC,
        labelName: 'Terms and Condition',
        icon: new Icon(Icons.group),
      ),
      DrawerList(
        index: DrawerIndex.PRIVACY_POLICY,
        labelName: 'Privacy Policy',
        icon: new Icon(Icons.share),
      ),
      DrawerList(
        index: DrawerIndex.CONTACT_US,
        labelName: 'Contact Us',
        icon: new Icon(Icons.info),
      ),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppTheme.white.withOpacity(0.5),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          Container(
            width: double.infinity,
            padding: EdgeInsets.only(top: 40.0),
            child: Container(
              padding: EdgeInsets.all(16.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                  AnimatedBuilder(
                      animation: widget.iconAnimationController,
                      builder: (BuildContext context, Widget child) {
                        return new ScaleTransition(
                            scale: new AlwaysStoppedAnimation(1.0 -
                                (widget.iconAnimationController.value) * 0.2),
                            child: RotationTransition(
                                turns: new AlwaysStoppedAnimation(
                                    Tween(begin: 0.0, end: 24.0)
                                            .animate(CurvedAnimation(
                                                parent: widget
                                                    .iconAnimationController,
                                                curve: Curves.fastOutSlowIn))
                                            .value /
                                        360),
                                child: Container(
                                    height: 90,
                                    width: 90,
                                    decoration: BoxDecoration(
                                      shape: BoxShape.circle,
                                      boxShadow: <BoxShadow>[
                                        BoxShadow(
                                            color:
                                                AppTheme.grey.withOpacity(0.6),
                                            offset: Offset(2.0, 4.0),
                                            blurRadius: 8),
                                      ],
                                    ),
                                    child: ClipRRect(
                                        borderRadius: BorderRadius.all(
                                            Radius.circular(50.0)),
                                        child: CircleAvatar(
                                          backgroundImage: ExactAssetImage(
                                              'assets/images/feedback.png'),
                                          minRadius: 90,
                                          maxRadius: 150,
                                        )))));
                      }),
                  Padding(
                    padding: const EdgeInsets.only(top: 8, left: 4),
                    child: Text(
                      "Flutter Tutorial",
                      style: TextStyle(
                        fontWeight: FontWeight.w600,
                        color: AppTheme.grey,
                        fontSize: 15,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
          SizedBox(
            height: 4,
          ),
          Divider(
            height: 1,
            color: AppTheme.grey.withOpacity(0.6),
          ),
          Expanded(
            child: ListView.builder(
              physics: BouncingScrollPhysics(),
              padding: EdgeInsets.all(0.0),
              itemCount: drawerList.length,
              itemBuilder: (context, index) {
                return inkwell(drawerList[index]);
              },
            ),
          ),
          Divider(
            height: 1,
            color: AppTheme.grey.withOpacity(0.6),
          ),
          Column(
            children: <Widget>[
              ListTile(
                title: new Text(
                  "Logout",
                  style: new TextStyle(
                    fontFamily: AppTheme.fontName,
                    fontWeight: FontWeight.w600,
                    fontSize: 16,
                    color: AppTheme.darkText,
                  ),
                  textAlign: TextAlign.left,
                ),
                trailing: new Icon(
                  Icons.power_settings_new,
                  color: Colors.red,
                ),
                onTap: () {},
              ),
              SizedBox(
                height: MediaQuery.of(context).padding.bottom,
              )
            ],
          ),
        ],
      ),
    );
  }

  Widget inkwell(DrawerList listData) {
    return Material(
        color: Colors.transparent,
        child: InkWell(
            splashColor: Colors.transparent,
            highlightColor: Colors.transparent,
            onTap: () {
              navigation(listData.index);
            },
            child: Stack(children: <Widget>[
              Container(
                  padding: EdgeInsets.only(top: 8.0, bottom: 8.0),
                  child: Row(children: <Widget>[
                    Container(
                      width: 6.0,
                      height: 46.0,
                    ),
                    Padding(
                      padding: EdgeInsets.all(4.0),
                    ),
                    listData.isAssetsImage
                        ? Container(
                            width: 24,
                            height: 24,
                            child: Image.asset(listData.imageName,
                                color: widget.screenIndex == listData.index
                                    ? Colors.black
                                    : AppTheme.nearlyBlack),
                          )
                        : new Icon(listData.icon.icon,
                            color: widget.screenIndex == listData.index
                                ? Colors.black
                                : AppTheme.nearlyBlack),
                    Padding(
                      padding: EdgeInsets.all(4.0),
                    ),
                    new Text(
                      listData.labelName,
                      style: new TextStyle(
                        fontWeight: FontWeight.w500,
                        fontSize: 15,
                        color: widget.screenIndex == listData.index
                            ? Colors.black
                            : AppTheme.nearlyBlack,
                      ),
                      textAlign: TextAlign.left,
                    )
                  ])),
              widget.screenIndex == listData.index
                  ? AnimatedBuilder(
                      animation: widget.iconAnimationController,
                      builder: (BuildContext context, Widget child) {
                        return new Transform(
                            transform: new Matrix4.translationValues(
                                (MediaQuery.of(context).size.width * 0.75 -
                                        64) *
                                    (1.0 -
                                        widget.iconAnimationController.value -
                                        1.0),
                                0.0,
                                0.0),
                            child: Padding(
                                padding: EdgeInsets.only(top: 8, bottom: 8),
                                child: Container(
                                    width: MediaQuery.of(context).size.width *
                                            0.75 -
                                        64,
                                    height: 46,
                                    decoration: BoxDecoration(
                                        color: Colors.grey.withOpacity(0.1),
                                        borderRadius: new BorderRadius.only(
                                          topLeft: Radius.circular(0),
                                          topRight: Radius.circular(28),
                                          bottomLeft: Radius.circular(0),
                                          bottomRight: Radius.circular(28),
                                        )))));
                      })
                  : SizedBox()
            ])));
  }

  void navigation(DrawerIndex indexScreen) async {
    widget.callBackIndex(indexScreen);
  }
}

enum DrawerIndex { DASHBOARD, ABOUT, FAQ, TC, PRIVACY_POLICY, CONTACT_US }

class DrawerList {
  String labelName;
  Icon icon;
  bool isAssetsImage;
  String imageName;
  DrawerIndex index;

  DrawerList({
    this.isAssetsImage = false,
    this.labelName = '',
    this.icon,
    this.index,
    this.imageName = '',
  });
}

pubspec.yaml

name: mobex
description: A new Flutter application.

environment:
  sdk: ">=2.5.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons:
  font_awesome_flutter:
  smooth_star_rating:
  intl:

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: true

  assets:
    - assets/images/

main.dart

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

import 'ui/appTheme.dart';
import 'ui/page/navigation_home.dart';

void main() {
  SystemChrome.setPreferredOrientations(
          [DeviceOrientation.portraitUp, DeviceOrientation.portraitDown])
      .then((_) => runApp(new MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
      statusBarIconBrightness: Brightness.dark,
      statusBarBrightness:
          Platform.isAndroid ? Brightness.dark : Brightness.light,
      systemNavigationBarColor: Colors.white,
      systemNavigationBarDividerColor: Colors.grey,
      systemNavigationBarIconBrightness: Brightness.dark,
    ));
    return MaterialApp(
      title: 'Flutter',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.deepOrange,
        textTheme: AppTheme.textTheme,
        platform: TargetPlatform.iOS,
      ),
      home: NavigationHomePage(),
    );
  }
}

The flutter tutorial  is a website that bring you the latest and amazing resources of code. All the languages codes are included in this website. The languages like flutter, android, java,kotlin etc.with the help of this languages any user can develop the beautiful application

For more information about Flutter. visit www.fluttertutorial.in