Flutter自定义导航栏插件sweet_nav_bar的使用

SweetNavBar 是一个用于Flutter应用中创建渐变和浮动导航栏的插件。它易于使用，并且提供了美观的动画效果。本文将介绍如何在你的Flutter项目中集成和使用这个插件。

主要特性

• 简单易用
• 支持图标渐变
• 提供多种美丽的动画效果

开始使用

首先，你需要在项目的 pubspec.yaml 文件中添加 sweet_nav_bar 作为依赖项：

dependencies:
  flutter:
    sdk: flutter
  sweet_nav_bar: ^最新版本号

请确保替换 ^最新版本号 为实际的最新版本号。你可以通过访问 sweet_nav_bar的pub.dev页面 来获取最新版本信息。

示例代码

下面是一个完整的示例demo，展示了如何在Flutter应用程序中实现带有渐变颜色的底部导航栏。

完整示例

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SweetNavBar Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const SweetNaveBar(),
      debugShowCheckedModeBanner: false,
    );
  }
}

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

  [@override](/user/override)
  State<SweetNaveBar> createState() => _SweetNavBarState();
}

class _SweetNavBarState extends State<SweetNaveBar> {
  final List<Widget> _items = [
    const Text('Home'),
    const Text('Business'),
    const Text('School'),
  ];

  int cIndex = 0;
  final iconLinearGradiant = <Color>[
    const Color.fromARGB(255, 251, 2, 197),
    const Color.fromARGB(255, 72, 3, 80)
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: iconLinearGradiant,
            ),
          ),
          child: Center(child: _items[cIndex])),
      bottomNavigationBar: SweetNavBar(
        paddingGradientColor: const LinearGradient(colors: [
          Color.fromARGB(255, 72, 3, 80),
          Color.fromARGB(255, 72, 3, 80)
        ]),
        currentIndex: cIndex,
        paddingBackgroundColor: Colors.red,
        items: [
          SweetNavBarItem(
              sweetActive: const Icon(Icons.home),
              sweetIcon: const Icon(Icons.home_outlined),
              sweetLabel: 'Home',
              iconColors: iconLinearGradiant,
              sweetBackground: Colors.red),
          SweetNavBarItem(
              sweetIcon: const Icon(Icons.business), sweetLabel: 'Business'),
          SweetNavBarItem(
              sweetIcon: const Icon(Icons.school), sweetLabel: 'School'),
        ],
        onTap: (index) {
          setState(() {
            cIndex = index;
          });
        },
      ),
    );
  }
}