Awesome menu with Zoom drawer

Hello there, welcome to another tutorial/tryout by yours truly.

Before I continue I just want to say this: One Piece is the G.O.A.T of Anime!

So I was browsing through dribble and I saw a very nice app UI and I was like: I like this, I’ll want to create this, that lead me to start looking for possibilities to do this. I came across an awesome package called Zoom drawer. I decided to check it out and it was a wonderful XP I could feel my chakra building up.

Photo by Tim Mossholder on Unsplash

Already I believe you know how to create a Flutter App and what Flutter is about, so I am going to dive into the codes. We will add the package to our app:

flutter_zoom_drawer: ^2.0.2+4

create two more dart files, I have: main.dart, home.dart, menu.dart.

Refactor the main.dart, then create classes accordingly in those files you created and import them to main.dart with the zoom package also:

import 'package:flutter_zoom_drawer/flutter_zoom_drawer.dart';

import 'home.dart';
import 'menu.dart';

create a variable for zoom inside _MyHomePageState class:

class _MyHomePageState extends State<MyHomePage> {
...
final _drawerController = ZoomDrawerController();
}

Then in the build method, change it to this:

return Scaffold(
  body: ZoomDrawer(
    controller: _drawerController,
    style: DrawerStyle.Style1,
    menuScreen: MenuScreen(),
    mainScreen: Home(title: "Home", zoomController: _drawerController,),
    borderRadius: 24.0,
    showShadow: true,
    angle: 0.0,
    backgroundColor: Colors.grey[300],
    slideWidth: MediaQuery.of(context).size.width *
        (ZoomDrawer.isRTL() ? .45 : 0.65),
    openCurve: Curves.fastOutSlowIn,
    closeCurve: Curves.bounceIn,
  ),
);

controller : this is the controller to have access to the open/close/toggle function of the drawer.
menuScreen : Screen containing the menu screen.
mainScreen : Screen containing the main screen
You can check the package out to read more.

Now let’s fix up the menu and main screens, ahhh today I’m following Christiano Ronaldo, I’m drinking water!

I will use gradient colors as my background, now how do we do that?
Well that’s why you have me as your Kakashi Sensei :)

Container(
  decoration: BoxDecoration(
      gradient: LinearGradient(
        begin: Alignment.topRight,
        end: Alignment.bottomLeft,
        colors: [
          Colors.blue,
          Colors.red,
        ],
      )
  ),
  child: child
)

In my home.dart I have a stateful widget called “Home”:

class Home extends StatefulWidget {
  final String title;
  final zoomController;

  const Home({Key key, this.title, this.zoomController}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

The zoomController is for the package we’re using.

...
return Scaffold(
  appBar: AppBar(
    title: Text(widget.title),
    leading: InkWell(
      onTap: () => widget.zoomController.toggle(),
      child: Icon(Icons.menu),
    ),
  ),
  body: Container(
    decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topRight,
          end: Alignment.bottomLeft,
          colors: [
            Colors.indigo,
            Colors.indigoAccent,
          ],
...

Going straight to the point:

InkWell(
  onTap: () => widget.zoomController.toggle(),
  child: Icon(Icons.menu),
),

this is an InkWell with the menu icon and on tap of it triggers the toggle method of our zoom controller

My images are from here, my home widget looks like this:

Now I am going to do the menu widget, pause a little, stand up and stretch.
Okay let’s go on:

...
return Scaffold(
  body: SafeArea(
    child: Container(
      decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topRight,
            end: Alignment.bottomLeft,
            colors: [
              Colors.blue,
              Colors.red,
            ],
          )
      ),
      child: ListView(
        padding: EdgeInsets.zero,
        children: <Widget>[
          Container(
            height: 300,
            child: DrawerHeader(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(
                    width: 70,
                    height: 70,
                    padding: EdgeInsets.only(
                      bottom: 10, ),
                    child: DecoratedBox(
                      decoration: ShapeDecoration(
                          shape: CircleBorder(),
                          color: Colors.white,
                          image: DecorationImage(
                            fit: BoxFit.contain,
                            image: new NetworkImage("https://images.unsplash.com/photo-1606561956792-cd1dc8b7f7dc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1532&q=80"),
                          )),
                    ),
...

It’s just like a normal screen with Scaffold and any how you want to design it. This is how my UI looks like:

image by CB

I have added the project to my GitHub, now you have access to it.
I’d love you to create yours and send it to me on: connelblaze@gmail.com

My chakra is drained, I can’t do any programming jitsu no more, so till next time, don’t forget to clap and follow!

Incase you want to hit me up, I’m available.

Buy me Coffee