颤振中浮动操作按钮上的通知徽章

Question

我想将商品添加到购物车。购物车将是浮动操作按钮和我想在其顶部显示的项目计数。请帮我解决一下这个。我想要这样的东西

Answer 1

好吧，floatingActionButton接收Widget类型，这意味着你可以让Widget成为一个FloactionActionButton，所以，你可以使用徽章包，像这样：

Badge(
        toAnimate: true,
        shape: BadgeShape.circle,
        badgeColor: Colors.red,
        borderRadius: BorderRadius.circular(8),
        badgeContent: Text('0', style: TextStyle(color: Colors.white)),
        child: Icon(
          Icons.shopping_cart,
        ),
      )

Link到包裹：https://pub.dev/packages/badges

Answer 2

如果您不想安装任何第 3 方包，您可以随时使用 Stack 小部件创建您自己的徽章。

基本上，在设置您 Scaffold 的 floatingActionButton 属性时，您可以使用 Stack 小部件来构建您的 Badge。

例如：

class BadgeExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Container(),
    floatingActionButton: Container(
      child: FittedBox(
        child: Stack(
          alignment: Alignment(1.4, -1.5),
          children: [
            FloatingActionButton(  // Your actual Fab
              onPressed: () {},
              child: Icon(Icons.add),
              backgroundColor: Colors.deepOrange,
            ),
            Container(             // This is your Badge
              child: Center(
                  // Here you can put whatever content you want inside your Badge
                  child: Text('4', style: TextStyle(color: Colors.white)),
              ),
              padding: EdgeInsets.all(8),
              constraints: BoxConstraints(minHeight: 32, minWidth: 32),
              decoration: BoxDecoration( // This controls the shadow
                boxShadow: [
                  BoxShadow(
                    spreadRadius: 1,
                    blurRadius: 5,
                    color: Colors.black.withAlpha(50))
                ],
                borderRadius: BorderRadius.circular(16),
                color: Colors.blue,  // This would be color of the Badge
              ),
            ),
          ],
        ),
      ),
    ),
  );
}
}

输出

颤振中浮动操作按钮上的通知徽章

Notification badge on floating action button in flutter

flutter

flutter-test

flutter-layout