Flutter Widget - Badges 标记

Posted 2023-03-09 优小U

参考文档：https://pub.dev/packages/badges

安装

在 pubspec.yaml 中加入：

dependencies:
  badges: ^3.0.2

基本用法

注意！在 Flutter 3.7 中，Badge 小部件被引入到 Material 库中，因此为了避免模棱两可的导入，您需要像这样导入包：

import 'package:badges/badges.dart' as badges;

然后使用 badges.Badge 小部件而不是 Badge 小部件。

badges.Badge(
  badgeContent: Text('3'),
  child: Icon(Icons.settings),
)

高级用法

import 'package:flutter/material.dart';
import 'package:badges/badges.dart' as badges;

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


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

  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Badges 标记'),
        ),
        body: Center(
          child: badges.Badge(
            badgeContent: const Text('6',
              style: TextStyle(color: Colors.white),
            ),
            position: badges.BadgePosition.topEnd(top: -5, end: -4),
            badgeStyle: badges.BadgeStyle(
              shape: badges.BadgeShape.square,
              badgeColor: Colors.blue,
              padding: const EdgeInsets.all(5),
              borderRadius: BorderRadius.circular(4),
              borderSide: const BorderSide(color: Colors.white, width: 2),
              borderGradient: const badges.BadgeGradient.linear(
                colors: [Colors.red, Colors.yellow],
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter
              ),
              elevation: 0
            ),
            badgeAnimation: const badges.BadgeAnimation.fade(
              animationDuration: Duration(seconds: 1),
              curve: Curves.easeInOut
            ),
            child: const Icon(
              Icons.access_time,
              size: 40,
              color: Colors.orange,
            )
          )
        )
      )
    );