FlutterHow do i create Elastic Drawer UI

Last updated Nov 12, 2021


In this tutorial, we will see how you can get an Elastic panel that slides horizontally to show fully customized content in Flutter.

Let's Start

Step 1: Create a new Flutter Application.

Step 2: Add a line like this to your package's pubspec.yaml

dependencies:
  elastic_drawer: ^2.0.1

 

Step 3: Now to have this Effect all you have to do is Wrap your Scaffold widget with a widget called ElasticDrawer.

for example: 

child: ElasticDrawer(

mainChild: Scaffold(

appBar: AppBar(),

)

)

Now as you see Elastic Drawer has two required parameters which are

  • mainChild
  • drawerChild

so, for main child you can add your widget that will be displayed first, and for drawer child can be any widget/screen that will be displayed when we drag it horizontally.

for example: 

 mainChild: Scaffold(

              appBar: AppBar(),

              body: const Center(

                child: Text(

                  'Main Page',

                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30.0),

                ),

              ),

            ),

drawerChild: Column(

              mainAxisAlignment: MainAxisAlignment.center,

              children: [

                GridView.count(

                  crossAxisCount: 3,

                  mainAxisSpacing: 5.0,

                  crossAxisSpacing: 5.0,

                  shrinkWrap: true,

                  children: List.generate(

                    6,

                    (index) {

                      return Padding(

                        padding: const EdgeInsets.all(10.0),

                        child: Container(

                          color: Colors.yellow,

                          child: Center(

                              child: Text(

                            index.toString(),

                            style: const TextStyle(

                                fontSize: 20, fontWeight: FontWeight.bold),

                          )),

                        ),

                      );

                    },

                  ),

                )

              ],

            )

 

 

Complete Source Code to create Custom Elastic Drawer UI in flutter application

import 'package:flutter/material.dart';

import 'package:elastic_drawer/elastic_drawer.dart';

 

void main() => runApp(MyDrawer());

 

class MyDrawer extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      debugShowCheckedModeBanner: false,

      home: ElasticDemo(),

    );

  }

}

 

class ElasticDemo extends StatefulWidget {

  @override

  _ElasticDemoState createState() => _ElasticDemoState();

}

 

class _ElasticDemoState extends State {

  @override

  Widget build(BuildContext context) {

    return SafeArea(

        child: ElasticDrawer(

            mainColor: Colors.lightBlue,

            drawerColor: Colors.blueGrey,

            mainChild: Scaffold(

              appBar: AppBar(),

              body: const Center(

                child: Text(

                  'Main Page',

                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30.0),

                ),

              ),

            ),

            drawerChild: Column(

              mainAxisAlignment: MainAxisAlignment.center,

              children: [

                GridView.count(

                  crossAxisCount: 3,

                  mainAxisSpacing: 5.0,

                  crossAxisSpacing: 5.0,

                  shrinkWrap: true,

                  children: List.generate(

                    6,

                    (index) {

                      return Padding(

                        padding: const EdgeInsets.all(10.0),

                        child: Container(

                          color: Colors.yellow,

                          child: Center(

                              child: Text(

                            index.toString(),

                            style: const TextStyle(

                                fontSize: 20, fontWeight: FontWeight.bold),

                          )),

                        ),

                      );

                    },

                  ),

                )

              ],

            )));

  }

}

 

Output:

 

Video Tutorial

 

Conclusion: In this way, we have learned how we can get elastic drawer effect in Flutter.

 


Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

16 Views

Subscribe For Daily Updates

Flutter Questions
Android Questions