Flutter自定义标题栏插件sweet_title的使用

通过 Sweet Title 插件可以轻松创建美观的标题栏。您可以选择带有按钮或不带按钮的标题栏。

如何使用

SweetTitle()

• title - 设置标题内容。（必填）
• horizontalPadding - 设置水平方向的内边距，默认值为 20.0。
• titleMargin - 设置标题周围的外边距，默认值为 EdgeInsets.only(bottom: 20.0)。
• fontSize - 设置标题字体大小，默认值为 20.0。

SweetTitle.button()

• title - 设置标题内容。（必填）
• buttonText - 设置按钮上的文本内容。（必填）
• buttonOnPressed - 设置按钮点击事件回调函数。（必填）
• horizontalPadding - 设置水平方向的内边距，默认值为 20.0。
• titleMargin - 设置标题周围的外边距，默认值为 EdgeInsets.only(bottom: 20.0)。
• buttonStyle - 设置按钮的样式。
• buttonTextColor - 设置按钮内文字的颜色。（必填）
• fontSize - 设置标题字体大小，默认值为 20.0。

开始使用

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

dependencies:
  ...
  sweet_title: ^0.0.3

基本用法

只有标题

SweetTitle.button(
  title: 'Categories',
),

带有按钮的标题

SweetTitle.button(
  title: 'Categories',
  buttonText: 'Explore',
  buttonTextColor: Colors.black,
  buttonOnPressed: () {
    print('Explore button pressed');
  },
  buttonStyle: ElevatedButton.styleFrom(
    onPrimary: Colors.black,
    textStyle: const TextStyle(
      fontSize: 15,
      color: Colors.white,
      fontWeight: FontWeight.bold,
    ),
    primary: Colors.transparent,
    shadowColor: Colors.transparent,
  ),
),

完整示例代码

以下是一个完整的示例代码，展示了如何使用 Sweet Title 插件来创建带有按钮的标题栏。

import 'package:flutter/material.dart';
import 'package:sweet_title/sweet_title.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> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            // 创建一个带有按钮的标题栏
            SweetTitle.button(
              buttonOnPressed: () => print('Button Pressed'),
              buttonText: 'Button',
              buttonTextColor: Colors.black,
              buttonStyle: ElevatedButton.styleFrom(
                padding: const EdgeInsets.symmetric(horizontal: 0, vertical: 0),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(20),
                ),
                onPrimary: Colors.black,
                textStyle: const TextStyle(
                  fontSize: 15,
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                ),
                primary: Colors.transparent,
                shadowColor: Colors.transparent,
              ),
              title: 'N5Lab',
            ),
          ],
        ),
      ),
    );
  }
}