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
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.
