如何在 flutter 的 appBar 图标处的购物车图标上添加商品编号？ 我怎样才能让它动画添加新项目？

Question

I want to add item numbers on the cart icon in flutter like this in picture, and want to animate while adding new item to cart. My cart icon is in appBar.

Answer 1

It can be achieved by this piece of code in 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 2

You can use badges package .

Example:

Chip(
  backgroundColor: Colors.deepPurple,
  padding: EdgeInsets.all(0),
  label: Text('BADGE', style: TextStyle(color: Colors.white)),
),
Badge(
  badgeColor: Colors.deepPurple,
  shape: BadgeShape.square,
  borderRadius: 20,
  toAnimate: false,
  badgeContent:
      Text('BADGE', style: TextStyle(color: Colors.white)),
),

Answer 3

Try this package. It is simple and easy to use.

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

Badges

Answer 4

Here is the simple and modified code from above. Did a few minor changes

actions: [
          Padding(
            padding: const EdgeInsets.all(10.0),
            child: Container(
              width: 35.0,
              alignment: Alignment.center,
              child: GestureDetector(
                onTap: () {
                  // Todo:navigate to cart screen
                  if (kDebugMode) {
                    print("tapped on cart icon");
                  }
                },
                child: Stack(
                  children: <Widget>[
                    const IconButton(
                      icon: Icon(
                        Icons.shopping_cart_sharp,
                        color: kPrimaryColor,
                      ),
                      onPressed: null,
                    ),
                    1 == 0
                        ? Container()
                        : Positioned(
                            top: 0,
                            right: 0,
                            child: Stack(
                              children: <Widget>[
                                Container(
                                  height: 20.0,
                                  width: 20.0,
                                  decoration: const BoxDecoration(
                                    color: kTextColorSecondary,
                                    shape: BoxShape.circle,
                                  ),
                                  child: const Center(
                                    child: Text(
                                      "10",
                                      style: TextStyle(
                                        color: kTextColor,
                                        fontSize: 11.0,
                                        fontWeight: FontWeight.bold,
                                      ),
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                  ],
                ),
              ),
            ),
          ),
        ],

Answer 5

Number of Items Shown on Shopping cart items in Ap

  import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("STORE"),
        centerTitle: true,
        leading: Stack(
          alignment: AlignmentDirectional.center,
          children: [
            IconButton(
              onPressed: () {},
              icon: const Icon(
                Icons.shopping_cart_rounded,
                size: 30,
              ),
            ),
            Positioned(
              top: 4,
              right: 6,
              child: Container(
                height: 22,
                width: 22,
                decoration: const BoxDecoration(
                  shape: BoxShape.circle,
                  color: Colors.purple,
                ),
                child: const Center(
                    child: Text(
                  "12",
                  style: TextStyle(
                    fontSize: 11,
                    fontWeight: FontWeight.bold,
                  ),
                )),
              ),
            ),
          ],
        ),
        actions: [
          IconButton(onPressed: () {}, icon: const Icon(Icons.settings)),
          IconButton(
              onPressed: () {}, icon: const Icon(Icons.more_vert_rounded)),
        ],
      ),
    );
  }
}

You can use Stack As above to show the number of products added to cart right on the Icon (Shopping Cart).

Answer 6

    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: () {}),
      ),
    ],
  ),