navigation_sidebar

Description:

navigation sidebar

Navigation SideBar is Fully Customizable Navigator Widget.
Features #








Getting started #
Add the Package in your pubspec.yaml file.
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]),
],
),
);
copied to clipboard
Additional information #
import 'package:flutter/material.dart';
import 'package:navigation_sidebar.dart';
import 'package:navigation_sidebar_theme.dart';

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

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

@override
State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
int _selectedIndex = 0;

@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),
),
),
);
}
}
copied to clipboard