Как я могу показать количество значков рядом с текстом?

Question

Мне нужно показать число в кружке в некоторых местах, например кнопку. Есть ли для него виджет?

Answer 1

Вы можете использовать библиотеку с именем badges: ^1.1.0

import 'package:badges/badges.dart';

, оберните ваш дочерний виджет вот так

Badge(
      badgeContent: Text('3'),
      badgeColor: Colors.deepPurple,
      shape: BadgeShape.circle,
      child: yourwidget(),
    );

надеюсь, это поможет ...

Answer 2

Самый простой способ - использовать CircularProfileAvatar Виджет,

. Он поддерживает background image / color на ваш выбор, поддерживает кэширование изображения, еслиВы передаете любой

, который поддерживает onTap для работы в качестве кнопки

Вы можете передать radius в качестве параметра

CircularProfileAvatar(
    initialsText: Text("123"),
    radius: 10.0,
    onTap: (){
      //code here
      //if you want it to do something when user taps on it
    }
),

Answer 3

Это работает для меня:

  Widget textWithBadge(String text, int count) {
    var children = <Widget>[
      Container(
        alignment: Alignment.centerLeft,
        child: Text(text),
      )
    ];

    if (count > 0) {
      children.add(Container(
        alignment: Alignment.center,
        width: 24,
        height: 23,
        child: Text(
          count.toString(),
          style: TextStyle(
            color: Colors.white,
            fontSize: 12.0,
          ),
        ),
        decoration: BoxDecoration(
          shape: BoxShape.rectangle,
          color: Theme.of(context).accentColor,
          borderRadius: BorderRadius.circular(25),
        ),
      ));
    }

    return SizedBox(
        height: 24,
        width: 200,
        child: Stack(
          alignment: FractionalOffset.topRight,
          children: children,
        ));
  }