Flutter web, stack with icon and number

Viewed 42

I am a beginner in flutter, I have a problem with my web application.

I want to use the stack widget but sometimes the stack does not work well. I want to dispaly an icon with a number above.

When i refresh the browser, sometimes the number goes under, sometimes that works well. Maybe the icon take time to load. Do you have any idea how to resolve my problem ?

Error Image

error image

Normal Image

normal image

child: Row(
            children: <Widget>[
              Visibility(
                visible: nb != 0,
                child: Stack(
                  overflow: Overflow.visible,
                  children: <Widget>[
                    Icon(
                      Icons.description,
                      color: AppColors.lightGrey,
                      size: AppSizes.xl,
                    ),
                    Positioned(
                      top: -5.0,
                      left: -5.0,
                      child: Container(
                        padding: const EdgeInsets.all(
                          AppSizes.size0,
                        ),
                        decoration: const BoxDecoration(
                          color: AppColors.red,
                          shape: BoxShape.circle,
                        ),
                        child: Text(
                          nb.toString(),
                          style: const TextStyle(
                            color: Colors.white,
                            fontSize: 10.0,
                          ),
                        ),
                      ),
                    )
                  ],
                ),
              ),
              const SizedBox(width: AppSizes.lg),
              Visibility(
                visible: nb2 != 0,
                child: Stack(
                  overflow: Overflow.visible,
                  children: <Widget>[
                    Icon(
                      Icons.info_outline,
                      color: AppColors.lightGrey,
                      size: AppSizes.xl,
                    ),
                    Positioned(
                      top: -5.0,
                      left: -5.0,
                      child: Container(
                        padding: const EdgeInsets.all(
                          AppSizes.size0,
                        ),
                        decoration: const BoxDecoration(
                          color: AppColors.blue,
                          shape: BoxShape.circle,
                        ),
                        child: Text(
                          nb2.toString(),
                          style: const TextStyle(
                            color: Colors.white,
                            fontSize: 10.0,
                          ),
                        ),
                      ),
                    )
                  ],
                ),
              ),
            ],
          )
0 Answers
Related