Badges (Package of the Week)

[@KhanhFlutter]

Hey y'all - A quick clarification with the animation in the video: the example code always shows the number "9" but at certain points the badge in the animation shows a different number ranging from 1 through 17. That number 9 in the Badge code should be changing to update the number that is displayed in the Badge itself! My apologies if that caused any confusion. Thanks @EvilTim1911 for calling that out!

[@mohamedhamde6611]

Don't worry bout it

[@AJBatac]

LOL. It's just an example.

[@yutubyuku]

Hey! Appreciate your effort to explain this even though you are not required to!! This makes Flutter community great

[@paucolome4298]

It’s self explanatory chill, good video!

[@ce9916]

No worries, thank you for the great content

[@RivaanRanawat]

Amazing video! In case you want to add multi-colour to the badge, you can use gradient property, change the shape using shape property and even hide the badge using showBadge property. This is a really amazing package, loved it!

[@KhanhFlutter]

Thanks for sharing those tips! I personally always love a nice gradient :)

[@khurramrizvi153]

Nice, have been using stack to achieve this, glad to learn about this widget now. 😄

[@KhanhFlutter]

What a coincidence. I was totally doing the same!

[@freddyoneya2286]

That makes 3... 5... 10... 14 of us

[@kujtimgjokaj659]

was thinking about the same thing lately

[@KhanhFlutter]

We have enough people to form a club!

[@Absurdified]

You are not alone buddy😃

[@codegambit2507]

I literally just wrote my own implementation of a badge yesterday. This video should have been posted sooner😩

[@adimera2668]

😂

[@saitaruns]

🤣🤣

[@justapugontheinternet]

I used to wrap the widget with a stack, and make my own "badge" and position it accordingly. This solves a lot

[@UsamaKarim]

Always grateful of watching these videos 😌

[@mahmood466]

Using Stack for this so far, has been intimidating. Happy to know about this usefull widget.

[@000-way7]

Now that the material design has its own Badge widget, this package component is conflicting with it. So what I do with my projects is to import it as "badger" (import 'package:badges/badges.dart' as badger;) and then use badger.Badeg() widget. Hope it's helpful !

[@manifestemanifeste8148]

Great tip! You can even go further to avoid this conflict with 'import 'package:flutter/material.dart' hide Badge;'

[@000-way7]

@@manifestemanifeste8148 Hey, thanks for the tip. This is simpler.

[@CoderJava]

That's awesome. I don't know that Flutter have a widget with name Badge. So far I've been making manuals to make badges. Thank you Flutter. 👍👍👍

[@barziyassin1]

The magic widget. Amazing!!!

[@flutterdev]

Thanks for watching, Barzy! If you enjoyed this, be sure to check out the "Package of the Week" playlist here: goo.gle/3vRHwaL

[@tashijawed5472]

This, right here, is the most important widget in flutter history!

[@henryifebunandu8]

So something like this existed!!! I have been using fractional offset with stack (I think) to do this... Thank God for these videos🥺

[@rizkyagungramadhan53]

Why using ternary operator inside showBadge parameter? Since "_voicemails > 0" itself return a boolean 😁

[@valerasebafr1]

❤️❤️❤️ good advice

[@eggzzotic]

Seems we now (as-of Flutter (Channel master, 3.6.0-2.0.pre.7)) have a clash between this package and the Badge class in material. Need to use an import that separates the namespaces of each, e.g. import 'package:badges/badges.dart' as badges; and then prefix constructor etc e.g. badges.Badge(...)

[@subrotoxing8214]

Wow ... it's much needed widget now available immediately without copying someone's code^^

[@jayasooriyas8231]

Thanks for the video, I didnt know this one, so I stacked text widget with icon and did lot to get that widget

[@KhanhFlutter]

Thanks for watching! :) Makes me happy to know that it helps to save you some effort!

[@muralicse3637]

Same here. I am using stack widget to get the result

[@MrFibbanacci]

"Go call your mother" xD I love the widged, and the little joke. ;-) Great work!

[@naqeebmaqsood2970]

I've been using this widget from quite a while and it's really handy

[@danielbouady2748]

thank uuuuuu FLUTTER😭😭😭

[@ahsan_khan44]

haha thank you that one i'm looking for. no more need to customize the container.

[@KhanhFlutter]

Thank you for watching! I love to hear that the video could save you a bit of effort! 😀

[@ThaDataSpace101]

What tool do you use to animate this video? The animations make it really useful to convey information in an entertaining way. Love what you guys are doing!

[@wvssbil]

Yeess waiting too

[@KhanhFlutter]

Apologies for the delay! Made sure to check with our awesome video production folks and they've confirmed it's After Effects :)

[@ThaDataSpace101]

@@KhanhFlutter Ah I see, cool! And no worries! Thanks for getting back with me :)

[@KhanhFlutter]

@@ThaDataSpace101 Of course, it's my pleasure! :)

[@vladarskopin3314]

Definitely gonna use some badges in my college project. Thanks a lot!

[@mohammad-karbalaee]

I just needed this

[@Shakl-e]

Cool, I'd also like iOS to have automatic badge count in the system. It's a pain to count it on backend or in background manually.

[@opikariefgame]

Amazing! this most important to implement a notification button

[@kasmonuk9557]

Good idea for e-commerce carts

[@Aspiiire]

Even if you can do the same with a container it is really handy to have especially for the animation

[@hydernotes]

Very good, so advanced feature! thanks for this too.

[@ProbeOfTech]

Awesome!!! 🙌

[@hawarhekmat1174]

Colorscheme the MAGIC ✨

[@autumnuniverse1940]

Finallyyyy I had to use some Circle Avatar and some Stack widgets lol

[@gnrslashsp6501]

Is it possible to put more then one badge icon? Say...1 for messages, other for alarms and so on? It will be nice

[@JavierGarcia-se3vi]

Very useful, Greetings!

[@fluttertutorialpoint]

Amazing video🔥🔥🔥

[@Frederic19880824]

Good to know we use the Badges function. #FlutterForEver

[@Pedro5antos_]

Thanks!

[@baadrqaaba9529]

I wish jetpack compose will get inspired by flutter team to build a developer friendly kit like flutter .

[@mahmoudeslami1145]

I wish too :D , I am starting to learn it

[@alisharifian6977]

I cant find badgeContent !? my flutter version is 3.7

[@fatih1421]

can you share editable text. i need "how can i show like a text widgets". i hope u can help me.

[@aozo0628]

how to change Bagde size?

[@achmadirfanda]

I need question. how to downgrade flutter version? cause i am not supposed in lates version.

[@VovanchoHBK]

Wow cool 😎

[@mddi1420]

Having badge on bottom navbar item would be great

[@asif_imtiaz]

Love it!!!

[@suniljaiswal8070]

Superb 🤩

[@dev_miguel]

Brasil em peso usando Flutter!

[@Kim-by5uy]

Shouldn't this be a widget though. Why is it under the package series

[@papyetlesresistancespapyet2622]

What is the exact name of the package please ?

[@farazkhan6886]

Wow, and i was doing it with stack position obx etc and it's a lot simpler now 😂

[@fabiolucasdev]

Very good.

[@venir_dev]

Damn this is so good. It's so simple it is scary - like, where's the pitfall lol

[@__renesan]

gracias

[@abdopower5913]

i didnt start flutter yet but i come just check the subscription, and guess what the last time i check maybe is less then 10 day it was 361k now is 369k what the hell is that 😃😃 flutter go viral dud 😋😋

[@cavalinhopocoto]

Wonderful

[@orjiemmanuel6442]

I just tried it now didnt work, asked me to create a class called badge

[@KhanhFlutter]

Hey there! Badges is a package so you'll have to add it as a dependency and import it. Installation instructions are available on the pub.dev page here: goo.gle/34uXAVi

[@autumnuniverse1940]

Thanks for this comment Now I know it is a package

[@phatakom]

Was gonna use a package, but got to know there's already a widget 😅

[@erdemsym]

Awesome

[@adisonmasih]

11:34 PM In India. will be up all night :)

[@nattawutxp]

awesome

[@Problemsolver434]

Good to know I don't need to use Stack

[@d.koshkarev]

This only works inside the app. How can I install a badge on my app's icon at a new notification? flutter_app_badger, flutter_app_icon_badge and others don't work!

[@TuGordoBello]

Muy util

[@Baraka0369]

I swear by god I did it today but with stack ….. I’m gonna switch for badge right now

[@crazy-man]

cool insted using stack with text

[@lonelylove2010]

this is what i wan😁😁😁

[@aozo0628]

dependencies: badges: ^2.0.2

[@mustafashaikh7829]

Cool

[@AlexKato-y7k]

in code - 9, but display - 1

[@兒玉拓斗]

how to ioswidget

[@Omarhi51llarious4tsxdl1l]

দারুন

[@suparlan120]

That's what I want

[@nanakwame1122]

Finally

[@takzuo]

👌

[@4naught456]

😍🤩

[@BrazilMentionedHueHue]

Damn I made with stack and circle avatar

[@DartMitai]

круто

[@lewisndiritu378]

.... now go call your mother.

[@tubeasjay]

now go call your mother.

[@EvilTim1911]

I'm bothered by the fact that the text in the code is "9" but the badge itself shows 1, that could be kind of confusing for someone just learning Flutter or using the badges

[@KhanhFlutter]

Good catch! Thank you for calling that out. I started out with it as "9" but then wanted to add in animations, so reset it to 1. Should've caught that one earlier.

[@suleyman_sezer]

Why is the so simple? We are too tired native development.

[@abdelkadersebihi1840]

My mom is dead

[@arjun1194]

ah yes! make useless simple widgets anyone can make, when there is still no official library for background processing

[@yocheeseify]

background processing? Can't you do that with a Future?

[@hunterwilhelm]

@@yocheeseify The future is concurrent, but it has an event loop, so if the future is doing some heavy computation, the whole app freezes. It's only good for IO bound problems not CPU bound. An 'isolate' is something close to spawning a different process for parallel computation instead of concurrent. However the lack of shared memory makes it difficult to use.

[@arjun1194]

Background processing, not concurrency and paralellism, im talking about background as in services in android

[@autumnuniverse1940]

Bruh