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

简介

google_nav_bar 是一个为Flutter设计的现代化Google风格底部导航栏。它具有丰富的自定义选项，可以轻松地集成到你的应用中。

特性：

• 由设计师Aurelien Salomon设计并由sooxt98开发。
• 支持多种样式和动画效果。
• 可以通过GNav属性全局设置标签样式，也可以通过GButton属性单独设置每个标签的样式。

开始使用

添加依赖

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

dependencies:
  google_nav_bar: ^5.0.7

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

导入包

在Dart代码中导入google_nav_bar：

import 'package:google_nav_bar/google_nav_bar.dart';

使用示例

下面是一个完整的示例，展示了如何使用google_nav_bar创建一个带有四个标签（Home、Likes、Search、Profile）的底部导航栏，并根据用户选择显示不同的页面内容。

import 'package:flutter/material.dart';
import 'package:google_nav_bar/google_nav_bar.dart';
import 'package:line_icons/line_icons.dart';

void main() => runApp(MaterialApp(
    builder: (context, child) {
      return Directionality(textDirection: TextDirection.ltr, child: child!);
    },
    title: 'GNav',
    theme: ThemeData(
      primaryColor: Colors.grey[800],
    ),
    home: Example()));

class Example extends StatefulWidget {
  @override
  _ExampleState createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  int _selectedIndex = 0;
  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.w600);
  static const List<Widget> _widgetOptions = <Widget>[
    Text(
      'Home',
      style: optionStyle,
    ),
    Text(
      'Likes',
      style: optionStyle,
    ),
    Text(
      'Search',
      style: optionStyle,
    ),
    Text(
      'Profile',
      style: optionStyle,
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        elevation: 20,
        title: const Text('GoogleNavBar'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: Container(
        decoration: BoxDecoration(
          color: Colors.white,
          boxShadow: [
            BoxShadow(
              blurRadius: 20,
              color: Colors.black.withOpacity(.1),
            )
          ],
        ),
        child: SafeArea(
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 15.0, vertical: 8),
            child: GNav(
              rippleColor: Colors.grey[300]!,
              hoverColor: Colors.grey[100]!,
              gap: 8,
              activeColor: Colors.black,
              iconSize: 24,
              padding: EdgeInsets.symmetric(horizontal: 20, vertical: 12),
              duration: Duration(milliseconds: 400),
              tabBackgroundColor: Colors.grey[100]!,
              color: Colors.black,
              tabs: [
                GButton(
                  icon: LineIcons.home,
                  text: 'Home',
                ),
                GButton(
                  icon: LineIcons.heart,
                  text: 'Likes',
                ),
                GButton(
                  icon: LineIcons.search,
                  text: 'Search',
                ),
                GButton(
                  icon: LineIcons.user,
                  text: 'Profile',
                ),
              ],
              selectedIndex: _selectedIndex,
              onTabChange: (index) {
                setState(() {
                  _selectedIndex = index;
                });
              },
            ),
          ),
        ),
      ),
    );
  }
}

关键点解释

• GNav: 这是主要的导航栏组件，包含了所有与导航相关的配置项。
• GButton: 每个标签按钮都由GButton表示，你可以为其指定图标和文本。
• onTabChange: 当用户点击某个标签时触发此回调函数，更新当前选中的索引。

希望这个例子能帮助你快速上手google_nav_bar！如果你有任何问题或需要进一步的帮助，请随时提问。