如何在文本附近显示徽章计数?

Question

我需要在某些地方用圆圈显示数字，比如按钮。有小部件吗？

Answer 1

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

import 'package:badges/badges.dart';

像这样包装你的孩子小部件

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

希望对...

Answer 2

最简单的方法是使用CircularProfileAvatarWidget，

它支持您选择的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
}
),

Answer 3

这对我有用：

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,
));
}