Flutter is getting a lot of hype in the frontend world, and if you have worked with it–you know why.

There are 5 things you need to use to create a sliding menu:

Stateless Widget:

As the name suggests, this is a widget without any state. This type of widget is useful when the data we want to show in the widget is not going to change (e.g Appbar, or something similar).

Stateful Widget:

As the name suggests, it’s a widget with a state. This type of widget is useful in cases where the data we want to show in the widget might change with user interaction (API requests, etc). Whenever there is any change in state of the widget, Flutter will redraw your widget.

**Animation Controller:

**This is the controller class for an animation. It allows us to play an animation forward, back, or to stop the animation. By default, animation controller linearly produces values that range from 0.0 to 1.0, during a given duration. Animation Controller needs a Ticker Provider.

**Ticker Provider:

**Ticker provider is an interface that describes a factory for a Ticker object. “Ticker” is an object that knows how to register itself with the “SchedulerBinding” and fires a callback every frame. As a result, any animation controller will not perform any calculation between two frames.

Change Notifier:

This is a class that is used for change notifications. It is observed in Java.

Let’s get started

**Step 1.

**Create A new Flutter project.

**Step 2.

**Go to projectName/lib/main.dart and delete everything.

**Step 3.

**Add below code to main.dart

import 'package:episodie_flutter/SlidingMenuDemo.dart';
import 'package:flutter/material.dart';void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
	@overrideWidget build(BuildContext context) {
  	return new MaterialApp(title: "Hidden Drawer",home: SlidingMenuDemo(),);
  }
 }

‍

NOTE:

– _By passing MyApp Widget inside the runApp() function, we inform Flutter that MyApp Widget is the entry point of the application and the root of the widget tree of my application.

– Inside MyApp, we are using MaterialApp, which provides a material theme to complete the app. It’s not mandatory, but it’s recommended.

_

Step 4.

Create another dart class, and name it SlidingMenuController.

‍

This class controls the animation and also notifies the class listeners about the change in the animation value.

Step 5.

Create SlidingMenu class

NOTE:

– _This class is our main widget. It basically takes two widgets, which will be placed in a stack.

– Detail Widget will be on the top, and all the transformation occurs on the detail widget._

Step 6.

Create the demo class

NOTE:

We have created another Change Notifier here that will be used by the menu and detail widget if you want to toggle the menu.

The Complete Process

When a user clicks on the menu icon on the details screen, the detail screen calls the “askSliderToToggle” on “MenuStatusChangeRequester”. The same instance of MenuStausChangeRequester is passed to SlidingMenu and SlidingMenu and added as a listener to MenuStatusChangeRequester. Calling “askSliderToToggle” on “MenuStatusChangeRequester” notifies “Sliding Menu”.

‍

We are asking our menu controller to perform a toggle operation upon receiving any notification from “MenuStatusChangeRequester”.

Take a look at what happens in our menu controller –

‍

We are starting the animation if the drawer is closed and then reversing it if drawer is open. Our SlidingMenuController is also extended from ChangeNotifier, notifying the listeners about the change in animation values using this code:

If you look at the init method of _SlidingMenuState again. _SlidingMenuState is also added as listeners for the SlidingMenuController. Every time it receives the notification, it’s calling it’s “setState” method.

Whenever “setState” is called, Flutter redraws the SlidingMenuWidget if you look into the “transformWidget” method. We are applying some transformations to the detail widget, depending upon the current percentage of animation which gives us the sliding effect.

‍