Improving User Experience in Flutter: Implementing Flutter Zoom Drawer

Flutter is a popular framework for mobile application development that developers can use to develop and build cross-platform apps quick and easily. Using Flutter framework, you can build apps that work on Android, iOS, Web, and Desktop with one source code.

There are a variety of available Flutter packages that you can use in you apps to add new diverse functionalities and features. For example, Flutter Zoom Drawer is a package that allows developers to create a zommable and customizable drawer to their apps with ease.

Using this package, you’ll be able to enhance the user experience of your app by providing a creative way for users to access additional content of features. It’s a very useful package that’s easy to set and use, and it brings great benefits in terms of adding visual appeal to apps.

In this post, we will explore how to use Flutter Zoom Drawer and illustrate that with a code example. We’ll start by setting up the package in Flutter app, and then move on to customizing its appearance and behavior.Then, we’ll discuss some common issues that are encountered by developers when using Zoom Drawer and how find out how to troubleshoot them.

Table of Contents

• Step-by-Step Guide on Setting Up Flutter Zoom Drawer
• Customizing the Look: Zoom Drawer Example
• Adding Interactivity using GestureDetector
• Troubleshooting Common Issues With Implementing Zoom Drawer in Flutter Apps
• Conclusion
• Further Reading

Step-by-Step Guide on Setting Up Flutter Zoom Drawer

In this section, we’ll go through the package setup process which includes adding the package to Flutter app, importing the necessary libraries, and basic widget creation.

1.  Add the latest version of  ‘flutter_zoom_drawer‘ package to the ‘pubspec.yaml‘ file in your app’s project. You can either do that by manually adding ‘flutter_zoom_drawer: ^3.0.3‘ (make sure to check the latest version) under the dependencies section OR use the terminal (which i recommend) to run the command ‘flutter pub add flutter_zoom_drawer‘.
2. Once done installing, make sure to run ‘flutter pub get‘
3. Next, import the package’s library in your dart file
   ‘import 'package:flutter_zoom_drawer/flutter_zoom_drawer.dart';‘
4. To create the drawer, use the widget “ZoomDrawer()”  and use its properties to define drawer’s content and main screen content, and customize the widget.  (we’ll talk about that in details in the next section)

Below is a very basic example of using ZoomDrawer:

ZoomDrawer(
   borderRadius: 25,
   animationCurve: Curves.easeInOut,
   animationDuration: Duration(milliseconds: 500),
   menuScreen: DrawerContent(),
   mainScreen: MainScreen(),
)

Customizing the Look: Zoom Drawer Example

One thing I love about this package is the flexibility when it comes to customizing how it looks and adding animation to it, not to mention how easy it is to do so. From the example below, you’ll learn how to implement zoom drawer and customize it up to your desire. We’ll be creating 3 dart files:

•  drawer_item_model.dart: a simple model class that holds variables for the menu items which are simple title and icon data.
• drawer_items.dart: this creates a list of drawer item models that we’ll be using in the menu drawer. Note that you can create the list in the main file but this helps keep you code clean and readable.
• zommable_drawer.dart: this is the main class where we’ll be doing the heavy work. It has 3 subclasses:
  • ZommableDrawer: returns a ZoomDrawer which we’ll use to personalize and customize the look and behavior or the drawer.
  • MainScreen: contains the content to be displayed in the main screen.
  • DrawerScreen: contains the content of the drawer itself.

1 Define a global controller variable to help us control the drawer
final ZoomDrawerController _controller = ZoomDrawerController();

2 Create ZoomableDrawer stateless widget

class ZoomableDrawer extends StatelessWidget {

  const ZoomableDrawer({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ZoomDrawer(
        style: DrawerStyle.defaultStyle,
        borderRadius: 30,
        menuBackgroundColor: Colors.blue.shade600,
        openCurve: Curves.linearToEaseOut,
        duration: const Duration(milliseconds:500),
        controller: _controller,
        angle: -12.0,
        mainScreenTapClose: true,
        showShadow: true,
        mainScreen: const MainScreen(),
        menuScreen:const  MenuScreen(),
      );
  }
}

In the code above, ‘menuScreen‘ is the widget that defines the drawer’s content, and ‘mainScreen‘ is the widget that defines the content of the main screen. the ‘angle’ is to specify the angle at which the drawer is opened or closed. If you set it to 0, then the drawer will be straight whereas it will open in the opposite direction and rotate -12 degrees from its original position if you set it to -12 or any other degree you set it to. The property ‘duration’ refers to the time length which the drawer animation takes when it opens or closes. ‘openCurve‘ property refers to the curve animation used when the drawer’s opening. The property ‘mainScreenTapClose‘ enables closing the drawer whenever the main screen is tapped if set to true. ‘showShadow‘ determines whether to display shadow behind the drawer when it’s opened. Finally, ‘controller‘ is an object that enables you to control the behavior of the drawer widget programmatically.

3 Create MainScreen stateful widget

class MainScreen extends StatefulWidget {
  const MainScreen({Key? key}) : super(key: key);

  @override
  State<MainScreen> createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
      appBar: AppBar(
        title: const Text('Zoom Drawer'),
        centerTitle: true,
        leading: IconButton(
          icon: const Icon(Icons.menu),
          onPressed: () {
            _controller.toggle!();
          },
        ),
      ),
      body: const Center(
        child: Text('This is the Main Screen')
      ),
    );
  }
}

The above code creates the content for the main screen which has an app bar and a simple Text widget. The app bar contains a title and a leading icon button that’s responsible for opening the drawer when it’s pressed. The method ‘_controller.toggle()‘ opens the zoom drawer once the menu icon is pressed by the user.

4 Create DrawerScreen stateful widget

class MenuScreen extends StatefulWidget {
  const MenuScreen({Key? key}) : super(key: key);

  @override
  State<MenuScreen> createState() => _MenuScreenState();
}

class _MenuScreenState extends State<MenuScreen> {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(top: 100.0, left: 8),
      child: ListView.builder(
        itemCount: items.length,
        itemBuilder: (BuildContext context, int index) {
          return  ListTile(
              title: Text(items[index].title),
              leading: Icon(items[index].icon),
            
          );
        },

      ),
    );
  }
}

The above code creates the widget that represents the content of the drawer. it returns a ListView.builder which uses the data from list of items we created  in ‘drawer_items.dart’ to create list tiles that display the menu items.

Adding Interactivity using GestureDetector

In this section, we’ll explore how we can add interactivity to the menu items to allow users access their features. For example, you may want to direct user to profile details when the user taps on the user menu item or maybe display some info based on the tapped item. Achieving this is actaully a piece of cake as you only have to wrap the list tile with a GestureDetector then specify what gestures to detect (tap, double tap, drag, etc) and what needs to be done when the gesture is detected.

return GestureDetector(
  onTap: () {
    //Navigator.push(context, MaterialPageRoute(builder: (context) => Screen()))
  },
  child: ListTile(
    title: Text(items[index].title),
    leading: Icon(items[index].icon),
  ),
);

In the above code, i simply wrapped the list tile with a gesture detector and added the onTap method to detects when the user taps on the menu item. Then in the body of the function, navigate the user to another screen. Now, one question you may ask is how to specify the name of the screen to direct the user to based on the tapped item. One approach you can take to achieve that is by adding another variable in ‘drawer_item_model.dart’ which has the route to the screen you want to direct the user to. For example

class DrawerItemModel {
  String title;
  IconData icon;
  String route;

  DrawerItemModel({required this.title, required this.icon, required this.route});
}

Then specify the route when you declare your list of items

DrawerItemModel(title: 'Profile', icon: Icons.person, route: 'UserScreen.dart')

Troubleshooting Common Issues With Implementing Zoom Drawer in Flutter Apps

There are several issues that you may encounter when implementing this widget. In this section, we’ll discuss these issues and suggest solutions to overcome them when faced.

1. Shadow is not visible: A problem you can encounter for two reasons. Either showShadow is not set to true, or you wrong setting for the shadow color. To solve this issue, always make sure that ‘showShadow’ is set to true and configure different colors for ‘mainScreen’ and ‘menuScreen’.
2. Incorrect position: There are several reasons this can happen but you can avoid by setting ‘startOffset’ and ‘endOffset’ properties of the widget. These properties control both starting and ending position so make sure they’re configured accurately.
3. Incorrect size: If, for some reason, the drawer widget appears isn’t in the right size, set the values for the properties ‘width’ and ‘height’ and check they’re set right.
4. Using duration incorrectly: You may encounter problems with the animation if the value for ‘duration’ property is incorrect. You can easily avoid that by checking your setting and ensuring that you’re using the right parameters . For example, it’s common to misuse milliseconds and microseconds especially when working fast.
5. Using openCurve wrongly: You could find that the animation is not appearing as you expected and this mostly happen due to choosing the wrong value. Therefore, check and make sure that the value is set correctly.
6. Incorrect use of controller: An example of this could be forgetting to initialize the controller before passing it which may result in an invisible drawer. To avoid that, ensure that the controller is properly initialized before using it in your app.

Conclusion

This brings an end to this post where we’ve explored the zoom drawer package and its benefits. This package provides a stunning and interactive look to mobile apps which in turn provides a better user experience. From set up, customization, to adding interactivity, I believe that you’ve got what you need to implement this in your own app with your own style. However, don’t forget to take the common issues into your consideration and try to avoid them as best as you can.

I hope this post has helped you to get an overview of this package and understand how to use it. Try implementing zoom drawer in your application and share your experience with us in the comments below. Or, if you already know how to use it, kindly share your tips with the readers :).

Further Reading

•  Zoom Drawer Package Documentation
• Tutorial  on Zoom Drawer