side_nav

Description:

side nav

side_nav #
本仓库由作者@Tri7Ratops创作的flutter_side_navbar而来，对这个组件进行了二次修改从而得到了这个组件。
一个仿点餐菜单的边栏导航，自动滚动高亮。
开始 #
在文件pubspec.yaml中添加下面的依赖:
dependencies:
...
side_nav: any
copied to clipboard
在你的组件中引入:
import 'package:side_nav/side_nav.dart';
copied to clipboard
使用 #
First, add SideNavbar in your Scaffold:
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
backgroundColor: Colors.white70,
body: SideNavbar(
pages: [],
),
),
);
}
}
copied to clipboard
Then, add your different pages as a list of Widget:
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
backgroundColor: Colors.white70,
body: SideNavbar(
pages: [
SideItemModel(
defaultIconColor: Colors.blue,
onTap: () {},
page: Column(
children: [
Container(
height: 800,
width: double.infinity,
color: Colors.green,
),
],
),
icon: Icons.home_filled,
),
SideItemModel(
defaultIconColor: Colors.blue,
onTap: () {},
page: Column(
children: [
Container(
height: 1000,
width: double.infinity,
color: Colors.red,
),
],
),
icon: Icons.verified_user,
),
],
),
),
);
}
}
copied to clipboard
You're now ready to go !
Customize #
SideItemModel #
/// Widget to show
final Widget? page;

/// Icon showed according to the page in the navigation
final IconData icon;

/// Used as a complement of the icon
final String? iconTitle;

/// Used for specific development when the user click on the icon in the navigation
final Function()? onTap;

/// Used for specific development when the widget is the most visible
final Function()? onMostVisible;

/// Used for specific development when the widget lost focus
final Function()? lostFocus;

/// Default color of the icon when the page is not the most visible
final Color defaultIconColor;

/// Background color of the navigation item when the corresponding page is focused
final Color focusBackgroundColor;

/// Icon color of the navigation item when the corresponding page is focused
final Color focusIconColor;

/// Text color of the navigation item when the corresponding page is focused
final Color focusTextColor;
copied to clipboard
SideNavbar #
/// List of all the pages to show
final List<SideItemModel> pages;

/// Widget of navigationWidth
final double navigationWidth;

/// Navigation background color
final Color navigationBackgroundColor;

/// Used to personalised the container of the navigation buttons
final BoxDecoration decorationItem;

/// Used to change the position of the navigation
///
/// reversed = false ==> Navigation on the right
/// reversed = true ==> Navigation on the left
final bool reversed;

/// Used to specify to the package if an AppBar is shown
final bool appBarIsShown;

/// Used to set the padding for the page
final EdgeInsets? padding;

/// Used to set the padding of the navigation
final EdgeInsets? paddingNavigation;

/// If the scroll view does not shrink wrap, then the scroll view will expand to the maximum allowed size
final bool shrinkWrap;

/// Used to set the scroll controller of the package for specific development
final AutoScrollController? controller;

/// Used to set the scroll physics of the package
final ScrollPhysics? physics;

/// Used to set the duration of the animation when a user tap on a navigation item's and the scroll is moving
final Duration duration;
copied to clipboard
Examples #
Basic: example
Reversed: example
Basic with AppBar: example
Inside another scroll widget: example
Inside another scroll widget + AppBar: example
使用的包 #
equatable: https://pub.dev/packages/equatable
scroll_to_index: https://pub.dev/packages/scroll_to_index
visibility_detector: https://pub.dev/packages/visibility_detector