This article will show how to create a custom Flutter navigation drawer with the Flutter Zoom drawer package. Flutter interactive navigation drawer animation is made easy using the Flutter Zoom drawer package.
Navigation drawers are an essential part of mobile app design, providing users with easy access to app features and navigation options. While Flutter offers a default Drawer widget, creating a custom and interactive navigation drawer can enhance user experience significantly. In this article, we’ll explore how to implement a custom Flutter navigation drawer with smooth animations using the Flutter Zoom Drawer package.
What is the Flutter Zoom Drawer Package?
The Flutter Zoom Drawer package is a powerful tool for creating interactive and animated navigation drawers. It allows developers to add zoom-in and zoom-out animations to the main screen when the drawer is opened or closed. This creates a visually appealing and engaging user experience.
Key features of the Flutter Zoom Drawer package include:
- Smooth zoom-in/zoom-out animations.
- Highly customizable drawer behavior.
- Support for both left and right-side drawers.
- Gesture-based interactions (swipe to open/close).
To get started, you need to add the package to your project.
Adding the Flutter Zoom Drawer Package
In the pubspec.yml file, we need to add this flutter_zoom_drawer package dependency first
dependencies:
flutter_zoom_drawer: "<latest_release>"Then, run flutter pub get to install the package.
Implementation
Step 1: Setting Up the Project Structure
We’ll create a basic Flutter app with a home screen and a navigation drawer. The home screen will display some content, and the drawer will contain navigation options.
Step 2: Importing the Package
In your Dart file, import the Flutter Zoom Drawer package:
import 'package:flutter_zoom_drawer/flutter_zoom_drawer.dart';Step 3: Creating the Zoom Drawer Widget
The ZoomDrawer widget acts as the root of the navigation drawer. It manages the animation and interaction between the main screen and the drawer.
Here’s how to set up the ZoomDrawer:
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ZoomDrawer(
menuScreen: MenuScreen(), // The drawer content
mainScreen: MainScreen(), // The main content
borderRadius: 24.0, // Rounded corners for the main screen
showShadow: true, // Adds a shadow effect
angle: -12.0, // Rotation angle for the main screen
backgroundColor: Colors.grey[300], // Background color of the drawer
slideWidth: MediaQuery.of(context).size.width * 0.65, // Width of the drawer
openCurve: Curves.fastOutSlowIn, // Animation curve for opening
closeCurve: Curves.bounceIn, // Animation curve for closing
);
}
}Step 4: Building the Menu Screen
The MenuScreen contains the navigation options. You can customize it with a list of items, icons, and actions.
class MenuScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue,
body: SafeArea(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Menu',
style: TextStyle(fontSize: 24, color: Colors.white),
),
SizedBox(height: 20),
ListTile(
leading: Icon(Icons.home, color: Colors.white),
title: Text('Home', style: TextStyle(color: Colors.white)),
onTap: () {
// Navigate to the home screen
ZoomDrawer.of(context)?.close();
},
),
ListTile(
leading: Icon(Icons.settings, color: Colors.white),
title: Text('Settings', style: TextStyle(color: Colors.white)),
onTap: () {
// Navigate to settings
ZoomDrawer.of(context)?.close();
},
),
],
),
),
),
);
}
}Step 5: Building the Main Screen
The MainScreen is the primary content displayed when the drawer is closed. It includes a button to toggle the drawer.
class MainScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Zoom Drawer Example'),
leading: IconButton(
icon: Icon(Icons.menu),
onPressed: () {
ZoomDrawer.of(context)?.toggle(); // Toggle the drawer
},
),
),
body: Center(
child: Text(
'Welcome to the Main Screen!',
style: TextStyle(fontSize: 20),
),
),
);
}
}Step 6: Running the App
With everything set up, you can now run the app. When you press the menu button or swipe from the edge of the screen, the drawer will open with a smooth zoom animation.
Code Implementation
Here’s the complete code for the app:
import 'package:flutter/material.dart';
import 'package:flutter_zoom_drawer/flutter_zoom_drawer.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ZoomDrawer(
menuScreen: MenuScreen(),
mainScreen: MainScreen(),
borderRadius: 24.0,
showShadow: true,
angle: -12.0,
backgroundColor: Colors.grey[300],
slideWidth: MediaQuery.of(context).size.width * 0.65,
openCurve: Curves.fastOutSlowIn,
closeCurve: Curves.bounceIn,
);
}
}
class MenuScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue,
body: SafeArea(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Menu',
style: TextStyle(fontSize: 24, color: Colors.white),
),
SizedBox(height: 20),
ListTile(
leading: Icon(Icons.home, color: Colors.white),
title: Text('Home', style: TextStyle(color: Colors.white)),
onTap: () {
ZoomDrawer.of(context)?.close();
},
),
ListTile(
leading: Icon(Icons.settings, color: Colors.white),
title: Text('Settings', style: TextStyle(color: Colors.white)),
onTap: () {
ZoomDrawer.of(context)?.close();
},
),
],
),
),
),
);
}
}
class MainScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Zoom Drawer Example'),
leading: IconButton(
icon: Icon(Icons.menu),
onPressed: () {
ZoomDrawer.of(context)?.toggle();
},
),
),
body: Center(
child: Text(
'Welcome to the Main Screen!',
style: TextStyle(fontSize: 20),
),
),
);
}
}Code File
After adding this line you need to click on pub get, otherwise you need to run the flutter pub get command in the terminal.
flutter pub getafter running the command, go inside the lib folder and make three screens, one for the drawer where we will call both the main screen and as well as menu screen.
- drawer.dart
- main.dart
- menu.dart
https://github.com/nakshatrasinghh/Nav-Drawer-Animation
Conclusion
The Flutter Zoom Drawer package makes it incredibly easy to create a custom and interactive navigation drawer with smooth animations. By following the steps outlined in this article, you can enhance the user experience of your Flutter app with a visually appealing and functional navigation drawer.
Feel free to customize the drawer further by adding more screens, animations, or styling to match your app’s design. Happy coding!
I hope this blog will provide you with sufficient information in Trying up the Zoom Drawer in your flutter project. We will show you the Zoom Drawer is?, and work on it in your flutter applications, So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Final Note: Don’t forget to check out the official documentation for additional customization options and advanced usage.