如何显示文字附近的徽章计数？

Question

我需要在某些地方用圆圈显示数字，例如按钮。是否有它的小部件？

Answer 1

这对我有用：

  Widget textWithBadge(String text, int count) {
    var children = <Widget>[
      Container(
        alignment: Alignment.centerLeft,
        child: Text(text),
      )
    ];

    if (count > 0) {
      children.add(Container(
        alignment: Alignment.center,
        width: 24,
        height: 23,
        child: Text(
          count.toString(),
          style: TextStyle(
            color: Colors.white,
            fontSize: 12.0,
          ),
        ),
        decoration: BoxDecoration(
          shape: BoxShape.rectangle,
          color: Theme.of(context).accentColor,
          borderRadius: BorderRadius.circular(25),
        ),
      ));
    }

    return SizedBox(
        height: 24,
        width: 200,
        child: Stack(
          alignment: FractionalOffset.topRight,
          children: children,
        ));
  }

Answer 2

您可以使用名为badges: ^1.1.0的库

import 'package:badges/badges.dart';

像这样包裹您的孩子小部件

Badge(
      badgeContent: Text('3'),
      badgeColor: Colors.deepPurple,
      shape: BadgeShape.circle,
      child: yourwidget(),
    );

希望有帮助...

Answer 3

最简单的方法是使用CircularProfileAvatar小部件，

它支持您选择的background image / color，如果您通过任何也支持图像缓存

它支持onTap作为按钮使用

您可以传递radius作为参数

CircularProfileAvatar(
    initialsText: Text("123"),
    radius: 10.0,
    onTap: (){
      //code here
      //if you want it to do something when user taps on it
    }
),