Flutter自定义底部导航栏插件shaped_bottom_bar的使用

shaped bottom bar

一个新的Flutter底部导航栏！一个带有形状的底部导航栏。

选择你的形状和动画，让我们来完成工作。

Hexagon	Slide_transition_example.gif

fade_transition_example.gif	rotated_transition_example.gif

Circle	Diamond	Pentagon	Hexagon

Rhombus	Square	Star	Triangle

Installing

在pubspec.yaml文件中添加以下行：

dependencies:
  shaped_bottom_bar: ^1.1.0

Widgets

• ShapedBottomBar：创建底部导航栏的主要组件。
• ShapedBottomBarItem：用于listItems参数中的子组件。

ShapedBottomBar

仅需两个必填参数即可获得完整的底部导航栏。

• 必填参数

  • onItemChanged：每次切换项目时触发的函数。
  • listItems：类型为ShapedItemObject的列表，将在底部导航栏中渲染。

• 其他参数

  • shape：ShapeType枚举类型，包含所有可用的形状，默认值为None。
  • shapeColor：选中项的形状颜色，默认为null。
  • customShape：传递给底部导航栏以渲染自定义形状（不同于内置形状）的CustomPaint类型，要使用customShape需要将shape设置为ShapeType.CUSTOM。
  • selectedIconColor：选中图标的颜色，默认为白色。
  • backgroundColor：带形状的底部导航栏的背景色，默认为蓝色。
  • selectedItemIndex：默认选中项，默认为第一个（索引0）。
  • textStyle：应用于项目文本的文本样式（颜色、大小、字体等）。
  • animationType：ANIMATION_TYPE类型的属性，可选值有NONE、ROTATE、FADE、SLIDE_VERTICALLY。
  • with3dEffect：启用或禁用底部导航栏选中形状的3D效果，默认为False。

ShapedBottomBarItem

• 必填参数

  • icon：图标数据类型，表示项目将获取的图标。

• 其他参数

  • text：项目文本，默认为空文本。
  • themeColor：将设置给图标的颜色，默认为黑色。
  • renderWithText：是否渲染文本，默认为false。

Example

下面是一个简单的例子，它将生成一个没有形状的普通底部导航栏。

ShapedBottomBar(
  backgroundColor: Colors.grey,
  listItems: [
    ShapedItemObject(iconData: Icons.settings, title: "Settings"),
    ShapedItemObject(iconData: Icons.account_balance_outlined, title: "Account"),
    ShapedItemObject(iconData: Icons.verified_user_rounded, title: "User"),
    ShapedItemObject(iconData: Icons.login, title: "Logout")
  ],
  onItemChanged: (position) {
    setState(() {
      this.selectedItem = position;
    });
  },
  selectedIconColor: Colors.white
)

下面的例子将生成一个带有六边形形状的底部导航栏。

ShapedBottomBar(
  backgroundColor: Colors.grey,
  iconsColor: Colors.white,
  listItems: [
    ShapedItemObject(iconData: Icons.settings, title: "Settings"),
    ShapedItemObject(iconData: Icons.account_balance_outlined, title: "Account"),
    ShapedItemObject(iconData: Icons.verified_user_rounded, title: "User"),
    ShapedItemObject(iconData: Icons.login, title: "Logout"),
  ],
  onItemChanged: (position) {
    setState(() {
      this.selectedItem = position;
    });
  },
  shapeColor: Colors.pink,
  selectedIconColor: Colors.white,
  shape: ShapeType.HEXAGONE
)

使用自定义形状

为了创建带有自定义形状的底部导航栏，你需要使用customShape参数，并将shape设置为ShapeType.CUSTOM，如下所示：

ShapedBottomBar(
  backgroundColor: Colors.blue[50],
  iconsColor: Color(0xFF020750),
  listItems: [
    ShapedItembject(iconData: Icons.settings, title: "Settings"),
    ShapedItemObject(iconData: Icons.account_balance_outlined, title: "Account"),
    ShapedItemObject(iconData: Icons.verified_user_rounded, title: "User"),
    ShapedItemObject(iconData: Icons.login, title: "Logout"),
  ],
  onItemChanged: (position) {
    setState(() {
      this.selectedItem = position;
    });
  },
  textStyle: TextStyle(color: Colors.black, fontSize: 15),
  shape: ShapeType.CUSTOM,
  customShape: CustomPaint(
    painter: MyShape(),
  )
)

使用内置动画

ShapedBottomBar(
  backgroundColor: Colors.black12,
  iconsColor: Colors.black,
  listItems: [
    ShapedItemObject(iconData: Icons.alarm, title: "Alarm"),
    ShapedItemObject(iconData: Icons.menu_book, title: "Menu"),
    ShapedItemObject(iconData: Icons.verified_user_rounded, title: "User"),
    ShapedItemObject(iconData: Icons.login, title: "Logout")
  ],
  onItemChanged: (position) {
    setState(() {
      this.selectedItem = position;
    });
  },
  shape: ShapeType.OCTAGON,
  shapeColor: Colors.black,
  selectedIconColor: Colors.white,
  animationType: ANIMATION_TYPE.ROTATE,
)

使用3D效果属性

ShapedBottomBar(
  backgroundColor: Colors.black12,
  iconsColor: Colors.black,
  listItems: [
    ShapedItemObject(iconData: Icons.alarm, title: "Alarm"),
    ShapedItemObject(iconData: Icons.menu_book, title: "Menu"),
    ShapedItemObject(iconData: Icons.verified_user_rounded, title: "User"),
    ShapedItemObject(iconData: Icons.login, title: "Logout"),
  ],
  onItemChanged: (position) {
    setState(() {
      this.selectedItem = position;
    });
  },
  shape: ShapeType.SQUARE,
  shapeColor: Colors.pink,
  selectedIconColor: Colors.white,
  with3dEffect: true,
  animationType: ANIMATION_TYPE.FADE
)

示例代码

以下是一个完整的示例代码，展示了如何在应用程序中使用shaped_bottom_bar插件。

import 'package:flutter/material.dart';
import 'package:shaped_bottom_bar/models/shaped_item_object.dart';
import 'package:shaped_bottom_bar/utils/arrays.dart';
import 'package:shaped_bottom_bar/shaped_bottom_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: MyScreen(),
    );
  }
}

class MyScreen extends StatefulWidget {
  @override
  _MyScreenState createState() => _MyScreenState();
}

class _MyScreenState extends State<MyScreen> {
  List<Widget> screens = [
    Container(color: Colors.white),
    Container(color: Colors.white),
    Container(color: Colors.white),
    Container(color: Colors.white)
  ];

  int selectedItem = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: ShapedBottomBar(
        backgroundColor: Colors.black12,
        iconsColor: Colors.black,
        listItems: [
          ShapedItemObject(iconData: Icons.alarm, title: "Alarm"),
          ShapedItemObject(iconData: Icons.menu_book, title: "Menu"),
          ShapedItemObject(iconData: Icons.verified_user_rounded, title: "User"),
          ShapedItemObject(iconData: Icons.login, title: "Logout"),
        ],
        onItemChanged: (position) {
          setState(() {
            this.selectedItem = position;
          });
        },
        shape: ShapeType.SQUARE,
        shapeColor: Colors.pink,
        selectedIconColor: Colors.white,
        with3dEffect: true,
        animationType: ANIMATION_TYPE.FADE,
      ),
      body: Container(),
    );
  }
}