yako-dev/flutter_badges

技术话题

# flutter # dart # mobile # ui-components # chips # badge # ui # android # ios # widget

使用的依赖

依赖清单 3 项

flutter{"sdk":"flutter"}
flutter_test开发依赖{"sdk":"flutter"}
flutter_lints开发依赖^6.0.0

原始 README

以下为英文项目原文快照，最新内容请访问 GitHub。

展开 / 收起项目 README

https://github.com/yako-dev/flutter_badges/blob/master/images/readme_header.png?raw=true

https://github.com/yako-dev/flutter_badges/blob/master/images/showcase.gif?raw=true

Installing:

In your pubspec.yaml

dependencies:
  badges: ^3.2.0

Attention! In Flutter 3.7 the Badge widget was introduced in the Material library, so to escape the ambiguous imports you need to import the package like this:

Option 1: namespace prefix

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

and then use the "badges.Badge" widget instead of the "Badge" widget. The same for all the classes from this package.

Option 2: hide Flutter's Material Badge widget

import 'package:badges/badges.dart';
import 'package:flutter/material.dart' hide Badge;

Basic Usage:

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

Advanced usage

    badges.Badge(
      position: badges.BadgePosition.topEnd(top: -10, end: -12),
      showBadge: true,
      ignorePointer: false,
      onTap: () {},
      badgeContent:
          Icon(Icons.check, color: Colors.white, size: 10),
      badgeAnimation: badges.BadgeAnimation.rotation(
        animationDuration: Duration(seconds: 1),
        colorChangeAnimationDuration: Duration(seconds: 1),
        loopAnimation: false,
        curve: Curves.fastOutSlowIn,
        colorChangeAnimationCurve: Curves.easeInCubic,
      ),
      badgeStyle: badges.BadgeStyle(
        shape: badges.BadgeShape.square,
        badgeColor: Colors.blue,
        padding: EdgeInsets.all(5),
        borderRadius: BorderRadius.circular(4),
        borderSide: BorderSide(color: Colors.white, width: 2),
        borderGradient: badges.BadgeGradient.linear(
            colors: [Colors.red, Colors.black]),
        badgeGradient: badges.BadgeGradient.linear(
            colors: [Colors.blue, Colors.yellow],
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
        ),
        elevation: 0,
      ),
      child: Text('Badge'),
    ),

Animations:

https://github.com/yako-dev/flutter_badges/blob/master/images/badge_animations_preview.gif?raw=true

From left to right:
1) Color change animation 2) BadgeAnimation.slide 3) BadgeAnimation.fade 4) BadgeAnimation.scale 5) BadgeAnimation.size 6) BadgeAnimation.rotation
Also, loop animation is available, this will loop the animation until you stop it.