Flutter自定义应用栏插件gt_appbar的使用

Flutter自定义应用栏插件gt_appbar的使用

gt_appbar 是一个为 Flutter 设计的可定制的应用栏小部件，提供了增强的功能，如底部曲线和可选的分割线，以实现多样化的应用栏设计。

特性

• 提供了广泛的样式选项，包括颜色、文本样式和组件位置。
• 允许应用栏具有曲线的底部边缘，以获得独特的视觉效果。
• 提供了一个可选的分割线在应用栏下方，以增强内容分离和用户界面清晰度。
• 确保与不同主题和亮度模式无缝集成，以保持应用程序的一致美学。

开始使用

要使用此插件，只需将 gt_appbar 添加到您的 pubspec.yaml 文件中作为依赖项即可。

使用示例

最小化示例

GTAppBar(
  title: "Global AppBar",
)

自定义设置示例

GTAppBar(
  title: "Global AppBar",
  backgroundColor: Colors.blueAccent.withOpacity(0.5),
  showDivider: true,
  bottomCurveness: 8.0,
  elevation: 8.0,
  centerTitle: false,
  titleSpacing: 0.0,
  leading: IconButton(
    icon: const Icon(Icons.menu),
    onPressed: () {
      // 处理菜单点击事件
    },
  ),
  actions: [
    IconButton(
      icon: const Icon(Icons.search),
      onPressed: () {
        // 处理搜索点击事件
      },
    ),
    IconButton(
      icon: const Icon(Icons.notifications),
      onPressed: () {
        // 处理通知点击事件
      },
    ),
  ],
)

完整示例代码

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

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const AppBarExample(),
    );
  }
}

class AppBarExample extends StatefulWidget {
  const AppBarExample({super.key});

  [@override](/user/override)
  State<AppBarExample> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<AppBarExample> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: GTAppBar(
        title: "Global AppBar",
        backgroundColor: Colors.white,
        showDivider: true,
        bottomCurveness: 8.0,
        elevation: 8.0,
        centerTitle: false,
        titleSpacing: 0.0,
        leading: IconButton(
          icon: const Icon(Icons.menu),
          onPressed: () {
            // 处理菜单点击事件
          },
        ),
        actions: [
          IconButton(
            icon: const Icon(Icons.search),
            onPressed: () {
              // 处理搜索点击事件
            },
          ),
          IconButton(
            icon: const Icon(Icons.notifications),
            onPressed: () {
              // 处理通知点击事件
            },
          ),
        ],
      ),
    );
  }
}