Foldable Sidebar In Flutter
A navigation drawer gives admittance to objections and application usefulness, like exchanging accounts. It can either be forever on-screen or constrained by a navigation menu icon. Mobile applications have various ways to deal with navigating between screens like Navigation drawer, Bottom Navigation bar, Sliding tabs, etc.
Flutter makes it simple for developers to utilize the navigation drawer without composing a significant part of the code without anyone else.
In this blog, we will explore the Foldable Sidebar In Flutter. We will implement a foldable sidebar demo program and create a foldable sidebar navigation drawer using the foldable_sidebar package in your flutter applications.
foldable_sidebar | Flutter Package
An easy to implement Foldable Sidebar Navigation Drawer for Flutter Applications. Initial Release for Foldable…pub. dev
Table Of Contents::
Foldable Sidebar:
It is a simple to-utilize package for adding a foldable flutter navigation sidebar drawer to your Flutter Application. The mobile applications that utilization Material Design has two essential choices for navigation. These navigations are Tabs and Drawers. A drawer is an elective choice for tabs because, occasionally, the mobile applications don’t have adequate space to help tabs.
A drawer is an invisible side screen. It is a sliding left menu that, for the most part, contains significant connections in the application and possesses half of the screen when shown.
Demo Module :
This demo video shows how to create a foldable sidebar in a flutter. It shows how the foldable sidebar will work using the foldable_sidebar package in your flutter applications. It shows when the user tap on the floating action button, the drawer will show/hide in a folding type way. It will be shown on your device.
Implementation:
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
dependencies:
flutter:
sdk: flutter
foldable_sidebar:
Step 2: Import
import 'package:foldable_sidebar/foldable_sidebar.dart';
Step 3: Run flutter packages get in the root directory of your app.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called home_screen.dart inside the lib folder.
First, we will create an instance variable of the foldable sidebar builder status.
FSBStatus _fsbStatus;
In the body, we will implement a FoldableSidebarBuilder() method. Inside, we will add drawerBackgroundColor means the background color of the drawer when sliding to the screen. We will add drawer means create a CustomSidebarDrawer() class. We will add screenContents means when the drawer hide, then this screen will show. We will create a welcomeScreen() widget. We will deeply define the below code. We will add status mean to add a foldable sidebar builder status instance variable.
FoldableSidebarBuilder(
drawerBackgroundColor: Colors.cyan[100],
drawer: CustomSidebarDrawer(drawerClose: (){
setState(() {
_fsbStatus = FSBStatus.FSB_CLOSE;
});
},
),
screenContents: welcomeScreen(),
status: _fsbStatus,
),
We will deeply define welcomeScreen() widget
We will return a Container widget. In this widget, we will add the center widget. Inside, we will add a column widget. In the column widget, we will add two texts, and the mainAxisAlignment was the center.
Widget welcomeScreen() {
return Container(
color: Colors.black.withAlpha(50),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("Welcome To Flutter Dev's",
style: TextStyle(fontSize: 25,color: Colors.white),
),
SizedBox(height: 5,),
Text("Click on FAB to Open Foldable Sidebar Drawer",
style: TextStyle(fontSize: 18,color: Colors.white
),
),
],
),
),
);
}
We will add a FloatingActionButton(). Inside, we will add a backgroundColor of the button. We will add a menu icon and onPressed() method. In this method, we will define setState(). When _fsbStatus is equal to the FSBStatus.FSB_OPEN, then the drawer will be closed. Otherwise, they will open.
floatingActionButton: FloatingActionButton(
backgroundColor:Colors.red[400],
child: Icon(Icons.menu,
color: Colors.white,
),
onPressed: () {
setState(() {
_fsbStatus = _fsbStatus == FSBStatus.FSB_OPEN ?
FSBStatus.FSB_CLOSE : FSBStatus.FSB_OPEN;
});
}),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
We will deeply define CustomSidebarDrawer() class
First, we will create a function.
final Function drawerClose;
const CustomSidebarDrawer({Key key, this.drawerClose}) : super(key: key);
We will return a Container widget. In this widget, we will add a column widget. Inside, we will add image, text, and ListTile. We will add three ListTile with icons and texts.
return Container(
color: Colors.white,
width: mediaQuery.size.width * 0.60,
height: mediaQuery.size.height,
child: Column(
children: <Widget>[
Container(
width: double.infinity,
height: 200,
color: Colors.grey.withAlpha(30),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset(
"assets/devs.jpg",
width: 100,
height: 100,
),
SizedBox(
height: 10,
),
Text("Flutter Devs")
],
)),
ListTile(
onTap: (){
debugPrint("Tapped Profile");
},
leading: Icon(Icons.person),
title: Text(
"Your Profile",
),
),
Divider(
height: 1,
color: Colors.grey,
),
ListTile(
onTap: () {
debugPrint("Tapped settings");
},
leading: Icon(Icons.settings),
title: Text("Settings"),
),
Divider(
height: 1,
color: Colors.grey,
),
ListTile(
onTap: () {
debugPrint("Tapped Log Out");
},
leading: Icon(Icons.exit_to_app),
title: Text("Log Out"),
),
],
),
);
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/material.dart';
import 'package:flutter_foldable_sidebar_demo/custom_sidebar_drawer.dart';
import 'package:foldable_sidebar/foldable_sidebar.dart';
class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
FSBStatus _fsbStatus;
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
backgroundColor: Colors.red[400],
title: Text("Flutter Foldable Sidebar Demo") ,
),
body: FoldableSidebarBuilder(
drawerBackgroundColor: Colors.cyan[100],
drawer: CustomSidebarDrawer(drawerClose: (){
setState(() {
_fsbStatus = FSBStatus.FSB_CLOSE;
});
},
),
screenContents: welcomeScreen(),
status: _fsbStatus,
),
floatingActionButton: FloatingActionButton(
backgroundColor:Colors.red[400],
child: Icon(Icons.menu,
color: Colors.white,
),
onPressed: () {
setState(() {
_fsbStatus = _fsbStatus == FSBStatus.FSB_OPEN ?
FSBStatus.FSB_CLOSE : FSBStatus.FSB_OPEN;
});
}),
),
);
}
Widget welcomeScreen() {
return Container(
color: Colors.black.withAlpha(50),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("Welcome To Flutter Dev's",
style: TextStyle(fontSize: 25,color: Colors.white),
),
SizedBox(height: 5,),
Text("Click on FAB to Open Foldable Sidebar Drawer",
style: TextStyle(fontSize: 18,color: Colors.white
),
),
],
),
),
);
}
}
Conclusion:
In the article, I have explained the Foldable Sidebar of the basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Foldable Sidebar On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying up the Foldable Sidebar in your flutter projects. We will show you what the Foldable Sidebar is?. Make a demo program for working Foldable Sidebar and show when the user tap on the floating action button, the drawer will show/hide in a folding type way using the foldable_sidebar package in your flutter applications. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
find the source code of the Flutter Foldable Sidebar Demo:
flutter-devs/flutter_foldable_sidebar_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
