Question

我想在购物车图标上添加商品编号，如图所示，并且要在向购物车中添加新商品时进行动画处理。我的购物车图标在appBar中。

Answer 1

示例：

each.key and each.value

Answer 2

可以通过appBar中的这段代码来实现。

appBar: new AppBar(

    actions: <Widget>[

      new Padding(padding: const EdgeInsets.all(10.0),

        child: new Container(
          height: 150.0,
          width: 30.0,
          child: new GestureDetector(
            onTap: () {
              Navigator.of(context).push(
                  new MaterialPageRoute(
                      builder:(BuildContext context) =>
                      new CartItemsScreen()
                  )
              );
            },

            child: new Stack(

              children: <Widget>[
                new IconButton(icon: new Icon(Icons.shopping_cart,
                  color: Colors.white,),
                    onPressed: null,
                ),
                list.length ==0 ? new Container() :
                new Positioned(

                    child: new Stack(
                      children: <Widget>[
                        new Icon(
                            Icons.brightness_1,
                            size: 20.0, color: Colors.green[800]),
                        new Positioned(
                            top: 3.0,
                            right: 4.0,
                            child: new Center(
                              child: new Text(
                                list.length.toString(),
                                style: new TextStyle(
                                    color: Colors.white,
                                    fontSize: 11.0,
                                    fontWeight: FontWeight.w500
                                ),
                              ),
                            )),


                      ],
                    )),

              ],
            ),
          )
        )

        ,)],

Answer 3

试试这个包。它简单易用。

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

Badges

Answer 4

    appBar: new AppBar(
    title: new Text("Add Stock"),
    centerTitle: true,
    actions: [
      Badge(
        position: BadgePosition.topEnd(top: 3, end: 18),
        animationDuration: Duration(milliseconds: 300),
        animationType: BadgeAnimationType.slide,
        badgeContent: Text(
          '3',
          style: TextStyle(color: Colors.white),
        ),
        child: IconButton(
            icon: Icon(Icons.shopping_cart),
            padding: EdgeInsets.only(right: 30.0),
            onPressed: () {}),
      ),
    ],
  ),

如何在flutter中的appBar图标上的购物车图标上添加项目编号？以及如何使它动画添加新项目？

4 个答案: