Flutter底部浮动导航插件floating_bottom_nav的使用

Flutter底部浮动导航插件floating_bottom_nav的使用

floating_bottom_nav 是一个免费且开源(MIT许可证)的Material Flutter BottomNavigationBar,支持背景颜色、选中图标颜色和未选中项颜色的自定义,同时支持浅色和深色主题。

开始使用

在项目的 pubspec.yaml 文件中添加以下依赖:

dependencies:
  floating_bottom_nav: '^1.0.0'

然后运行以下命令来安装包:

flutter pub get

接下来,在 Dart 代码中导入该库:

import 'package:floating_bottom_nav/floating_bottom_nav.dart';

如何使用

首先,确保你设置了 floatingActionButtonLocationFloatingActionButtonLocation.centerDocked,并且将此小部件用作浮动操作按钮。

以下是一个完整的示例代码:

import 'package:example/explorer.dart';
import 'package:example/favorites.dart';
import 'package:example/home.dart';
import 'package:example/profile.dart';
import 'package:floating_bottom_nav/floating_bottom_nav.dart';
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Floating NavBar Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const RootPage(),
    );
  }
}

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

  @override
  State<RootPage> createState() => _RootPageState();
}

class _RootPageState extends State<RootPage> {
  final PageController _pageController = PageController(initialPage: 0);

  int _selectedIndex = 0;

  @override
  void initState() {
    setState(() {
      _selectedIndex = _pageController.initialPage;
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Floating NavBar'),
      ),
      body: PageView(
        controller: _pageController,
        onPageChanged: (int index) {
          setState(() {
            _selectedIndex = index;
          });
        },
        children: const [
          HomePage(),
          ExplorePage(),
          FavoritesPage(),
          ProfilePage(),
        ],
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: FloatingBottomNavBar(
        currentIndex: _selectedIndex,
        onTap: (int index) {
          setState(() {
            _selectedIndex = index;
          });
          _pageController.animateToPage(
            _selectedIndex,
            duration: const Duration(milliseconds: 600),
            curve: Curves.easeOutQuad,
          );
        },
        items: const [
          Icons.home,
          Icons.explore,
          Icons.favorite,
          Icons.person,
        ],
      ),
    );
  }
}

在这个示例中,我们创建了一个包含四个页面的 PageView。底部导航栏会根据当前选中的页面进行切换,并且动画效果平滑地过渡到新的页面。

源码

源代码和示例可以在以下链接中找到:

$ git clone https://github.com/gairick-saha/floating_bottom_nav.git

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

1 回复

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


当然,以下是如何在Flutter项目中使用floating_bottom_nav插件来实现底部浮动导航的一个基本示例。

首先,确保你已经在pubspec.yaml文件中添加了floating_bottom_nav依赖:

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

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

接下来,你可以按照以下步骤在你的Flutter应用中使用这个插件:

1. 导入包

在你的Dart文件中导入floating_bottom_nav包:

import 'package:floating_bottom_nav/floating_bottom_nav.dart';

2. 创建主页面

这里我们创建一个简单的Flutter应用,其中包含一个主页面和几个子页面。我们将使用FloatingActionButton来触发底部导航。

import 'package:flutter/material.dart';
import 'package:floating_bottom_nav/floating_bottom_nav.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> {
  int _currentIndex = 0;
  final List<Widget> _pages = [
    HomeScreen(),
    SearchScreen(),
    ProfileScreen(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages[_currentIndex],
      floatingActionButton: FloatingActionNav(
        items: [
          FloatingActionNavItem(
            iconData: Icons.home,
            title: 'Home',
            onPressed: () {
              setState(() {
                _currentIndex = 0;
              });
            },
          ),
          FloatingActionNavItem(
            iconData: Icons.search,
            title: 'Search',
            onPressed: () {
              setState(() {
                _currentIndex = 1;
              });
            },
          ),
          FloatingActionNavItem(
            iconData: Icons.person,
            title: 'Profile',
            onPressed: () {
              setState(() {
                _currentIndex = 2;
              });
            },
          ),
        ],
        activeIndex: _currentIndex,
        backgroundColor: Colors.blue,
        itemBackgroundColor: Colors.white,
        itemIconColor: Colors.blue,
        itemTitleStyle: TextStyle(color: Colors.black),
        onItemChanged: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Search',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
        ],
        currentIndex: _currentIndex,
        fixedColor: Colors.blue,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Home Screen'));
  }
}

class SearchScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Search Screen'));
  }
}

class ProfileScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Profile Screen'));
  }
}

3. 运行应用

保存上述代码并运行你的Flutter应用。你将看到一个带有底部导航栏和浮动操作按钮的页面。点击浮动操作按钮中的不同项将导航到不同的页面,同时底部导航栏的选中项也会相应更新。

注意:floating_bottom_nav插件的具体API可能会随着版本的更新而有所变化,因此请参考最新的官方文档以确保代码的正确性。

回到顶部