flutter pub add custom_line_indicator_bottom_navbar根據套件公開資料產生的選型評估，僅供參考。
一個高度可自訂的底部導航欄，具備頂部和底部指示器的漸變支援。專為尋求跨多個平台現代、視覺豐富導航體驗的開發者設計。此套件允許對指示器的顏色、形狀、動畫和定位進行細緻控制，以實現獨特的UI設計。它能順暢整合至Flutter應用程式中，並支援所有主要平台，包括Android、iOS、Web、macOS、Windows和Linux。
以下為關聯原始碼儲存庫的 README 原文快照，最新內容請造訪原始碼儲存庫。
A fully customizable bottom navigation bar with line indicators and gradient.
Usage without gradient:
class MyExample extends StatefulWidget {
@override
_MyExampleState createState() => _MyExampleState();
}
class _MyExampleState extends State<MyExample> {
int _selectedIndex = 0; //default index
List<Widget> _widgetOptions = [
Text('Home'),
Text('Account'),
Text('Leaves'),
Text('Loyalty'),
Text('Requests'),
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Example'),
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: CustomLineIndicatorBottomNavbar(
selectedColor: Colors.blue,
unSelectedColor: Colors.black54,
backgroundColor: Colors.white,
currentIndex: _selectedIndex,
onTap: (index) {
setState(() {
_selectedIndex = index;
});
},
enableLineIndicator: true,
lineIndicatorWidth: 3,
indicatorType: IndicatorType.Top,
// gradient: LinearGradient(
// colors: kGradients,
// ),
customBottomBarItems: [
CustomBottomBarItems(
label: 'Home',
icon: Icons.home,
),
CustomBottomBarItems(
label: 'Account',
icon: Icons.account_box_outlined,
),
CustomBottomBarItems(
label: 'Leaves', icon: Icons.calendar_today_outlined),
CustomBottomBarItems(
label: 'Loyalty',
icon: Icons.card_giftcard_rounded,
),
CustomBottomBarItems(
label: 'Requests',
icon: Icons.list,
),
],
),
);
}
}
Usage with gradient :
class MyExample extends StatefulWidget {
@override
_MyExampleState createState() => _MyExampleState();
}
class _MyExampleState extends State<MyExample> {
int _selectedIndex = 0; //default index
List<Widget> _widgetOptions = [
Text('Home'),
Text('Account'),
Text('Leaves'),
Text('Loyalty'),
Text('Requests'),
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Example'),
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: CustomLineIndicatorBottomNavbar(
selectedColor: Colors.white,
unSelectedColor: Colors.black54,
backgroundColor: Colors.white,
currentIndex: _selectedIndex,
onTap: (index) {
setState(() {
_selectedIndex = index;
});
},
enableLineIndicator: true,
lineIndicatorWidth: 3,
indicatorType: IndicatorType.Top,
gradient: LinearGradient(
colors: [Colors.pink, Colors.yellow],
),
customBottomBarItems: [
CustomBottomBarItems(
label: 'Home',
icon: Icons.home,
),
CustomBottomBarItems(
label: 'Account',
icon: Icons.account_box_outlined,
),
CustomBottomBarItems(
label: 'Leaves', icon: Icons.calendar_today_outlined),
CustomBottomBarItems(
label: 'Loyalty',
icon: Icons.card_giftcard_rounded,
),
CustomBottomBarItems(
label: 'Requests',
icon: Icons.list,
),
],
),
);
}
}
暫無相關資料。