navigation_sidebar 1.2.1
navigation_sidebar: ^1.2.1 copied to clipboard
Navigation SideBar is like a Navigator. When you click on items it takes you on page and item will be selected. Navigation SideBar is Fully Customizable.
Navigation SideBar is Fully Customizable Navigator Widget.
Features #
'assets/videos/video1.mp4'
Getting started #
First add the Package in your pubspec.yaml file. Second import the package. Then Write NavigationSideBar and in items use NavigationSideBarItem.
Usage #
Scaffold( body: Row( children: [ NavigationSideBar( isExtended: _isExtended, isIndicatorActive: true, items: [ NavigationSideBarItem( selectedIcon: Icons.home_filled, unSelectedIcon: Icons.home_outlined, text: 'Home'), NavigationSideBarItem( selectedIcon: Icons.screen_search_desktop_rounded, unSelectedIcon: Icons.screen_search_desktop_outlined, text: 'Search'), NavigationSideBarItem( selectedIcon: Icons.settings_rounded, unSelectedIcon: Icons.settings_outlined, text: 'Settings'), ], initialSelectedIndex: _selectedIndex, onItemSelected: (int value) { setState(() { _selectedIndex = value; }); }, ), Expanded(child: list[_selectedIndex]), ], ), );
const like = 'sample';
Additional information #
import 'package:flutter/material.dart'; import 'package:test1/custom_widget.dart'; import 'package:test1/home_page.dart'; import 'package:test1/nav_sidebar_theme.dart';
void main() { runApp(const MyApp()); }
class MyApp extends StatefulWidget { const MyApp({super.key});
@override State
class _MyAppState extends State
@override Widget build(BuildContext context) { return MaterialApp( home: NavigationSideBar( items: [ Page1(), Page2(), Page3(), ], onItemSelected: (int index) { setState(() { _selectedIndex = index; }); }, initialSelectedIndex: _selectedIndex, isExtended: true, isIndicatorActive: true,
animationDuration: Duration(milliseconds: 500),
bottomWidget2: Add bottom widget here ,
bottomWidget: Add bottom widget here,
topWidget2: Add top widget here,
topWidget: Add top widget here,
collapsedWidth: 60,
extendedWidth: 200,
showExtendedButton: true,
theme: NavigationSideBarTheme(
backgroundColor: Colors.white,
elevation: 10,
selectedIconColor: Colors.blue,
selectedTextStyle: TextStyle(
color: Colors.blue, fontSize: 20, fontWeight: FontWeight.bold),
unSelectedIconColor: Colors.black,
unSelectedTextStyle: TextStyle(
color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold),
),
),
);
} }