animated_drawer 0.0.4
animated_drawer: ^0.0.4 copied to clipboard

A simple yet fully customizable drawer with animations for flutter.

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
128
likes
90
pub points
87%
popularity

A simple yet fully customizable drawer with animations for flutter.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter, matrix4_transform

More

Packages that depend on animated_drawer