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

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

特性

在库中可以找到许多可用的形状类型。AppBar 中的形状也可以用于 BottomBar，反之亦然。

开始使用

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

dependencies:
  super_custom_bar: ^1.0.0

然后运行 flutter pub get 来获取该包。

使用示例

以下是一个完整的示例，展示了如何使用 SuperCustomBar 包来自定义 AppBar 和 BottomNavigationBar。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 0;

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      bottomNavigationBar: SuperCustomBar(
        flutterAppBar: BottomNavigationBar(
          elevation: 0,
          backgroundColor: Colors.transparent,
          selectedItemColor: Colors.amber[800],
          type: BottomNavigationBarType.fixed,
          unselectedItemColor: Colors.blue,
          items: const [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.grade),
              label: 'Level',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.notifications),
              label: 'Notification',
            ),
          ],
        ),
        customPaint: Paint()
          ..color = Colors.black,
        shapeType: SuperCustomBarTypes.shapeTopMultipleFringe,
        customHeight: 125,
      ),
      appBar: SuperCustomBar(
        customHeight: 75,
        customPaint: Paint()
          ..shader = LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: [Colors.green, Colors.red]),
        shapeType: SuperCustomBarTypes.shapeBottomMultipleFringe,
        flutterAppBar: AppBar(
          leading: const BackButton(
            color: Colors.white,
          ),
          elevation: 0,
          backgroundColor: Colors.transparent,
          title: Container(
            alignment: Alignment.center,
            child: Text('Your Title Here', style: TextStyle(fontSize: 24)),
          ),
          centerTitle: true,
          actions: [
            IconButton(
              icon: Icon(Icons.settings),
              onPressed: () {},
            ),
          ],
        ),
      ),
      body: const TabBarView(
        children: [
          Icon(Icons.directions_car),
          Icon(Icons.directions_transit),
          Icon(Icons.directions_bike),
        ],
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}