Flutter底部导航栏插件light_bottom_navigation

Flutter底部导航栏插件light_bottom_navigation_bar的使用

介绍

light_bottom_navigation_bar 是一个功能强大且动画效果出色的Flutter插件，适用于现代应用程序。它提供了一个带有ViewPager的精美底部导航栏，支持多种自定义选项和动画效果。

版本

当前版本：0.0.1

特点

动画效果：当选择标签时，可以感受到流畅的动画效果。
可配置性：您可以控制该组件的背景颜色、图标、大小、动画类型、颜色等。
强健构建：该插件经过严格的测试，确保开发者可以信赖。
美观的UI：使用此插件可以创建出功能强大的用户界面。

安装

在 pubspec.yaml 文件中添加依赖：

dependencies:
  light_bottom_navigation_bar: latest_version

然后导入插件：

import 'package:light_bottom_navigation_bar/light_bottom_navigation_bar.dart';

使用方法

light_bottom_navigation_bar 插件的使用非常简单。以下是几种不同的设计示例。

简单设计

Scaffold(
  bottomNavigationBar: LightBottomNavigationBar(
    currentIndex: 1, // 当前选中的索引
    items: [
      LightBottomNavigationBarItem(), // 未配置任何属性的默认项
      LightBottomNavigationBarItem(),
      LightBottomNavigationBarItem(),
    ],
    onSelected: (index) {
      print('tab $index'); // 打印选中的索引
    },
  ),
  // 其他Scaffold属性
);

simple_design

普通设计

Color primaryColor = Colors.yellowAccent;

Scaffold(
  bottomNavigationBar: LightBottomNavigationBar(
    currentIndex: 1, // 当前选中的索引
    items: [
      LightBottomNavigationBarItem(
        unSelectedIcon: Icons.home_outlined, // 未选中时的图标
        selectedIcon: Icons.home, // 选中时的图标
        splashColor: primaryColor, // 点击时的水波纹颜色
        borderBottomColor: primaryColor, // 底部边框颜色
        backgroundShadowColor: primaryColor, // 背景阴影颜色
        selectedIconColor: primaryColor, // 选中图标的颜色
        unSelectedIconColor: Colors.grey, // 未选中图标的颜色
      ),
      LightBottomNavigationBarItem(
        unSelectedIcon: Icons.favorite_border,
        selectedIcon: Icons.favorite,
        splashColor: primaryColor,
        borderBottomColor: primaryColor,
        backgroundShadowColor: primaryColor,
        selectedIconColor: primaryColor,
        unSelectedIconColor: Colors.grey,
      ),
      LightBottomNavigationBarItem(
        unSelectedIcon: Icons.cloud_done_outlined,
        selectedIcon: Icons.cloud_done,
        splashColor: primaryColor,
        borderBottomColor: primaryColor,
        backgroundShadowColor: primaryColor,
        selectedIconColor: primaryColor,
        unSelectedIconColor: Colors.grey,
      ),
    ],
    onSelected: (index) {
      print('tab $index'); // 打印选中的索引
    },
  ),
  // 其他Scaffold属性
);

normal_design

高级设计

Scaffold(
  bottomNavigationBar: LightBottomNavigationBar(
    currentIndex: 2, // 当前选中的索引
    items: makeNavItems(), // 自定义的导航栏项
    onSelected: (index) {
      print('tab $index'); // 打印选中的索引
    },
  ),
  // 其他Scaffold属性
);

List<LightBottomNavigationBarItem> makeNavItems() {
  return [
    LightBottomNavigationBarItem(
      unSelectedIcon: Icons.home_outlined,
      selectedIcon: Icons.home_outlined,
      size: 30, // 图标大小
      backgroundShadowColor: Colors.red, // 背景阴影颜色
      borderBottomColor: Colors.red, // 底部边框颜色
      borderBottomWidth: 3, // 底部边框宽度
      splashColor: Colors.red, // 点击时的水波纹颜色
      selectedIconColor: Colors.red, // 选中图标的颜色
      unSelectedIconColor: Colors.red, // 未选中图标的颜色
    ),
    LightBottomNavigationBarItem(
      unSelectedIcon: Icons.search_outlined,
      selectedIcon: Icons.search_outlined,
      size: 30,
      backgroundShadowColor: Colors.blue,
      borderBottomColor: Colors.blue,
      borderBottomWidth: 3,
      splashColor: Colors.blue,
      selectedIconColor: Colors.blue,
      unSelectedIconColor: Colors.blue,
    ),
    LightBottomNavigationBarItem(
      unSelectedIcon: Icons.star_border_outlined,
      selectedIcon: Icons.star_border_outlined,
      size: 30,
      backgroundShadowColor: Colors.yellowAccent,
      borderBottomColor: Colors.yellowAccent,
      borderBottomWidth: 3,
      splashColor: Colors.yellowAccent,
      selectedIconColor: Colors.yellowAccent,
      unSelectedIconColor: Colors.yellowAccent,
    ),
    LightBottomNavigationBarItem(
      unSelectedIcon: Icons.done_outline_rounded,
      selectedIcon: Icons.done_outline_rounded,
      size: 30,
      backgroundShadowColor: Colors.green,
      borderBottomColor: Colors.green,
      borderBottomWidth: 3,
      splashColor: Colors.green,
      selectedIconColor: Colors.green,
      unSelectedIconColor: Colors.green,
    ),
    LightBottomNavigationBarItem(
      unSelectedIcon: Icons.person_outline,
      selectedIcon: Icons.person_outline,
      size: 30,
      backgroundShadowColor: Colors.purpleAccent,
      borderBottomColor: Colors.purpleAccent,
      borderBottomWidth: 3,
      splashColor: Colors.purpleAccent,
      selectedIconColor: Colors.purpleAccent,
      unSelectedIconColor: Colors.purpleAccent,
    ),
  ];
}

super_design

完整示例Demo

以下是一个完整的示例代码，展示了如何使用 light_bottom_navigation_bar 插件来创建一个带有多个页面的底部导航栏应用。

// ignore_for_file: library_private_types_in_public_api
import 'package:flutter/material.dart';
import 'package:light_bottom_navigation_bar/light_bottom_navigation_bar.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

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

class Home extends StatefulWidget {
  const Home({super.key});

  [@override](/user/override)
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  var screensList = [
    const Text('Home'), // 主页
    const Text('Search'), // 搜索页
    const Text('Favorites'), // 收藏页
    const Text('Done'), // 完成页
    const Text('Profile'), // 个人资料页
  ];
  var index = 0; // 当前选中的索引

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: LightBottomNavigationBar(
        currentIndex: index, // 当前选中的索引
        items: makeNavItems(), // 自定义的导航栏项
        onSelected: (index) {
          setState(() {
            this.index = index; // 更新当前选中的索引
          });
        },
      ),
      body: Center(child: screensList[index]), // 显示当前选中的页面
    );
  }

  List<LightBottomNavigationBarItem> makeNavItems() {
    return [
      const LightBottomNavigationBarItem(
        unSelectedIcon: Icons.home_outlined, // 未选中时的图标
        selectedIcon: Icons.home_outlined, // 选中时的图标
        size: 30, // 图标大小
        backgroundShadowColor: Colors.red, // 背景阴影颜色
        borderBottomColor: Colors.red, // 底部边框颜色
        borderBottomWidth: 3, // 底部边框宽度
        splashColor: Colors.red, // 点击时的水波纹颜色
        selectedIconColor: Colors.red, // 选中图标的颜色
        unSelectedIconColor: Colors.red, // 未选中图标的颜色
      ),
      const LightBottomNavigationBarItem(
        unSelectedIcon: Icons.search_outlined,
        selectedIcon: Icons.search_outlined,
        size: 30,
        backgroundShadowColor: Colors.blue,
        borderBottomColor: Colors.blue,
        borderBottomWidth: 3,
        splashColor: Colors.blue,
        selectedIconColor: Colors.blue,
        unSelectedIconColor: Colors.blue,
      ),
      const LightBottomNavigationBarItem(
        unSelectedIcon: Icons.star_border_outlined,
        selectedIcon: Icons.star_border_outlined,
        size: 30,
        backgroundShadowColor: Colors.yellowAccent,
        borderBottomColor: Colors.yellowAccent,
        borderBottomWidth: 3,
        splashColor: Colors.yellowAccent,
        selectedIconColor: Colors.yellowAccent,
        unSelectedIconColor: Colors.yellowAccent,
      ),
      const LightBottomNavigationBarItem(
        unSelectedIcon: Icons.done_outline_rounded,
        selectedIcon: Icons.done_outline_rounded,
        size: 30,
        backgroundShadowColor: Colors.green,
        borderBottomColor: Colors.green,
        borderBottomWidth: 3,
        splashColor: Colors.green,
        selectedIconColor: Colors.green,
        unSelectedIconColor: Colors.green,
      ),
      const LightBottomNavigationBarItem(
        unSelectedIcon: Icons.person_outline,
        selectedIcon: Icons.person_outline,
        size: 30,
        backgroundShadowColor: Colors.purpleAccent,
        borderBottomColor: Colors.purpleAccent,
        borderBottomWidth: 3,
        splashColor: Colors.purpleAccent,
        selectedIconColor: Colors.purpleAccent,
        unSelectedIconColor: Colors.purpleAccent,
      ),
    ];
  }
}

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

htzhanglong 1楼•8 天前

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

当然，以下是如何在Flutter项目中使用light_bottom_navigation_bar插件来实现底部导航栏的一个基本示例。首先，你需要确保在你的pubspec.yaml文件中添加该插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  light_bottom_navigation_bar: ^X.Y.Z  # 请替换为最新版本号

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

接下来，你可以在你的Flutter应用中实现底部导航栏。以下是一个完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  int _selectedIndex = 0;
  final List<Widget> _widgetOptions = <Widget>[
    Center(child: Text('Home')),
    Center(child: Text('Search')),
    Center(child: Text('Profile')),
    Center(child: Text('Settings')),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bottom Navigation Bar Example'),
      ),
      body: _widgetOptions[_selectedIndex],
      bottomNavigationBar: LightBottomNavigationBar(
        items: [
          LightBottomNavigationBarItem(
            icon: Icons.home,
            title: 'Home',
          ),
          LightBottomNavigationBarItem(
            icon: Icons.search,
            title: 'Search',
          ),
          LightBottomNavigationBarItem(
            icon: Icons.person,
            title: 'Profile',
          ),
          LightBottomNavigationBarItem(
            icon: Icons.settings,
            title: 'Settings',
          ),
        ],
        currentIndex: _selectedIndex,
        onSelectedItemChanged: (index) => _onItemTapped(index),
        inactiveColor: Colors.grey,
        activeColor: Colors.blue,
        backgroundColor: Colors.white,
        borderRadius: BorderRadius.circular(10.0),
      ),
    );
  }
}

解释

依赖添加：在pubspec.yaml中添加light_bottom_navigation_bar的依赖。
导入包：在代码文件中导入light_bottom_navigation_bar包。
创建应用结构：使用MaterialApp和Scaffold来构建应用的基本结构。
定义底部导航项：使用LightBottomNavigationBarItem来定义每个导航项，包括图标和标题。
管理导航状态：使用StatefulWidget和setState来管理当前选中的导航项，并在底部导航栏中更新显示。
处理导航点击事件：使用onSelectedItemChanged回调来处理底部导航项的点击事件，并更新当前选中的导航项。

运行项目

确保你已经正确安装了所有依赖，然后在你的开发环境中运行该项目。你应该能够看到一个带有底部导航栏的应用，点击不同的导航项会切换显示的内容。

希望这个示例能帮助你理解如何在Flutter中使用light_bottom_navigation_bar插件来实现底部导航栏。