Flutter-如何在工具栏中对齐徽章图标？

Question

我在Flutter应用中使用了badges package。这是我的代码：

appBar: AppBar(
  title: Text("test"),
  actions: <Widget>[
    IconButton(
      icon: Icon(Icons.search),
      onPressed: () {},
    ),
    Badge(
      position: BadgePosition.topRight(top: 0, right: 2),
      animationDuration: Duration(milliseconds: 300),
      animationType: BadgeAnimationType.slide,
      badgeContent: Text(
        '7',
        style: TextStyle(color: Colors.white),
      ),
      child: IconButton(icon: Icon(Icons.shopping_cart), onPressed: () {}),
    ),
  ],
)

这是我的结果：

但是图标未垂直对齐。   我想垂直对齐购物车图标。使其与标题和搜索图标处于同一级别。

我该如何解决？

Answer 1

更早的：

现在：

只需将Badge包裹在Align或Center中即可。

Align(
  child: Badge(
    position: BadgePosition.topRight(top: 0, right: 2),
    animationDuration: Duration(milliseconds: 300),
    animationType: BadgeAnimationType.slide,
    badgeContent: Text(
      '7',
      style: TextStyle(color: Colors.white),
    ),
    child: IconButton(icon: Icon(Icons.shopping_cart), onPressed: () {}),
  ),
)

Answer 2

您可以使用Center小部件包装徽章：

Center(
  child: Badge(
    position: BadgePosition.topRight(top: 0, right: 2),
    animationDuration: Duration(milliseconds: 300),
    animationType: BadgeAnimationType.slide,
    badgeContent: Text(
      '7',
      style: TextStyle(color: Colors.white),
    ),
    child:
    IconButton(icon: Icon(Icons.shopping_cart), onPressed: () {}),
  ),
)