yako-dev / flutter_badges Goto Github PK

is app icon badge not supported? I can't seem to add an badge on the app icon at the home screen of the device

Hello. I don't know if I should change some properties but I didn't find anything.
If I use Badge in the AppBar inside the actions, the Icon it's totally on different alignment compare to others.

Just a Icon:

If I use the Badge:

Version:
Flutter 1.12.13+hotfix.5 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 27321ebbad (5 weeks ago) • 2019-12-10 18:15:01 -0800
Engine • revision 2994f7e1e6
Tools • Dart 2.7.0
badges: ^1.1.0

flutter_lint is a recommended linter to Flutter projects. It would be nice apply to this project.
if you it's okay with this, I can create a pull request with this change

Hi,

I'm using the package to display successive badges in a row with different letters. The problem comes when the letters have different sizes, so the badge take different size as well. Is there a way to define a fix size?

Thanks!

What version tags match the Pub revisions?

It would be nice to expose more elements from the final Icon button that will be generated like the splash color

There is the BadgePosition, but it's not possible to dynamically center with different child sizes and badge contents.

Here it's a new plugin where it would be very useful: https://github.com/f2acode/pricing_cards

Good Night
After upgrading to badges: ^1.1.3
I got this error
what should i do ???

Compiler message: /C:/flutter/.pub-cache/hosted/pub.dartlang.org/badges-1.1.3/lib/src/badge.dart:83:9: Error: No named parameter with the name 'clipBehavior'. clipBehavior: Clip.none, ^^^^^^^^^^^^ /C:/flutter/packages/flutter/lib/src/widgets/basic.dart:3210:3: Context: Found this candidate, but the arguments don't match. Stack({ ^^^^^

Whether the explicit and implicit animation duration of badgeView can be controlled by parameters

最新版本1.1.4/ 1.1.3 都会报错

I have a widget (button) in param badgeContent. When i install the app for the first time, the button doesn't work but when i touch the 3rd time it works.
Can anyone tell me what's wrong with it?

Hi,

I am using a badge to indicate a problem on an iOS app. I specify a leading parameter in the CupertinoNavigationBar like this:

return CupertinoNavigationBar(
   leading: CupertinoButton(
     child: Badge(child: Text('< Accounts')), 
     onPressed: () {},
   ),
);

My problem now is that the leading is truncated. Do you happen to know how I can ensure that the whole widget is shown?

Thanks a lot for the help and the great badges project!

Thanks for this great package. I wanted to know if there is a way to remove the badge's drop shadow. Or if there's no way currently, I ask you to please implement a way to make it optional.

I want the badge circle a bit smaller. What should I do? There seems no a parameter to achieve this in the Badge constructor.

Hi,

I'm getting this error after upgrading to flutter 1.19.0

`Compiler message:
../../.pub-cache/hosted/pub.dartlang.org/badges-1.1.1/lib/src/badge.dart:83:19: Error: The getter 'Overflow' isn't defined for the class 'BadgeState'.

• 'BadgeState' is from 'package:badges/src/badge.dart' ('../../.pub-cache/hosted/pub.dartlang.org/badges-1.1.1/lib/src/badge.dart').
  Try correcting the name to the name of an existing getter, or defining a getter or field named 'Overflow'.
  overflow: Overflow.visible,
  ^^^^^^^^`

Is it possible to have the animation looped instead of just when the badge content changes?

Hi,

Good package, thx for that!

I have an issues with that (from your example):

      actions: <Widget>[
        _shoppingCartBadge(_counter),
        _shoppingCartBadge(_counter2),
      ],

If _counter is increased both badge are animated. My expectation is that only the first badge gets an animation. Any way to avoid that?

I didn't see certain options available with the pub package that are available with the git repo, like the animation options. Just a heads up

With 1.1.4 (not previous versions), this code crashes:

Badge(
            badgeColor: color,
            padding: const EdgeInsets.all(2.0),
            shape: BadgeShape.square,
            toAnimate: false,
            badgeContent: Text(
              tn.value.toString(),
              style: style.copyWith(
                color: Colors.black,
                fontWeight: FontWeight.bold,
              ),
            ),
          )

Console:

The following assertion was thrown building Badge(dirty, dependencies: [_EffectiveTickerMode], state: BadgeState#b7d97(ticker inactive)):
'package:flutter/src/painting/rounded_rectangle_border.dart': Failed assertion: line 36 pos 15: 'borderRadius != null': is not true.

The relevant error-causing widget was: 
  Badge file:///C:/Projects/www/Dart/_flutter/bt_buddy/lib/widgets/target_number_display.dart:40:11
When the exception was thrown, this was the stack: 
#2      new RoundedRectangleBorder (package:flutter/src/painting/rounded_rectangle_border.dart:36:15)
#3      BadgeState._getBadge (package:badges/src/badge.dart:111:11)
#4      BadgeState.build (package:badges/src/badge.dart:81:14)
#5      StatefulElement.build (package:flutter/src/widgets/framework.dart:4792:27)
#6      ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4675:15)

If I comment out the shape field, it works again, but it becomes circular...

Hi,

How do I use the Badge, when the Widget waits for InconData?

Thanks.

default icon color black
i want to change icon color white

Adding functionality to be able to have a gradient background on a badge. Currently you can only pass a regular colour.

I'd be happy to work on this feature request, or if there are any possible workarounds to get a gradient bg - I'd be open for feedback.

I suggest adding this option BadgePositionDirectional to support devices with RTL support. This would allow specifying start\end as alternative to left\right which will be handy to position the badge relatively in RTL devices.

Similar to AlignmentDirectional as alternative to Alignment,
and EdgeInsetsDirectional as alternative to EdgeInsets

RTL

LTR

Thanks for the great package!

Do you plan to make a null safe update of the package?

Environment

**Package version: badges: ^2.0.3
**Platform: All
**Device information:

Description

Im using the last version of the package and i'm getting the error "Badge is not a function".

When i remove the package import, the Badge isn't giving an error anymore but is getting the badge from material/badge.dart

Expected behavior:
Not giving error when using the package :)

Current behavior:

Steps to reproduce

1. This
2. Than that
3. Then

Stacktrace/Logcat

I'm using this in a fresh Flutter version.. this is my flutter doctor --verbose

[✓] Flutter (Channel master, 3.6.0-4.0.pre.36, on Linux Mint 20 5.4.0-26-generic, locale en_US.UTF-8)
• Flutter version 3.6.0-4.0.pre.36 on channel master at /home/hp/Code/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 537f89ca0e (2 hours ago), 2022-11-17 08:06:24 -0800
• Engine revision 832aae2f85
• Dart version 2.19.0 (build 2.19.0-406.0.dev)
• DevTools version 2.19.0

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
• Android SDK at /home/hp/Android/Sdk
• Platform android-33, build-tools 33.0.0
• Java binary at: /home/hp/Code/android-studio/jre/bin/java
• Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
• All Android licenses accepted.

[✓] Chrome - develop for the web
• Chrome at google-chrome

[✓] Linux toolchain - develop for Linux desktop
• clang version 10.0.0-4ubuntu1
• cmake version 3.16.3
• ninja version 1.10.0
• pkg-config version 0.29.1

[✓] Android Studio (version 2021.3)
• Android Studio at /home/hp/Code/android-studio
• Flutter plugin version 71.0.3
• Dart plugin version 213.7433
• Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)

[✓] Connected device (2 available)
• Linux (desktop) • linux • linux-x64 • Linux Mint 20 5.4.0-26-generic
• Chrome (web) • chrome • web-javascript • Google Chrome 107.0.5304.110

[✓] HTTP Host Availability
• All required HTTP hosts are available

• No issues found!

I have several screen with buttons inside of a column, I wrap the column with an InstrinsicWidth widget to make all the buttons expand to fill the width of the column and be uniform and flexible. When I wrap a button with a badge widget, the badge fits successfully fills out the column, but the button widget itself does not.

I'm not sure if the image is gonna be viewable, but that is an example of what I am talking about. Is this a known issue or am I doing something wrong?

After upgrading to 1.22.0-10.0.pre.196 in master channel error:

Launching lib\main.dart on sdk gphone x86 in debug mode...
/C:/Frameworks/flutter/.pub-cache/hosted/pub.dartlang.org/badges-1.1.1/lib/src/badge.dart:83:9: Error: No named parameter with the name 'overflow'.
        overflow: Overflow.visible,
        ^^^^^^^^
/C:/Frameworks/flutter/packages/flutter/lib/src/widgets/basic.dart:3273:3: Context: Found this candidate, but the arguments don't match.
  Stack({
  ^^^^^

Flutter doctor:

flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel master, 1.22.0-10.0.pre.196, on Microsoft Windows [Version 10.0.19041.508], locale ru-RU)
[√] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[√] Android Studio (version 3.5)
[√] VS Code (version 1.49.0)
[√] Connected device (1 available)

• No issues found!

In pubspec.yaml:

badges: ^1.1.1

Looks like overflow was removed from Stack widget.

With Badge:
ErrorSummary (Incorrect use of ParentDataWidget.)
ErrorDescription (The ParentDataWidget Expanded(flex: 1) wants to apply ParentData of type FlexParentData to a RenderObject,
which has been set up to accept ParentData of incompatible type StackParentData.)
ErrorHint (Usually, this means that the Expanded widget has the wrong ancestor RenderObjectWidget. Typically, Expanded widgets are placed directly inside Flex widgets.)
ErrorHint (The offending Expanded is currently placed inside a Stack widget.)
ErrorDescription (The ownership chain for the RenderObject that received the incompatible parent data was:
SizedBox.expand ← Expanded ← Stack ← Badge ← Row ← Padding ← DecoratedBox ← ConstrainedBox ← Container ← BottomMenubar ← ⋯)

In the below code only outline border-color need to black

` Badge(
badgeColor: Colors.black,
shape: BadgeShape.square,
borderRadius: BorderRadius.circular(20.0),

                              toAnimate: false,
                              badgeContent: Text(
                                  'Hi',
                                  style: TextStyle(color: Colors.blue)),
                            )`

../../../../../development/flutter/.pub-cache/hosted/pub.dartlang.org/badges-1.1.1/lib/src/badge.dart:83:19: Error: The getter 'Overflow' isn't defined for the class 'BadgeState'.
 - 'BadgeState' is from 'package:badges/src/badge.dart' ('../../../../../development/flutter/.pub-cache/hosted/pub.dartlang.org/badges-1.1.1/lib/src/badge.dart').
Try correcting the name to the name of an existing getter, or defining a getter or field named 'Overflow'.
        overflow: Overflow.visible,
                  ^^^^^^^^

doctor

Flutter 1.19.0-2.0.pre.213 • channel master • https://github.com/flutter/flutter.git
Framework • revision eb1a6efe16 (9 hours ago) • 2020-05-30 21:58:02 -0400
Engine • revision 923687f0e7
Tools • Dart 2.9.0 (build 2.9.0-11.0.dev 6489a0c68d)

Running flutter doctor...
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, 1.19.0-2.0.pre.213, on Mac OS X 10.15.3 19D76, locale en-KR)
[!] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[✓] Xcode - develop for iOS and macOS (Xcode 11.4.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 3.6)
[✓] Android Studio (version 3.6)
[✓] VS Code (version 1.45.1)
[✓] Connected device (3 available)

Can you make BadgePosition constructor be const for small build optimization?

Thank you for any consideration.

i am trying to make a clickable badge and I noticed that changing the position using badgePosition.topEnd for example would make the badge unclickable as if the badge is in a place and the gesture detector i have in the badge content, is in another place.
in the following example I am using an Inkwell but the same can be said for the gesture detector. this on top fo the fact that clicking the badge itself even in normal position wouldn't trigger unless u click on the center of it.

 Badge(
                                        child: Padding(
                                          padding: const EdgeInsets.only(bottom: 8),
                                          child: Text(
                                            "text"
                                          ),
                                        ),
                                        position: BadgePosition.topEnd(top: -15, end: -30),
                                        borderRadius: BorderRadius.all(Radius.circular(10)),
                                        shape: BadgeShape.circle,
                                        badgeColor: Colors.transparent,
                                        elevation: 0,
                                        badgeContent: Container(
                                          height: 25,
                                          width: 25,
                                          decoration: BoxDecoration(
                                            borderRadius: BorderRadius.all(Radius.circular(25)),
                                            color: Colors.transparent,
                                          ),
                                          child: Material(
                                            color: Colors.transparent,
                                            child:InkWell(
                                              child:  Icon(Icons.edit, color: MyTheme.grey300, size: 15,),
                                              onTap: (){
                                                print("sdsdsd")
                                              },
                                            ),
                                          ),
                                        ),
                                      ),

the sdsdsd log will not print when I am clearly tapping on the badge, even tapping around the badge won't make it print.
is this a bug and is there a workaround for it ?

Great package!

I was just curious if this was on purpose:

Should the 5 be an 8, like the rest?

Also, it would be great to have a little documentation on this class because I am unclear on what these relative coordinates are precisely relative to. (I just kept experimenting with a bunch of values and landed on -20 for my case -- documentation may have made the deduction faster.)

Following in the awesome practice from flutter of allowing arbitrary widgets as icons, would be great to be able to use a widget as an icon.

For example and Image, a custom icon or anything really.

Hi, i like to much this package asome is my new favorite base package for badges.

But the problem me and maybe other people in the future we will have is if we can put invisble or transparent style because can i put the background color in transparent but the problem is the shadow stay in the backgroud and nothing matter what i do that shadow i cant remove if they help me with other widget with another solucion and i ask about the support for only images this package could be have in the future.

Thank so much and i attach image about the shadow i had in the badge

Hello,

This plugin is really cool but I want to show a badge on a button in a row. The default StackFit parameter in Stack plugin forced to reduce button's size.
Is it possible to let user decide which StackFit he wants to use ?
In my case, the solution would be to change StackFit option to passthrough.

I can make a pull request to fix this if you want to.

I think an extra attribute should be added to add a hide animation. Because you do not want to hide an animation instantly.

    return Badge(
      animationType: BadgeAnimationType.scale,
      animationDuration: Duration(milliseconds: 100),
      showBadge: _showBadge,
      badgeContent: Container(
        height: 4,
        width: 4,
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: Colors.white,
        ),
      ),
      child: Icon(Icons.settings),
    );

setting state for _showBadge will hide the badge but still show the child.

After updating to 1.3.0, I faced this issue.

I'm sorry, this is not an issue but request. Could you add "center" besides BadgePosition.topStart, topEnd, bottomStart, bottomEnd?

This is a great library, just hope to add a few feature to be perfect.

I currently use Flutter v1.22.0-12.0.pre and it warning to migrate to Overflow.visible to clipBehavior: Clip.none

'overflow' is deprecated and shouldn't be used. Use clipBehavior instead. See the migration guide in flutter.dev/go/clip-behavior. This feature was deprecated after v1.22.0-12.0.pre

Everything is fine on Samsung Galaxy Note3(Android 5)：

But on XiaoMI 6(Andorid 9), the badge is cropped:

/Users/lfh/Library/Flutter/bin/flutter doctor --verbose
[✓] Flutter (Channel stable, v1.12.13+hotfix.9, on Mac OS X 10.15.4 19E287, locale zh-Hans-CN)
    • Flutter version 1.12.13+hotfix.9 at /Users/lfh/Library/Flutter
    • Framework revision f139b11009 (2 周前), 2020-03-30 13:57:30 -0700
    • Engine revision af51afceb8
    • Dart version 2.7.2

[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    • Android SDK at /Users/lfh/Library/Android/sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-28, build-tools 28.0.3
    • ANDROID_HOME = /Users/lfh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b4-5784211)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.4)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.4, Build version 11E146
    • CocoaPods version 1.8.4

[✓] Android Studio (version 3.6)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 45.1.1
    • Dart plugin version 192.7761
    • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b4-5784211)

[✓] VS Code (version 1.44.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.9.1

[✓] Connected device (1 available)
    • SM N9006 • 03c3b801 • android-arm • Android 5.0 (API 21)

• No issues found!
Process finished with exit code 0

how to fix it?

The readme page includes the scale animation with the badge going from 0 to 9. (second_badge_example.gif)

Would it be possible to provide an example which produces this badge as it is not the list of examples provided?

this codes not work

animationDuration: Duration(milliseconds: 100),
or
animationDuration: Duration(seconds: 1000),

Hi, i'm trying to use the badge. I don't want the size to change if there is one digit on the text or 2.
I tried wrapping it with container with size
like

 Widget _getTextForCount() {
return  Container(width: 14,
  child: Text(_unreadMessagesCount(),
              textAlign: TextAlign.center,
              style: TextStyle(
                  height: 1,
                  color: listBackground,
                  fontWeight: FontWeight.bold,
                  fontSize: 11,
                  fontFamily: 'Roboto-Regular')),
    );
  }

That's the badge:

Badge(
                                padding: const EdgeInsets.all(5.0),
                                position: BadgePosition.topEnd(),
                                badgeContent: _getTextForCount(),
                                toAnimate: true,
                                badgeColor: orange,
                                animationDuration: const Duration(milliseconds: 600),
                                animationType: BadgeAnimationType.scale,
                                showBadge: widget.unread > 0,
                                child: SvgPicture.asset(
                                  AssetsPath.chatBubble,
                                  fit: BoxFit.fill,
                                ),
                              )

But now the animation is not working. If the remove the container it works.
Any solutions for that? Or - How can I have the same size badge for one or more digits?
Thanks.

Allowing the client to position the badge over the content at a specific position would be useful -- for example, for my use case, I'd like to position the badge at the bottom-right corner of the underlaid icon:

Badge(
    child: Icon(Icons.person),
    badgeContent: Text("3"),
    badgePosition: BadgePosition.bottomRight, // or centerLeft, center, right, topLeft, etc.
);

When i add the lib to my yaml file, it has the following error
The current Dart SDK version is 2.12.0-259.12.beta. Because xxx depends on badge any which requires SDK version >=1.20.1 <=2.1.0, version solving failed.

How should i solve this or should Badge upgrade anything? thanks!

Lovely package, thanks very much. I have an app with a very flat UI, I would love to have outline badges.

The ability to specify the border thickness & border color would be great.