Flutter徽章按钮插件badge_button的使用

Flutter徽章按钮插件badge_button的使用

特性

该插件提供了创建带有徽章的按钮的功能。

开始使用

要开始使用此插件，请确保你已经在项目的pubspec.yaml文件中添加了相应的依赖项。例如：

dependencies:
  badge_button: ^x.x.x

然后运行 flutter pub get 来安装依赖。

使用

以下是如何在你的Flutter项目中使用BadgeButton组件的示例：

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:badge_button/badge_button.dart'; // 假设插件名为badge_button

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

class Example extends StatelessWidget {
  const Example({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 ExamplePage(title: 'Example'),
    );
  }
}

class ExamplePage extends StatefulWidget {
  const ExamplePage({super.key, required this.title});
  final String title;

  [@override](/user/override)
  State<ExamplePage> createState() => _ExamplePageState();
}

class _ExamplePageState extends State<ExamplePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: const Row(
        children: [
          Spacer(),
          Column(
            children: [
              Spacer(),
              BadgeButton(
                color: Colors.blue,
                hasIcon: false,
                text: "Example",
                textColor: Colors.white,
                textSize: 13,
              ),
              Spacer(),
            ],
          ),
          Spacer(),
        ],
      ),
    );
  }
}

参数

以下是BadgeButton组件的主要参数说明：

• color: 按钮背景颜色。
• textColor: 文本颜色。
• textSize: 文本大小。
• hasIcon: 是否包含图标。
• text: 显示的文本。
• imagePath: 图标路径（可选）。

源代码

下面是BadgeButton组件的源代码：

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

class BadgeButton extends StatelessWidget {
  final Color color;
  final Color textColor;
  final double textSize;
  final bool hasIcon;
  final String text;
  final String imagePath;
  const BadgeButton({
    super.key,
    required this.color,
    required this.hasIcon,
    required this.text,
    required this.textColor,
    required this.textSize,
    this.imagePath = "",
  });

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      decoration: BoxDecoration(
        color: color,
        borderRadius: BorderRadius.circular(20),
      ),
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            hasIcon
                ? Image.asset(
                    imagePath,
                    cacheHeight: 24,
                    cacheWidth: 24,
                    color: textColor,
                  )
                : const SizedBox(),
            hasIcon ? const SizedBox(width: 10) : const SizedBox(),
            Text(
              text,
              style: GoogleFonts.inter(
                color: textColor,
                fontSize: textSize,
                fontWeight: FontWeight.normal,
              ),
            ),
          ],
        ),
      ),
    );
  }
}