Package selection guidance compiled from public package information, community data, and project usage.
slide_drawer is a Flutter package that simplifies the implementation of drawers with smooth sliding animations. It provides an easy-to-use API for integrating side navigation menus into Flutter apps, enhancing user experience with fluid transitions. Designed for developers seeking a lightweight and customizable drawer solution, it supports both left and right-side drawers with minimal setup. The package focuses on performance and aesthetics, making it ideal for apps requiring intuitive navigation. Its clean codebase and active maintenance ensure reliability across projects.
Use cases
Implementing side navigation menus
Adding animated drawer transitions
Creating responsive layouts with collapsible panels
Building mobile app dashboards
Enhancing UI interactivity with sliding effects
Key features
Smooth sliding animation
Support for left and right drawers
Minimal configuration required
Lightweight and performant
Customizable appearance and behavior
Suitable for
Mobile app developers
UI/UX designers seeking animation enhancements
Projects requiring simple drawer functionality
Flutter beginners exploring navigation patterns
Apps with dynamic sidebar content
Considerations
Limited to basic drawer features
No built-in support for nested drawers
May require additional styling for complex layouts
Not optimized for large-scale navigation structures
Depends on external dependencies for advanced customization
Original README
Original README snapshot from the linked source repository. Visit the repository for the latest content.
SlideDrawer
An easy way to use drawer in Flutter with cool sliding animation.
Getting Started
Add dependency in your flutter project.
$ flutter pub add slide_drawer
or
dependencies:slide_drawer:^1.0.3
Then run flutter pub get.
Example
You can see the example folder to learn many different ways of using SlideDrawer in your app.
Usage
As usual, we need to import the package.
import'package:slide_drawer/slide_drawer.dart';
Then wrap the app home page with SlideDrawer.
To use the basic SlideDrawer, you only need to define items (List of MenuItem) to generate menu in your drawer. The drawer will use your default theme color as drawer background, and theme brightness as drawer brightness.
classAppextendsStatelessWidget{
@overrideWidgetbuild(BuildContext context) {
returnMaterialApp(
title: title,
// SlideDrawer will use style from this theme
theme: ThemeData(
brightness: Brightness.dark,
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
// wrap your HomePage with SlideDrawer
home: SlideDrawer(
items: [
MenuItem('Home', onTap: (){}),
MenuItem('Project', onTap: (){}),
MenuItem('Favourite', onTap: (){}),
MenuItem('Profile', onTap: (){}),
MenuItem('Setting', onTap: (){}),
],
child: HomePage(),
),
);
}
}
Then set onPressed in your AppBar menu button to toggle SlideDrawer.
appBar: AppBar(
title: Text(title),
leading: IconButton(
icon: Icon(Icons.menu),
// call toggle from SlideDrawer to alternate between open and close// when pressed menu button
onPressed: () => SlideDrawer.of(context).toggle(),
),
),
SlideDrawer also come with parameter backgroundColor and backgroundGradient.
If we specify backgroundGradient, the drawer will use it as background. If not, it will use backgroundColor. If we also not specify backgroundColor, it will use the default theme color as background.
It's good practice to specify brightness (dark or light) if we use backgroundGradient or backgroundColor.
If we set dark color in your backgroundGradient or backgroundColor, use Brightness.dark.
If we set light color, use Brightness.light.
In the previous example, we use items and let the SlideDrawer generate menu in the content drawer.
But we can also set any custom widget as the content drawer.
If you have your own creative idea for the full widget inside the drawer, don't worry. We can use it in SlideDrawer by passing it to drawer. In this way, SlideDrawer will use style of custom drawer and ignore any value in backgroundColor, gradientColor, and brightness.
The default SlideDrawer animate home page by move it to the right (offsetFromRight default to 60), scale it, and rotate it at y axis with some small angle (pi / 24 radian or 180 / 24 degree = 7.5 degree).
If don't want to rotate, we can disable the rotation by setting isRotate to false.
We can also use custom curve and duration. The default values are linear and 300ms. We can specify curveReverse and durationReverse to change curve and duration of animation in the reverse direction.
