yako-dev / flutter_badges Goto Github PK
View Code? Open in Web Editor NEWA flutter package for creating badges.
Home Page: https://pub.dev/packages/badges
License: MIT License
A flutter package for creating badges.
Home Page: https://pub.dev/packages/badges
License: MIT License
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.
);
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.
default icon color black
i want to change icon color white
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'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'.
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?
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.
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
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
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.
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
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
**Package version: badges: ^2.0.3
**Platform: All
**Device information:
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:
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!
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.
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.)
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?
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({ ^^^^^
Is it possible to have the animation looped instead of just when the badge content changes?
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?
What version tags match the Pub revisions?
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?
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
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?
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!
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
Thanks for the great package!
Do you plan to make a null safe update of the package?
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.
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 ← ⋯)
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'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 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.
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!
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
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 ?
It would be nice to expose more elements from the final Icon button that will be generated like the splash color
Can you make BadgePosition
constructor be const
for small build optimization?
Thank you for any consideration.
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
../../../../../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)
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)),
)`
this codes not work
animationDuration: Duration(milliseconds: 100),
or
animationDuration: Duration(seconds: 1000),
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.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.