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

bottom_bar_matu 是一个漂亮的、带动画效果的底部导航栏插件。它支持多种样式，如 BottomBarBubble、BottomBarDoubleBullet 和 BottomBarLabelSlide。

支持的样式

BottomBarBubble

BottomBarDoubleBullet

BottomBarLabelSlide

使用方法

简单实现（使用图标数据）

import 'package:flutter/material.dart';
import 'package:bottom_bar_matu/bottom_bar_matu.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: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Bottom Bar Bubble'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _index = 0;
  final PageController controller = PageController();

  void _onSelect(int index) {
    setState(() {
      _index = index;
      controller.jumpToPage(index);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      bottomNavigationBar: BottomBarBubble(
        selectedIndex: _index,
        items: [
          BottomBarItem(iconData: Icons.home),
          BottomBarItem(iconData: Icons.chat),
          BottomBarItem(iconData: Icons.notifications),
          BottomBarItem(iconData: Icons.calendar_month),
          BottomBarItem(iconData: Icons.settings),
        ],
        onSelect: _onSelect,
      ),
      body: PageView(
        controller: controller,
        children: const <Widget>[
          Center(child: Text('First Page')),
          Center(child: Text('Second Page')),
          Center(child: Text('Third Page')),
          Center(child: Text('Fourth Page')),
          Center(child: Text('Fifth Page')),
        ],
      ),
    );
  }
}

自定义小部件实现

import 'package:flutter/material.dart';
import 'package:bottom_bar_matu/bottom_bar_matu.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: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Bottom Bar Custom Widget'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _index = 0;
  final PageController controller = PageController();

  void _onSelect(int index) {
    setState(() {
      _index = index;
      controller.jumpToPage(index);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      bottomNavigationBar: BottomBarBubble(
        selectedIndex: _index,
        items: [
          BottomBarItem(
            iconBuilder: (color) => Image.asset('assets/ic_alarm.png', color: color, height: 30, width: 30),
          ),
          BottomBarItem(
            iconBuilder: (color) => Image.asset('assets/ic_bill.png', color: color, height: 30, width: 30),
          ),
          BottomBarItem(
            iconBuilder: (color) => Image.asset('assets/ic_box.png', color: color, height: 30, width: 30),
          ),
        ],
        onSelect: _onSelect,
      ),
      body: PageView(
        controller: controller,
        children: const <Widget>[
          Center(child: Text('First Page')),
          Center(child: Text('Second Page')),
          Center(child: Text('Third Page')),
        ],
      ),
    );
  }
}

许可证

Copyright (c) 2021 Tuannvm

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

通过以上示例代码，您可以快速上手并使用 bottom_bar_matu 插件来实现带有动画效果的底部导航栏。希望这些示例对您有所帮助！