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