Flutter底部导航栏插件ultimate_bottom_navbar的使用
Flutter底部导航栏插件ultimate_bottom_navbar的使用
1. 插件简介
Ultimate Bottom Navigation Bar
是一个为Flutter应用程序提供的高度可定制的底部导航栏。它允许你轻松创建带有图标和标题的导航栏,并自定义其外观和行为。
2. 插件功能展示
以下是该插件支持的不同样式的效果图:
-
Under Curve(下曲线):
-
Upper Curve(上曲线):
-
No Curve(无曲线):
-
Static Curve(静态曲线):
-
Dynamic Curve(动态曲线):
-
其他自定义效果:
3. 使用方法
3.1 添加依赖
在你的 pubspec.yaml
文件中添加以下依赖,使用最新版本:
dependencies:
ultimate_bottom_navbar: ^latest_version
3.2 示例代码
以下是一个完整的示例代码,展示了如何使用 ultimate_bottom_navbar
插件创建一个底部导航栏:
import 'package:flutter/material.dart';
import 'package:ultimate_bottom_navbar/ultimate_bottom_navbar.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: BottomNavigationPage(),
);
}
}
class BottomNavigationPage extends StatefulWidget {
@override
_BottomNavigationPageState createState() => _BottomNavigationPageState();
}
class _BottomNavigationPageState extends State<BottomNavigationPage> {
int currentIndex = 2;
final List<String> title = [
"Favourite",
"Wallet",
"Home",
"Freeze",
"Alarm"
];
final List<IconData> icons = [
Icons.favorite,
Icons.wallet_giftcard_sharp,
Icons.home,
Icons.ac_unit_outlined,
Icons.access_alarm_rounded,
];
final List pages = [
Page1(),
Page2(),
Page3(),
Page4(),
Page5(),
];
void onItemTapped(int index) async {
setState(() {
currentIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: pages[currentIndex],
bottomNavigationBar: UltimateBottomNavBar(
icons: icons,
titles: title,
currentIndex: currentIndex,
onTap: (index) async => onItemTapped(index),
backgroundColor: Colors.black.withOpacity(0.5), // 设置背景颜色
foregroundColor: Colors.pink, // 设置前景颜色
selectedIconColor: Colors.black, // 选中项的图标颜色
unselectedIconColor: Colors.white, // 未选中项的图标颜色
selectedTextColor: Colors.white, // 选中项的文字颜色
unselectedTextColor: Colors.grey, // 未选中项的文字颜色
underCurve: true, // 是否使用下曲线
staticCurve: false, // 是否使用静态曲线
showCircleStaticMidItem: true, // 是否显示静态曲线中间项的圆形装饰
badgeData: [{'index': 1, 'value': '5'}, {'index': 4, 'value': '55'}], // 徽章数据
badgeColor: Colors.red, // 徽章背景颜色
badgeTextStyle: TextStyle(color: Colors.white, fontSize: 8.0), // 徽章文字样式
animationType: Curves.bounceOut, // 动画类型
animationDuration: Duration(seconds: 1), // 动画持续时间
),
);
}
}
// 示例页面
class Page1 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(child: Text("Page 1"));
}
}
class Page2 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(child: Text("Page 2"));
}
}
class Page3 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(child: Text("Page 3"));
}
}
class Page4 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(child: Text("Page 4"));
}
}
class Page5 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(child: Text("Page 5"));
}
}
4. 自定义属性
UltimateBottomNavBar
提供了丰富的自定义属性,以下是一些常用的属性及其说明:
属性 | 描述 |
---|---|
icons |
必填,图标列表 |
titles |
必填,标题列表,使用空字符串表示无标题 |
currentIndex |
必填,当前选中的索引 |
backgroundColor |
背景颜色 |
foregroundColor |
前景颜色 |
selectedIconColor |
选中项的图标颜色 |
unselectedIconColor |
未选中项的图标颜色 |
selectedTextColor |
选中项的文字颜色 |
unselectedTextColor |
未选中项的文字颜色 |
underCurve |
是否使用下曲线 |
staticCurve |
是否使用静态曲线 |
showCircleStaticMidItem |
是否显示静态曲线中间项的圆形装饰 |
badgeData |
徽章数据,格式为 [{'index': 索引, 'value': 徽章值}] |
badgeColor |
徽章背景颜色 |
badgeTextStyle |
徽章文字样式 |
animationType |
动画类型 |
animationDuration |
动画持续时间 |
5. RTL支持
UltimateBottomNavBar
支持从右到左(RTL)和从左到右(LTR)的文本方向,可以通过 Directionality
组件进行配置:
Directionality(
textDirection: TextDirection.rtl,
child: Scaffold(bottomNavigationBar: UltimateBottomNavBar()),
)
更多关于Flutter底部导航栏插件ultimate_bottom_navbar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter底部导航栏插件ultimate_bottom_navbar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,以下是如何在Flutter中使用ultimate_bottom_navbar
插件来实现底部导航栏的示例代码。ultimate_bottom_navbar
是一个功能强大的Flutter插件,用于创建高度可定制的底部导航栏。
首先,确保你已经在pubspec.yaml
文件中添加了ultimate_bottom_navbar
的依赖:
dependencies:
flutter:
sdk: flutter
ultimate_bottom_navbar: ^4.6.0 # 请检查最新版本号
然后,运行以下命令来安装依赖:
flutter pub get
接下来,是一个完整的示例代码,展示如何使用ultimate_bottom_navbar
来创建一个带有底部导航栏的应用:
import 'package:flutter/material.dart';
import 'package:ultimate_bottom_navbar/ultimate_bottom_navbar.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Ultimate Bottom NavBar Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomeScreen(),
);
}
}
class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> with SingleTickerProviderStateMixin {
late int _selectedIndex;
late TabController _tabController;
@override
void initState() {
super.initState();
_selectedIndex = 0;
_tabController = TabController(length: 3, vsync: this);
}
@override
void dispose() {
_tabController.dispose();
super.dispose();
}
List<Widget> _buildScreenPages() {
return [
Center(child: Text('Home')),
Center(child: Text('Search')),
Center(child: Text('Profile')),
];
}
List<UBNBItem> _buildNavBarItems() {
return [
UBNBItem(
icon: Icons.home,
title: "Home",
),
UBNBItem(
icon: Icons.search,
title: "Search",
),
UBNBItem(
icon: Icons.person,
title: "Profile",
),
];
}
@override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: UltimateBottomNavBar(
currentTabIndex: _selectedIndex,
onTabSelectedListener: (index) {
setState(() {
_selectedIndex = index;
});
},
items: _buildNavBarItems(),
),
body: _buildScreenPages()[_selectedIndex],
);
}
}
解释
-
依赖导入:确保在
pubspec.yaml
中添加了ultimate_bottom_navbar
依赖。 -
主应用入口:
MyApp
类是一个简单的MaterialApp
,设置了主题和初始页面为HomeScreen
。 -
HomeScreen:
- 使用
StatefulWidget
来管理导航栏的状态。 - 初始化一个
_selectedIndex
来跟踪当前选中的选项卡。 - 初始化一个
TabController
,尽管在这个例子中我们并没有直接使用它(因为ultimate_bottom_navbar
自己处理导航)。 _buildScreenPages
方法返回一个包含不同屏幕的列表。_buildNavBarItems
方法返回一个包含导航栏项的列表。
- 使用
-
UltimateBottomNavBar:
currentTabIndex
:当前选中的选项卡索引。onTabSelectedListener
:当选项卡被选中时的回调。items
:导航栏项的列表。
-
Scaffold:
bottomNavigationBar
:使用UltimateBottomNavBar
来显示底部导航栏。body
:根据_selectedIndex
显示不同的页面。
这个示例展示了如何设置和使用ultimate_bottom_navbar
插件来创建一个带有底部导航栏的Flutter应用。你可以根据需要进一步自定义和扩展此示例。