Hidden Drawer Package

Introduction of Hidden Drawer

The hidden_drawer_menu package in Flutter provides a way to implement a hidden drawer menu, which can be revealed with a swipe or a tap. This package helps you create a sleek and modern navigation drawer that can be hidden and shown as needed, making it ideal for apps with limited screen space or those wanting a more interactive navigation experience.

Key Features:

• Hidden Drawer: Create a drawer that can be hidden and revealed with a swipe or tap.
• Customizable: Easily customize the appearance and behavior of the drawer.
• Smooth Animations: Provides smooth animations for showing and hiding the drawer.
• Easy Integration: Simple API for quick integration into your Flutter project.

Installation: To use the hidden_drawer_menu package, add it to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  hidden_drawer_menu: ^0.5.0  # Use the latest version

Run flutter pub get to install the package.

Importing the Package:

import 'package:hidden_drawer_menu/hidden_drawer_menu.dart';

Basic Usage: Here’s an example of how to use the HiddenDrawerMenu widget in a Flutter application:

import 'package:flutter/material.dart';
import 'package:hidden_drawer_menu/hidden_drawer_menu.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HiddenDrawerExample(),
    );
  }
}

class HiddenDrawerExample extends StatefulWidget {
  @override
  _HiddenDrawerExampleState createState() => _HiddenDrawerExampleState();
}

class _HiddenDrawerExampleState extends State<HiddenDrawerExample> {
  List<ScreenHiddenDrawer> _pages = [
    ScreenHiddenDrawer(
      ItemHiddenMenu(
        name: 'Page 1',
        baseStyle: TextStyle(color: Colors.white),
        colorLineSelected: Colors.orange,
      ),
      FirstPage(),
    ),
    ScreenHiddenDrawer(
      ItemHiddenMenu(
        name: 'Page 2',
        baseStyle: TextStyle(color: Colors.white),
        colorLineSelected: Colors.orange,
      ),
      SecondPage(),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return HiddenDrawerMenu(
      backgroundColorMenu: Colors.blue,
      backgroundColorAppBar: Colors.blue,
      screens: _pages,
      slidePercent: 50.0,
      contentCornerRadius: 40.0,
      // other properties...
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Page'),
      ),
      body: Center(
        child: Text('First Page Content'),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: Text('Second Page Content'),
      ),
    );
  }
}

Properties:

screens: A list of ScreenHiddenDrawer objects, each representing a menu item and its corresponding screen.

screens: _pages,

backgroundColorMenu: The background color of the hidden drawer menu.

backgroundColorMenu: Colors.blue,

backgroundColorAppBar: The background color of the app bar when the drawer is hidden.

backgroundColorAppBar: Colors.blue,

slidePercent: The percentage of the screen that the drawer will slide over.

slidePercent: 50.0,

contentCornerRadius: The corner radius of the content when the drawer is revealed.

contentCornerRadius: 40.0,

typeOpen: The type of drawer opening animation. It can be TypeOpen.FROM_LEFT or TypeOpen.FROM_RIGHT.

typeOpen: TypeOpen.FROM_LEFT,

enableShadowItensMenu: Whether to enable shadows for menu items.

enableShadowItensMenu: true,

curveAnimation: The animation curve for the drawer animation.

curveAnimation: Curves.easeInOut,

Example of Menu Item:

ScreenHiddenDrawer(
  ItemHiddenMenu(
    name: 'Page 1',
    baseStyle: TextStyle(color: Colors.white),
    colorLineSelected: Colors.orange,
  ),
  FirstPage(),
),

Example Usage in the HiddenDrawerMenu:

HiddenDrawerMenu(
  backgroundColorMenu: Colors.blue,
  backgroundColorAppBar: Colors.blue,
  screens: _pages,
  slidePercent: 50.0,
  contentCornerRadius: 40.0,
  typeOpen: TypeOpen.FROM_LEFT,
  enableShadowItensMenu: true,
  curveAnimation: Curves.easeInOut,
)

Drawer Page: this page is the main page of the app.

import 'package:flutter/material.dart';

class DrawerPage extends StatelessWidget {
  const DrawerPage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.teal,
      ),
    );
  }
}

Final Code: This is the final code with the combination of some above Flutter Hidden Drawer package properties and the Drawer Page Function.

import 'package:blueskey/pages/drawerpage.dart';
import 'package:flutter/material.dart';
import 'package:hidden_drawer_menu/hidden_drawer_menu.dart';

class Homepage extends StatefulWidget {
  const Homepage({super.key});

  @override
  State<Homepage> createState() => _HomepageState();
}

class _HomepageState extends State<Homepage> {
  List<ScreenHiddenDrawer> _pages = [];

  @override
  void initState() {
    super.initState();

    _pages = [
      ScreenHiddenDrawer(
        ItemHiddenMenu(
          name: 'Home Page',
          baseStyle: TextStyle(color: Colors.white),
          selectedStyle: TextStyle(),
        ),
        DrawerPage(),
      ),
      ScreenHiddenDrawer(
        ItemHiddenMenu(
          name: 'About Us',
          baseStyle: TextStyle(color: Colors.white),
          selectedStyle: TextStyle(),
        ),
        DrawerPage(),
      ),
      ScreenHiddenDrawer(
        ItemHiddenMenu(
          name: 'Contact Us',
          baseStyle: TextStyle(color: Colors.white),
          selectedStyle: TextStyle(),
        ),
        DrawerPage(),
      ),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: HiddenDrawerMenu(
        screens: _pages,
        backgroundColorMenu: const Color.fromARGB(255, 3, 72, 56),
      ),
    );
  }
}

The hidden_drawer_menu package allows you to create a hidden drawer menu that can be customized and integrated into your Flutter application with ease, providing a modern and interactive navigation experience for users.

Thank for visiting Hybrid App Development
Posted by Hussam HM