Animated Drawer

A simple yet fully customizable drawer with animations for flutter.

Screenshots

Salient Features

• Set speed of animations.
• Set coordinates of X-Axis and Y-Axis to which widget will translate.
• Set Angle of rotation to which widget will rotate.
• Set icon to be shown to open drawer and close drawer.
• Supports gradient colors.
• Support full customization of widgets
• Any type of widget can be passed in HomePageContent and MenuPageContent.
• Shadow Widget to enhance the presentation of drawer.
• Shadow Widget can be customized.

Usage

AnimatedDrawer(
      homePageXValue: 150,
      homePageYValue: 80,
      homePageAngle: -0.2,
      homePageSpeed: 250,
      shadowXValue: 122,
      shadowYValue: 110,
      shadowAngle: -0.275,
      shadowSpeed: 550,
      openIcon: Icon(Icons.menu_open, color: Color(0xFF1f186f)),
      closeIcon: Icon(Icons.arrow_back_ios, color: Color(0xFF1f186f)),
      shadowColor: Color(0xFF4c41a3),
      backgroundGradient: LinearGradient(
        colors: [Color(0xFF4c41a3), Color(0xFF1f186f)],
      ),
      menuPageContent: Padding(
        padding: const EdgeInsets.only(top: 100.0, left: 15),
        child: Container(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              FlutterLogo(
                size: MediaQuery.of(context).size.width / 4,
              ),
              Row(
                children: [
                  Text(
                    "FLUTTER",
                    style: TextStyle(
                        fontSize: 17,
                        color: Colors.white,
                        fontWeight: FontWeight.bold),
                  ),
                  Text(
                    "HOLIC",
                    style: TextStyle(
                        fontSize: 17,
                        color: Colors.blue[200],
                        fontWeight: FontWeight.bold),
                  )
                ],
              ),
              Padding(
                padding: EdgeInsets.only(bottom: 40),
              ),
              Text(
                "Home Screen",
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
              Padding(
                padding: EdgeInsets.only(bottom: 20),
              ),
              Text(
                "Screen 2",
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
              Padding(
                padding: EdgeInsets.only(bottom: 20),
              ),
              Divider(
                color: Color(0xFF5950a0),
                thickness: 2,
              ),
              Padding(
                padding: EdgeInsets.only(bottom: 20),
              ),
              Text(
                "About",
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
            ],
          ),
        ),
      ),
      homePageContent: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        color: Colors.blue[200],
        child: Center(
          child: Image.network(
            "https://user-images.githubusercontent.com/38032118/105316779-2a480980-5be3-11eb-900e-18fcd599493d.png",
            height: MediaQuery.of(context).size.height / 2,
          ),
        ),
      ),
    );

Animated Drawer Parameters

Parameter Name	Description	Data Type	Default Value
homePageContent	Widget which will show data on Home Page.	Widget	required
menuPageContent	Widget which will show data on Menu Page, when the drawer is opened.	Widget	required
backgroundGradient	Background colors of the drawer	Gradient	required
shadowColor	Shadow color of the HomePage. Shadow is the widget which is behind HomePage and is animated with it	Color	required
openIcon	Icon displayed to open the drawer (It can accept Icon, Image.asset and Image.network	Widget	Icon(Icons.menu, color: Color(0xFF1f186f));
closeIcon	Icon displayed to open the drawer (It can accept Icon, Image.asset and Image.network	Widget	Icon(Icons.arrow_back_ios, color: Color(0xFF1f186f));
homePageXValue	X-Cordinate Value to which Home Page Widget will translate in animation.	double	150.0
homePageYValue	Y-Cordinate Value to which Home Page Widget will translate in animation.	double	80.0
homePageAngle	Angle Value to which Home Page Widget will rotate in animation.	double	-0.2
shadowXValue	X-Cordinate Value to which Shadow Widget will translate in animation.	double	122.0
shadowYValue	Y-Cordinate Value to which Shadow Widget will translate in animation.	double	110.0
shadowAngle	Angle Value to which Shadow Widget will rotate in animation.	double	-0.275
homePageSpeed	Time duration of Home Page Widget in milliseconds till which animation will play.	int	250
shadowSpeed	Time duration of Shadow Widget in milliseconds till which animation will play.	int	550