Flutter底部导航栏发光效果插件glow_bottom_app_bar的使用

发布于 1周前 作者 nodeper 来自 Flutter

Flutter底部导航栏发光效果插件 glow_bottom_app_bar 的使用

GlowBottomAppBar 是一个美观且易于使用的 Flutter 小部件，当索引变化时会显示发光的过渡效果，并且完全可定制。

支持项目

  • 展示一些 ❤️ 并为仓库加星以支持项目

资源链接

使用方法

以下是 GlowBottomAppBar 的基本使用方法：

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const DemoScreen(),
    );
  }
}

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

  @override
  State<DemoScreen> createState() => _DemoScreenState();
}

class _DemoScreenState extends State<DemoScreen> {
  int index = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text(
          'Current Index: $index',
          style: const TextStyle(
            fontSize: 30,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
      bottomNavigationBar: GlowBottomAppBar(
        height: 60,
        onChange: (value) {
          setState(() {
            index = value;
          });
        },
        background: Colors.black54,
        iconSize: 35,
        glowColor: Colors.redAccent,
        selectedChildren: const [
          Icon(Icons.ac_unit, color: Colors.redAccent),
          Icon(Icons.adb_rounded, color: Colors.redAccent),
          Icon(Icons.account_circle_rounded, color: Colors.redAccent),
        ],
        children: const [
          Icon(Icons.ac_unit, color: Colors.white),
          Icon(Icons.adb_rounded, color: Colors.white),
          Icon(Icons.account_circle_rounded, color: Colors.white),
        ],
      ),
    );
  }
}

参数说明

你可以通过以下参数自定义 GlowBottomAppBar：

  • height: 导航栏的高度
  • width: 导航栏的宽度
  • iconSize: 图标大小
  • duration: 动画持续时间
  • glowColor: 发光颜色
  • background: 背景颜色
  • shadowColor: 阴影颜色
  • children: 默认图标列表
  • selectedChildren: 选中状态下的图标列表
  • initialIndex: 初始选中的索引

示例效果

示例动画

以上是 glow_bottom_app_bar 插件的基本使用方法和示例代码。你可以根据自己的需求进一步定制和扩展这个组件。


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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter中使用glow_bottom_app_bar插件来实现底部导航栏发光效果的示例代码。这个插件可以帮助你创建带有发光效果的底部导航栏，从而提升用户体验。

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

dependencies:
  flutter:
    sdk: flutter
  glow_bottom_app_bar: ^x.y.z  # 请替换为最新版本号

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

接下来，在你的Flutter项目中，你可以使用以下代码来实现带有发光效果的底部导航栏：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Glow Bottom App Bar Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: GlowBottomAppBarExample(),
    );
  }
}

class GlowBottomAppBarExample extends StatefulWidget {
  @override
  _GlowBottomAppBarExampleState createState() => _GlowBottomAppBarExampleState();
}

class _GlowBottomAppBarExampleState extends State<GlowBottomAppBarExample> with SingleTickerProviderStateMixin {
  int _selectedIndex = 0;
  final List<Widget> _widgetOptions = <Widget>[
    Text('Home'),
    Text('Search'),
    Text('Library'),
    Text('Profile'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: GlowBottomAppBar(
        onTabSelected: (index) {
          setState(() {
            _selectedIndex = index;
          });
        },
        inactiveColor: Colors.grey,
        activeColor: Colors.blue,
        glowColor: Colors.blueAccent,
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Search',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.library_books),
            label: 'Library',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
        ],
      ),
    );
  }
}

在这个示例中：

  1. 我们导入了glow_bottom_app_bar包。
  2. 创建了一个GlowBottomAppBarExample类，它是一个有状态的widget，用于处理底部导航栏的索引变化。
  3. 使用GlowBottomAppBar作为Scaffold的bottomNavigationBar。
  4. GlowBottomAppBar的onTabSelected方法用于处理用户点击事件，更新当前选中的索引。
  5. inactiveColor和activeColor分别设置未选中项和选中项的颜色。
  6. glowColor设置发光效果的颜色。
  7. items列表包含底部导航栏的各个项。

这样，你就可以在Flutter应用中实现带有发光效果的底部导航栏了。确保你已经安装了最新版本的glow_bottom_app_bar插件，并根据需要调整颜色和图标。

回到顶部