Flutter – Collapse Sidebar
Sidebar is also called the Drawer of the Application and mainly use in every android and iOS Application. Sidebar is used to work with more screens and make the application more user interactive. Sidebar provides the users to use the different screens in the single-page application. A collapsible sidebar for Flutter apps implementing the Material Design. A sample video is given below to get an idea about what we are going to do in this article.
Step by Step Implementation
Step 1: Create a New Project in Android Studio
To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.
Step 2: Import the Package in the pubspec.yaml file
Now we need to import the package into the pubspec.yaml file, which you find at the last of the root folder.
Dart
flutter pub add collapsible_sidebar |
This will add something like that to your pubspec.yaml file
We have added this package because this provides the Collapsed widget and its properties to use in the App. We also need one image for showing in the avatar of Collapsed property. Refer to this Flutter article How to add assets image in Flutter.
Simple step to add assets image:
Create a folder in the root directory as your preferred name, we use the ‘assets’ name and then copy the images in this folder that you want to use. In pubspec yaml file uncomment the assets tag and add the path of your image. If we have the image in the assets folder then the path will be directoryname/imagename.imagetype.
Now we are going with this and making a collapsed sidebar.
Step 3: Import the library or plugin in the main file for the collapsed sidebar.
Dart
import 'package:collapsible_sidebar/collapsible_sidebar.dart' ; |
Step 4: Create the list of Collapsed Items
Item list –
Dart
List<CollapsibleItem> get _generateItems { return [ CollapsibleItem( text: 'w3wiki' , icon: Icons.school_outlined, onPressed: () => setState(() => _headline = 'Beginner For Beginner' ), isSelected: true , ), CollapsibleItem( text: 'Flutter' , icon: Icons.flutter_dash_outlined, onPressed: () => setState(() => _headline = 'Flutter' ), ), ]; } |
Step 5: In the body call the Collapsed sidebar widget and give properties according to you.
Code Example:
Dart
import 'package:collapsible_sidebar/collapsible_sidebar.dart' ; import 'package:flutter/material.dart' ; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false , title: 'Collapse Sidebar' , home: Scaffold( body: SidebarPage(), ), ); } } class SidebarPage extends StatefulWidget { @override _SidebarPageState createState() => _SidebarPageState(); } class _SidebarPageState extends State<SidebarPage> { late List<CollapsibleItem> _items; late String _headline; AssetImage _avatarImg = AssetImage( 'asset/gfg.png' ); @override void initState() { super.initState(); _items = _generateItems; _headline = _items.firstWhere((item) => item.isSelected).text; } List<CollapsibleItem> get _generateItems { return [ CollapsibleItem( text: 'w3wiki' , icon: Icons.school_outlined, onPressed: () => setState(() => _headline = 'Beginner For Beginner' ), isSelected: true , ), CollapsibleItem( text: 'Flutter' , icon: Icons.flutter_dash_outlined, onPressed: () => setState(() => _headline = 'Flutter' ), ), CollapsibleItem( text: 'HTML' , icon: Icons.html_outlined, onPressed: () => setState(() => _headline = 'HTML' ), ), CollapsibleItem( text: 'CSS' , icon: Icons.css_outlined, onPressed: () => setState(() => _headline = 'CSS' ), ), CollapsibleItem( text: 'JavaScript' , icon: Icons.javascript_outlined, onPressed: () => setState(() => _headline = 'JavaScript' ), ), CollapsibleItem( text: 'Home' , icon: Icons.home, onPressed: () => setState(() => _headline = 'Home' ), ), ]; } @override Widget build(BuildContext context) { var size = MediaQuery.of(context).size; return SafeArea( child: CollapsibleSidebar( isCollapsed: MediaQuery.of(context).size.width <= 800, items: _items, avatarImg: _avatarImg, title: 'MS471841' , onTitleTap: () { ScaffoldMessenger.of(context).showSnackBar( SnackBar(content: Text( 'Yay! Flutter Collapsible Sidebar!' ))); }, body: _body(size, context), selectedIconBox: Colors.transparent, unselectedTextColor: Colors.white, unselectedIconColor: Colors.white, backgroundColor: Color.fromARGB(255, 44, 129, 47), selectedTextColor: Color.fromARGB(255, 65, 68, 255), textStyle: TextStyle(fontSize: 15, fontStyle: FontStyle.italic), titleStyle: TextStyle( fontSize: 20, fontStyle: FontStyle.italic, fontWeight: FontWeight.bold), toggleTitleStyle: TextStyle(fontSize: 20, fontWeight: FontWeight.bold), sidebarBoxShadow: [ BoxShadow( color: Color.fromARGB(255, 63, 181, 171), blurRadius: 20, spreadRadius: 0.01, offset: Offset(3, 3), ), BoxShadow( color: Color.fromARGB(255, 77, 240, 83), blurRadius: 50, spreadRadius: 0.01, offset: Offset(3, 3), ), ], ), ); } Widget _body(Size size, BuildContext context) { return Container( height: double .infinity, width: double .infinity, color: Color.fromARGB(255, 255, 255, 255), child: Center( child: Text( _headline, style: Theme.of(context).textTheme.headline2, overflow: TextOverflow.visible, softWrap: false , ), ), ); } } |
Contact Us