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

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

安装

  1. 将包的最新版本添加到 pubspec.yaml 文件中：
dependencies:
  animated_bottom_bar: ^0.0.3
  1. 导入包：
import 'package:animated_bottom_bar/animated_bottom_bar.dart';
import 'package:flutter/material.dart';

使用示例

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

class Test extends StatefulWidget {
  const Test({Key? key}) : super(key: key);

  [@override](/user/override)
  State<Test> createState() => _TestState();
}

class _TestState extends State<Test> {

  int select = 0;

  Color active = Colors.blue;
  Color inactive = Colors.black;

  List<String> name = [
    "Home",
    "Dashboard",
    "Security",
    "Person",
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    double mediaQH = MediaQuery.of(context).size.height;
    double mediaQW = MediaQuery.of(context).size.width;
    return Scaffold(
      bottomNavigationBar: AnimatedBottomBar(
        // 设置底部导航栏的宽度
        width: mediaQW - 30,

        // 设置底部导航栏的高度
        height: mediaQH * 0.085,

        // 当前选中的索引
        selectedIndex: select,

        // 底部导航栏的项目列表
        items: [
          AnimatedBarItem(
            icon: Icon(Icons.home), // 主页图标
          ),
          AnimatedBarItem(
            icon: Icon(Icons.dashboard), // 仪表盘图标
          ),
          AnimatedBarItem(
            icon: Icon(Icons.safety_check), // 安全图标
          ),
          AnimatedBarItem(
            icon: Icon(Icons.person), // 个人资料图标
          ),
        ],
        // 当用户点击底部导航栏的项目时调用的回调函数
        onItemSelected: (_){
          setState(() {
            select = _; // 更新选中的索引
          });
          print(select); // 打印当前选中的索引
        },
      ),
      body: Container(
        // 设置容器的大小
        height: mediaQH,
        width: mediaQW,
        color: Colors.white.withOpacity(0.9),
        alignment: Alignment.center,
        child: Text(name[select]), // 显示当前选中的页面名称
      ),
    );
  }
}

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

1 回复

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


animated_bottom_bar 是一个 Flutter 插件，用于在应用程序底部创建一个具有动画效果的导航栏。这个插件允许你自定义导航栏的外观和动画效果，使其更加动态和吸引人。

以下是使用 animated_bottom_bar 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 animated_bottom_bar 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  animated_bottom_bar: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入包

在你的 Dart 文件中导入 animated_bottom_bar 包：

import 'package:animated_bottom_bar/animated_bottom_bar.dart';

3. 创建导航栏

接下来，你可以在你的 Scaffold 中使用 AnimatedBottomBar 来创建底部导航栏。以下是一个简单的示例：

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

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

class _HomeScreenState extends State<HomeScreen> {
  int _currentIndex = 0;

  final List<BarItem> _barItems = [
    BarItem(
      icon: Icon(Icons.home),
      title: Text("Home"),
      activeColor: Colors.blue,
      inactiveColor: Colors.grey,
    ),
    BarItem(
      icon: Icon(Icons.search),
      title: Text("Search"),
      activeColor: Colors.green,
      inactiveColor: Colors.grey,
    ),
    BarItem(
      icon: Icon(Icons.person),
      title: Text("Profile"),
      activeColor: Colors.red,
      inactiveColor: Colors.grey,
    ),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animated Bottom Bar Example'),
      ),
      body: Center(
        child: Text('Page ${_currentIndex + 1}'),
      ),
      bottomNavigationBar: AnimatedBottomBar(
        barItems: _barItems,
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
      ),
    );
  }
}
回到顶部