Flutter底部动画插件bottom_animation的使用
Flutter底部动画插件bottom_animation的使用
动画底部导航栏
贡献
- 您的Pull请求欢迎🎉🙏。
展示案例
平面导航栏自定义组件 | 带边框半径自定义组件 | 曲线自定义组件 |
---|---|---|
平面导航栏 | 带边框半径 | 暗色主题 |
---|---|---|
如何使用
1. 依赖它
在您的包的pubspec.yaml
文件中添加以下内容:
dependencies:
bottom_animation: ^<last_version>
2. 安装它
通过命令行安装包:
$ flutter pub get
或者,您可以使用编辑器支持的flutter pub get
。请查阅您的编辑器文档以了解更多信息。
3. 导入它
现在可以在Dart代码中使用:
import 'package:bottom_animation/bottom_animation.dart';
组件参数
名称 | 类型 | 描述 | 默认值 |
---|---|---|---|
selectedIndex | int | 当前选中项的索引 | - |
hoverAlignmentDuration | int | 控制悬停移动速度 | 700(毫秒) |
items | List | 底部导航项列表 | - |
backgroundColor | Color | 底部导航背景颜色 | - |
activeIconColor | Color | 选中项的颜色 | - |
deactiveIconColor | Color | 未选中项的颜色 | - |
iconSize | double | 底部导航图标大小 | 30 |
textStyle | TextStyle | 每个底部导航项的文本样式 | TextStyle(color: Colors.white, fontSize: 18.0, fontWeight: FontWeight.w300) |
onItemSelect | ValueChanged | - | - |
barHeight | double | 底部导航高度 | 80 |
barRadius | double | 底部导航圆角半径 | 0 |
itemHoverColor | Color | 每个项目的背景颜色 | - |
itemHoverColorOpacity | double | - | 13 |
itemHoverBorderRadius | double | - | 15 |
itemHoverWidth | double | - | 150 |
itemHoverHeight | double | - | 55 |
BottomNavItem
名称 | 类型 |
---|---|
title | String |
iconData | IconData |
示例
class MyApp extends StatefulWidget {
[@override](/user/override)
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
var items = [
BottomNavItem(title: 'Home', iconData: CupertinoIcons.heart),
BottomNavItem(title: 'Profile', iconData: CupertinoIcons.person),
BottomNavItem(title: 'Setting', iconData: CupertinoIcons.search),
BottomNavItem(title: 'tools', iconData: CupertinoIcons.bluetooth),
];
var cIndex;
[@override](/user/override)
void initState() {
cIndex = 0;
super.initState();
}
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'example',
theme: ThemeData(
primarySwatch: Colors.indigo,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: Scaffold(
backgroundColor: Colors.white,
bottomNavigationBar: BottomAnimation(
selectedIndex: cIndex,
items: items,
backgroundColor: Colors.blueGrey,
onItemSelect: (value) {
setState(() {
cIndex = value;
});
},
itemHoverColor: Colors.white,
itemHoverColorOpacity: .9,
activeIconColor: Colors.blueGrey,
deactiveIconColor: Colors.white.withOpacity(.9),
barRadius: 40,
textStyle: TextStyle(
color: Colors.blueGrey,
fontWeight: FontWeight.bold,
),
itemHoverWidth: 130,
itemHoverBorderRadius: 40,
),
),
);
}
}
更多关于Flutter底部动画插件bottom_animation的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter底部动画插件bottom_animation的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,我可以为你提供一个关于如何使用Flutter中的bottom_animation
插件的代码示例。bottom_animation
是一个用于在Flutter应用中实现底部动画效果的插件。以下是一个简单的示例,展示了如何使用该插件来创建一个带有动画效果的底部弹出菜单。
首先,确保你已经在pubspec.yaml
文件中添加了bottom_animation
依赖:
dependencies:
flutter:
sdk: flutter
bottom_animation: ^latest_version # 请替换为最新的版本号
然后,运行flutter pub get
来安装依赖。
接下来,你可以创建一个简单的Flutter应用,并在其中使用BottomAnimation
。以下是一个完整的示例代码:
import 'package:flutter/material.dart';
import 'package:bottom_animation/bottom_animation.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Bottom Animation Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
late BottomAnimationController _controller;
@override
void initState() {
super.initState();
_controller = BottomAnimationController(vsync: this);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
void _openBottomSheet() {
_controller.animateTo(1.0);
}
void _closeBottomSheet() {
_controller.animateTo(0.0);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Bottom Animation Demo'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
if (_controller.value == 0.0) {
_openBottomSheet();
} else {
_closeBottomSheet();
}
},
child: Text(_controller.value == 0.0 ? 'Open Bottom Sheet' : 'Close Bottom Sheet'),
),
),
bottomSheet: BottomAnimation(
controller: _controller,
builder: (context, animation) {
return SlideTransition(
position: Tween<Offset>(
begin: Offset(0, 1),
end: Offset.zero,
).animate(animation),
child: Container(
height: 200,
color: Colors.white,
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('This is a bottom sheet with animation!'),
ElevatedButton(
onPressed: _closeBottomSheet,
child: Text('Close'),
),
],
),
),
),
);
},
),
);
}
}
在这个示例中,我们做了以下几件事:
- 创建一个
BottomAnimationController
来控制动画。 - 使用
BottomAnimation
组件来创建底部弹出菜单,并通过SlideTransition
和Tween
来实现滑动动画效果。 - 通过按钮点击事件来控制动画的播放和停止,从而打开或关闭底部弹出菜单。
这个示例展示了如何使用bottom_animation
插件来创建一个具有动画效果的底部弹出菜单。你可以根据需要进一步自定义和扩展这个示例。