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: 'GeeksforGeeks',
        icon: Icons.school_outlined,
        onPressed: () => setState(() => _headline = 'Geeks For Geeks'),
        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: 'GeeksforGeeks',
        icon: Icons.school_outlined,
        onPressed: () => setState(() => _headline = 'Geeks For Geeks'),
        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,
            ),
      ),
    );
  }
}

Output UI:

Output: