Flutter自定义导航栏插件curved_nav_bar的使用

curved_nav_bar 是一个Flutter插件，用于创建带有浮动操作按钮（FAB）和中心文本的底部导航栏。你可以将FAB用作中间标签，或者执行其他操作，如打开弹出窗口或相机。

Screenshots

Usage

添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  curved_nav_bar:

导入包

在你的 Dart 文件中导入 curved_nav_bar 包：

import 'package:curved_nav_bar/curved_bar/curved_action_bar.dart';
import 'package:curved_nav_bar/fab_bar/fab_bottom_app_bar_item.dart';
import 'package:curved_nav_bar/flutter_curved_bottom_nav_bar.dart';

使用 CurvedNavBar

CurvedNavBar 提供了多种配置选项，以下是一些主要的属性：

FABBottomAppBarItem 配置

CurvedActionBar 配置

示例代码

以下是一个完整的示例代码，展示了如何使用 CurvedNavBar：

import 'package:flutter/material.dart';
import 'package:curved_nav_bar/curved_bar/curved_action_bar.dart';
import 'package:curved_nav_bar/fab_bar/fab_bottom_app_bar_item.dart';
import 'package:curved_nav_bar/flutter_curved_bottom_nav_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: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return CurvedNavBar(
      actionButton: CurvedActionBar(
        onTab: (value) {
          /// 执行操作
          print(value);
        },
        activeIcon: Container(
          padding: EdgeInsets.all(8),
          decoration: BoxDecoration(color: Colors.white, shape: BoxShape.circle),
          child: Icon(
            Icons.camera_alt,
            size: 50,
            color: Colors.orange,
          ),
        ),
        inActiveIcon: Container(
          padding: EdgeInsets.all(8),
          decoration: BoxDecoration(color: Colors.white70, shape: BoxShape.circle),
          child: Icon(
            Icons.camera_alt_outlined,
            size: 50,
            color: Colors.orange,
          ),
        ),
        text: "Camera",
      ),
      activeColor: Colors.blue,
      navBarBackgroundColor: Colors.limeAccent,
      inActiveColor: Colors.black45,
      appBarItems: [
        FABBottomAppBarItem(
          activeIcon: Icon(
            Icons.home,
            color: Colors.blue,
          ),
          inActiveIcon: Icon(
            Icons.home,
            color: Colors.black26,
          ),
          text: 'Home',
        ),
        FABBottomAppBarItem(
          activeIcon: Icon(
            Icons.wallet_giftcard,
            color: Colors.blue,
          ),
          inActiveIcon: Icon(
            Icons.wallet_giftcard,
            color: Colors.black26,
          ),
          text: 'Wallet',
        ),
      ],
      bodyItems: [
        Container(
          height: MediaQuery.of(context).size.height,
          color: Colors.blue,
        ),
        Container(
          height: MediaQuery.of(context).size.height,
          color: Colors.pinkAccent,
        ),
      ],
      actionBarView: Container(
        height: MediaQuery.of(context).size.height,
        color: Colors.orange,
      ),
    );
  }
}

Pull Requests

欢迎提交 Pull Requests。通常我会在 24-48 小时内响应任何问题或请求。

1. 请保持 PR 标题简洁易读且描述性强，这将使它们更容易合并。
2. PR 必须针对 develop 分支。除非维护者另有指定，否则其他分支的 PR 将被拒绝。

Created & Maintained By

Boffin Coders Pvt. Ltd.

如果你觉得这个项目有帮助或从源代码中学到了东西，并想感谢我，可以考虑请我喝一杯 ☕。

• PayPal

License

Copyright 2018 Boffin Coders Pvt. Ltd.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.