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

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

convex_bottom_app_bar 是一个可自定义的底部导航栏插件。以下是如何在你的Flutter项目中使用它的详细指南。

安装插件

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

dependencies:
  convex_bottom_app_bar: ^1.0.1

然后运行 flutter pub get 来获取新安装的包。

导入库

在你的 Dart 文件中导入 convex_bottom_app_bar 库：

import 'package:convex_bottom_app_bar/convex_bottom_app_bar.dart';

使用示例

以下是一个完整的示例代码，展示了如何使用 convex_bottom_app_bar 插件来创建一个底部导航栏。

import 'package:flutter/material.dart';
import 'package:convex_bottom_app_bar/convex_bottom_app_bar.dart';

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int currentPage = 0;
  late ConvexTabController tabController = ConvexTabController(initialIndex: 0);

  void onBottomIconPressed(int index) {
    setState(() {
      currentPage = index;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Convex Bottom App Bar Example'),
        ),
        extendBody: true,
        resizeToAvoidBottomInset: false,
        extendBodyBehindAppBar: false,
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButton: FloatingActionButton(
          shape: const CircleBorder(),
          onPressed: () {
            tabController.jumpToTab(3);
          },
        ),
        body: ConvexBody(
          controller: tabController,
          children: const [
            TestPage('Home', Colors.red),
            TestPage('Search', Colors.blue),
            TestPage('Scan QR', Colors.blue),
            TestPage('Cart', Colors.green),
            TestPage('Favorite', Colors.deepOrange),
          ],
        ),
        bottomNavigationBar: ConvexBottomAppBarV2(
          controller: tabController,
          backgroundColor: Colors.white,
          selectedColor: CupertinoColors.activeBlue,
          unSelectedColor: CupertinoColors.inactiveGray,
          indicatorColor: CupertinoColors.activeBlue,
          items: _items(),
        ),
      ),
    );
  }

  List<ConvexBottomAppBarItem> _items() {
    return [
      ConvexBottomAppBarItem(
        icon: const Icon(Icons.home),
        title: 'Home',
      ),
      ConvexBottomAppBarItem(
        icon: const Icon(Icons.search),
        title: 'Search',
      ),
      ConvexBottomAppBarItem(
          title: 'Scan QR',
          textStyle: const TextStyle(
              fontWeight: FontWeight.w500,
              fontSize: 11,
              color: Color(0xFFA6A6A6))),
      ConvexBottomAppBarItem(
        icon: const Icon(Icons.card_travel),
        title: 'Travel',
      ),
      ConvexBottomAppBarItem(
        icon: const Icon(Icons.favorite_border),
        title: 'Fav',
      ),
    ];
  }
}

// 假设有一个TestPage组件用于显示不同的页面
class TestPage extends StatelessWidget {
  final String title;
  final Color color;

  TestPage(this.title, this.color);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Text(title, style: TextStyle(color: color)),
    );
  }
}