Flutter 动画底部导航栏插件 animated_notch_bottom_bar_view 的使用

Installation（安装）

如果 juneflow 项目不存在，请根据此指南创建一个。
在 juneflow 项目的根目录打开终端，并输入以下命令：
```
june add animated_notch_bottom_bar_view
```

启动项目，请输入以下命令：

flutter run lib/app/_/_/interaction/view.blueprint/page/animated_notch_bottom_bar_view/_/view.dart -d chrome

Screenshots（截图）

使用示例

以下是一个完整的示例，展示如何在 Flutter 应用中使用 animated_notch_bottom_bar_view 插件。

import 'package:flutter/material.dart';
import 'package:animated_notch_bottom_bar/animated_notch_bottom_bar/animated_notch_bottom_bar.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AnimatedNotchBottomBarExample(),
    );
  }
}

class AnimatedNotchBottomBarExample extends StatefulWidget {
  @override
  _AnimatedNotchBottomBarExampleState createState() => _AnimatedNotchBottomBarExampleState();
}

class _AnimatedNotchBottomBarExampleState extends State<AnimatedNotchBottomBarExample> {
  final controller = AnimationController(vsync: this, duration: Duration(seconds: 2));
  
  int _selectedIndex = 0;
  
  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('动画底部导航栏'),
      ),
      body: Center(
        child: Text('当前页面: ${_selectedIndex + 1}'),
      ),
      bottomNavigationBar: AnimatedNotchBottomBar(
        controller: controller,
        notchSmoothness: NotchSmoothness.softEdge,
        behaviour: NotchBottomBarBehaviour.shrink,
        activeColor: Colors.blue,
        inactiveColor: Colors.grey,
        items: [
          AnimatedNotchBottomBarItem(iconData: Icons.home, tag: "home"),
          AnimatedNotchBottomBarItem(iconData: Icons.search, tag: "search"),
          AnimatedNotchBottomBarItem(iconData: Icons.person, tag: "person"),
        ],
        onTabSelected: (index) {
          _onItemTapped(index);
        },
      ),
    );
  }
}

代码说明：

导入库：首先导入必要的库。

import 'package:flutter/material.dart';
import 'package:animated_notch_bottom_bar/animated_notch_bottom_bar/animated_notch_bottom_bar.dart';

创建主应用：定义一个 MyApp 类作为应用入口。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AnimatedNotchBottomBarExample(),
    );
  }
}

定义状态类：创建 _AnimatedNotchBottomBarExampleState 状态类来管理底部导航栏的状态。

class _AnimatedNotchBottomBarExampleState extends State<AnimatedNotchBottomBarExample> {
  final controller = AnimationController(vsync: this, duration: Duration(seconds: 2));
  
  int _selectedIndex = 0;
  
  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('动画底部导航栏'),
      ),
      body: Center(
        child: Text('当前页面: ${_selectedIndex + 1}'),
      ),
      bottomNavigationBar: AnimatedNotchBottomBar(
        controller: controller,
        notchSmoothness: NotchSmoothness.softEdge,
        behaviour: NotchBottomBarBehaviour.shrink,
        activeColor: Colors.blue,
        inactiveColor: Colors.grey,
        items: [
          AnimatedNotchBottomBarItem(iconData: Icons.home, tag: "home"),
          AnimatedNotchBottomBarItem(iconData: Icons.search, tag: "search"),
          AnimatedNotchBottomBarItem(iconData: Icons.person, tag: "person"),
        ],
        onTabSelected: (index) {
          _onItemTapped(index);
        },
      ),
    );
  }
}

更多关于Flutter动画底部导航栏插件animated_notch_bottom_bar_view的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

htzhanglong 1楼

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

animated_notch_bottom_bar_view 是一个 Flutter 插件，用于创建带有动画效果的底部导航栏。它支持多种动画效果，并且可以自定义图标、颜色、标签等。以下是如何使用 animated_notch_bottom_bar_view 插件的步骤：

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 animated_notch_bottom_bar_view 依赖：

dependencies:
  flutter:
    sdk: flutter
  animated_notch_bottom_bar_view: ^0.0.1 # 请检查最新版本

然后运行 flutter pub get 以安装依赖。

2. 创建底部导航栏

在你的 Flutter 项目中，导入 animated_notch_bottom_bar_view 并创建一个底部导航栏。

import 'package:flutter/material.dart';
import 'package:animated_notch_bottom_bar_view/animated_notch_bottom_bar_view.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animated Notch Bottom Bar Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _currentIndex = 0;

  final List<Widget> _pages = [
    Center(child: Text('Home Page')),
    Center(child: Text('Search Page')),
    Center(child: Text('Favorites Page')),
    Center(child: Text('Profile Page')),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animated Notch Bottom Bar'),
      ),
      body: _pages[_currentIndex],
      bottomNavigationBar: AnimatedNotchBottomBarView(
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        items: [
          BottomBarItem(
            icon: Icons.home,
            label: 'Home',
          ),
          BottomBarItem(
            icon: Icons.search,
            label: 'Search',
          ),
          BottomBarItem(
            icon: Icons.favorite,
            label: 'Favorites',
          ),
          BottomBarItem(
            icon: Icons.person,
            label: 'Profile',
          ),
        ],
      ),
    );
  }
}

3. 自定义底部导航栏

AnimatedNotchBottomBarView 提供了多种自定义选项，例如颜色、动画类型、图标大小等。你可以根据需要调整这些参数。

bottomNavigationBar: AnimatedNotchBottomBarView(
  currentIndex: _currentIndex,
  onTap: (index) {
    setState(() {
      _currentIndex = index;
    });
  },
  items: [
    BottomBarItem(
      icon: Icons.home,
      label: 'Home',
      activeColor: Colors.blue,
      inactiveColor: Colors.grey,
    ),
    BottomBarItem(
      icon: Icons.search,
      label: 'Search',
      activeColor: Colors.green,
      inactiveColor: Colors.grey,
    ),
    BottomBarItem(
      icon: Icons.favorite,
      label: 'Favorites',
      activeColor: Colors.red,
      inactiveColor: Colors.grey,
    ),
    BottomBarItem(
      icon: Icons.person,
      label: 'Profile',
      activeColor: Colors.purple,
      inactiveColor: Colors.grey,
    ),
  ],
  notchColor: Colors.blue,
  animationType: AnimationType.fade, // 你可以选择不同的动画类型
  duration: Duration(milliseconds: 300),
),

4. 运行项目

保存并运行你的 Flutter 项目，你将看到一个带有动画效果的底部导航栏。

5. 进一步自定义

你可以根据需要进一步自定义底部导航栏的样式和行为。例如，你可以更改动画类型、添加更多页面、调整图标大小等。

6. 示例代码

完整的示例代码如下：

import 'package:flutter/material.dart';
import 'package:animated_notch_bottom_bar_view/animated_notch_bottom_bar_view.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animated Notch Bottom Bar Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _currentIndex = 0;

  final List<Widget> _pages = [
    Center(child: Text('Home Page')),
    Center(child: Text('Search Page')),
    Center(child: Text('Favorites Page')),
    Center(child: Text('Profile Page')),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animated Notch Bottom Bar'),
      ),
      body: _pages[_currentIndex],
      bottomNavigationBar: AnimatedNotchBottomBarView(
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        items: [
          BottomBarItem(
            icon: Icons.home,
            label: 'Home',
            activeColor: Colors.blue,
            inactiveColor: Colors.grey,
          ),
          BottomBarItem(
            icon: Icons.search,
            label: 'Search',
            activeColor: Colors.green,
            inactiveColor: Colors.grey,
          ),
          BottomBarItem(
            icon: Icons.favorite,
            label: 'Favorites',
            activeColor: Colors.red,
            inactiveColor: Colors.grey,
          ),
          BottomBarItem(
            icon: Icons.person,
            label: 'Profile',
            activeColor: Colors.purple,
            inactiveColor: Colors.grey,
          ),
        ],
        notchColor: Colors.blue,
        animationType: AnimationType.fade,
        duration: Duration(milliseconds: 300),
      ),
    );
  }
}