Flutter如何实现animated_bottom_navigation_bar动画底部导航栏

在Flutter中如何使用animated_bottom_navigation_bar实现动画效果的底部导航栏？我尝试了官方文档的示例，但自定义图标和动画效果时遇到困难。请问应该如何正确配置参数来实现平滑的图标切换动画？另外，如何修改导航栏的背景色和激活项的颜色？求一个完整的实现示例代码。

2 回复

使用animated_bottom_navigation_bar包实现：

  1. 添加依赖到pubspec.yaml
  2. 导入包：import 'package:animated_bottom_navigation_bar/animated_bottom_navigation_bar.dart';
  3. 在Scaffold的bottomNavigationBar中使用AnimatedBottomNavigationBar
  4. 设置icons图标列表和activeIndex当前选中索引
  5. 通过onTap回调处理页面切换

支持图标动画和颜色渐变效果。

更多关于Flutter如何实现animated_bottom_navigation_bar动画底部导航栏的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中，实现动画底部导航栏可以通过 AnimatedBottomNavigationBar 包或自定义实现。以下是两种方法：

方法一：使用 animated_bottom_navigation_bar 包

  1. 添加依赖：在 pubspec.yaml 中添加：

    dependencies:
  animated_bottom_navigation_bar: ^latest_version

    运行 flutter pub get。

  2. 基本用法：

    import 'package:animated_bottom_navigation_bar/animated_bottom_navigation_bar.dart';

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _currentIndex = 0;
  final iconList = <IconData>[
    Icons.home,
    Icons.search,
    Icons.person,
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: Text('Page $_currentIndex')),
      bottomNavigationBar: AnimatedBottomNavigationBar(
        icons: iconList,
        activeIndex: _currentIndex,
        gapLocation: GapLocation.center,
        notchSmoothness: NotchSmoothness.softEdge,
        onTap: (index) => setState(() => _currentIndex = index),
        // 其他自定义属性
      ),
    );
  }
}

方法二：自定义实现（使用 TweenAnimationBuilder）

bottomNavigationBar: TweenAnimationBuilder<double>(
  duration: Duration(milliseconds: 300),
  tween: Tween(begin: 0, end: 1),
  builder: (context, value, child) {
    return Transform.translate(
      offset: Offset(0, 100 * (1 - value)), // 从底部滑入
      child: Opacity(
        opacity: value,
        child: BottomNavigationBar(
          currentIndex: _currentIndex,
          onTap: (index) => setState(() => _currentIndex = index),
          items: [
            BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
            BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'),
          ],
        ),
      ),
    );
  },
),

关键点：

  • 包方式：简单快捷，支持多种动画效果（如弹性、颜色渐变）。
  • 自定义：更灵活，但需手动处理动画逻辑。
  • 可通过调整参数（如 notchSmoothness、gapWidth）优化外观。

使用包是推荐方式，节省时间且效果丰富。

回到顶部