Animated Drawer

A simple yet fully customizable drawer with animations for flutter.

Black Technology LinkedIn Banner (1)

Screenshots

Untitled_design-removebg-preview
4igeoh

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 NameDescriptionData TypeDefault Value
homePageContentWidget which will show data on Home Page.Widgetrequired
menuPageContentWidget which will show data on Menu Page, when the drawer is opened.Widgetrequired
backgroundGradientBackground colors of the drawerGradientrequired
shadowColorShadow color of the HomePage. Shadow is the widget which is behind HomePage and is animated with itColorrequired
openIconIcon displayed to open the drawer (It can accept Icon, Image.asset and Image.networkWidgetIcon(Icons.menu, color: Color(0xFF1f186f));
closeIconIcon displayed to open the drawer (It can accept Icon, Image.asset and Image.networkWidgetIcon(Icons.arrow_back_ios, color: Color(0xFF1f186f));
homePageXValueX-Cordinate Value to which Home Page Widget will translate in animation.double150.0
homePageYValueY-Cordinate Value to which Home Page Widget will translate in animation.double80.0
homePageAngleAngle Value to which Home Page Widget will rotate in animation.double-0.2
shadowXValueX-Cordinate Value to which Shadow Widget will translate in animation.double122.0
shadowYValueY-Cordinate Value to which Shadow Widget will translate in animation.double110.0
shadowAngleAngle Value to which Shadow Widget will rotate in animation.double-0.275
homePageSpeedTime duration of Home Page Widget in milliseconds till which animation will play.int250
shadowSpeedTime duration of Shadow Widget in milliseconds till which animation will play.int550

Libraries

animated_drawer
constants
first_layer
generic_bloc
home_page
home_page_bloc
runtime_variables
shadow
shadow_bloc
third_layer