Badges (Package of the Week)

Поделиться
HTML-код
  • Опубликовано: 26 окт 2024

Комментарии • 127

  • @KhanhFlutter
    @KhanhFlutter 2 года назад +176

    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
      @mohamedhamde6611 2 года назад +7

      Don't worry bout it

    • @AJBatac
      @AJBatac 2 года назад +12

      LOL. It's just an example.

    • @yutubyuku
      @yutubyuku 2 года назад +1

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

    • @paucolome4298
      @paucolome4298 2 года назад

      It’s self explanatory chill, good video!

    • @ce9916
      @ce9916 2 года назад

      No worries, thank you for the great content

  • @RivaanRanawat
    @RivaanRanawat 2 года назад +42

    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
      @KhanhFlutter 2 года назад +3

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

  • @khurramrizvi153
    @khurramrizvi153 2 года назад +63

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

    • @KhanhFlutter
      @KhanhFlutter 2 года назад +3

      What a coincidence. I was totally doing the same!

    • @freddyoneya2286
      @freddyoneya2286 2 года назад +3

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

    • @kujtimgjokaj659
      @kujtimgjokaj659 2 года назад +2

      was thinking about the same thing lately

    • @KhanhFlutter
      @KhanhFlutter 2 года назад +2

      We have enough people to form a club!

    • @Absurdified
      @Absurdified 2 года назад +4

      You are not alone buddy😃

  • @codegambit2507
    @codegambit2507 2 года назад +15

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

  • @justapugontheinternet
    @justapugontheinternet 2 года назад +8

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

  • @UsamaKarim
    @UsamaKarim 2 года назад +1

    Always grateful of watching these videos 😌

  • @mahmood466
    @mahmood466 2 года назад +4

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

  • @CoderJava
    @CoderJava 2 года назад +1

    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. 👍👍👍

  • @henryifebunandu8
    @henryifebunandu8 2 года назад +1

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

  • @barziyassin1
    @barziyassin1 2 года назад +2

    The magic widget. Amazing!!!

    • @flutterdev
      @flutterdev  2 года назад +1

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

  • @tashijawed5472
    @tashijawed5472 2 года назад

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

  • @ahsan_khan44
    @ahsan_khan44 2 года назад +3

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

    • @KhanhFlutter
      @KhanhFlutter 2 года назад +1

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

  • @jayasooriyas8231
    @jayasooriyas8231 2 года назад +4

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

    • @KhanhFlutter
      @KhanhFlutter 2 года назад +1

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

    • @muralicse3637
      @muralicse3637 2 года назад

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

  • @MrFibbanacci
    @MrFibbanacci 2 года назад

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

  • @naqeebmaqsood2970
    @naqeebmaqsood2970 2 года назад

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

  • @subrotoxing8214
    @subrotoxing8214 2 года назад

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

  • @vladarskopin3314
    @vladarskopin3314 2 года назад

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

  • @mohammad-karbalaee
    @mohammad-karbalaee 2 месяца назад

    I just needed this

  • @kasmonuk9557
    @kasmonuk9557 2 года назад

    Good idea for e-commerce carts

  • @000-way7
    @000-way7 Год назад +3

    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
      @manifestemanifeste8148 10 месяцев назад +1

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

    • @000-way7
      @000-way7 10 месяцев назад

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

  • @valerasebafr1
    @valerasebafr1 2 года назад +1

    ❤️❤️❤️ good advice

  • @rizkyagungramadhan53
    @rizkyagungramadhan53 2 года назад +3

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

  • @autumnuniverse1940
    @autumnuniverse1940 2 года назад +1

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

  • @Shakl-e
    @Shakl-e 2 года назад +3

    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.

  • @Pedro5antos_
    @Pedro5antos_ 2 года назад

    Thanks!

  • @hawarhekmat1174
    @hawarhekmat1174 2 года назад

    Colorscheme the MAGIC ✨

  • @Aspiiire
    @Aspiiire 2 года назад

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

  • @opikariefgame
    @opikariefgame 2 года назад

    Amazing! this most important to implement a notification button

  • @hydernotes
    @hydernotes 2 года назад

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

  • @JavierGarcia-se3vi
    @JavierGarcia-se3vi 2 года назад +1

    Very useful, Greetings!

  • @danielbouady2748
    @danielbouady2748 2 года назад

    thank uuuuuu FLUTTER😭😭😭

  • @Frederic19880824
    @Frederic19880824 2 года назад

    Good to know we use the Badges function. #FlutterForEver

  • @baadrqaaba9529
    @baadrqaaba9529 2 года назад +1

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

  • @dev_miguel
    @dev_miguel 2 года назад

    Brasil em peso usando Flutter!

  • @ThaDataSpace101
    @ThaDataSpace101 2 года назад +10

    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
      @wvssbil 2 года назад

      Yeess waiting too

    • @KhanhFlutter
      @KhanhFlutter 2 года назад +4

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

    • @ThaDataSpace101
      @ThaDataSpace101 2 года назад

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

    • @KhanhFlutter
      @KhanhFlutter 2 года назад

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

  • @fluttertutorialpoint
    @fluttertutorialpoint 2 года назад

    Amazing video🔥🔥🔥

  • @ProbeOfTech
    @ProbeOfTech 2 года назад

    Awesome!!! 🙌

  • @gnrslashsp6501
    @gnrslashsp6501 2 года назад

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

  • @eggzzotic
    @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(...)

  • @mddi1420
    @mddi1420 2 года назад

    Having badge on bottom navbar item would be great

  • @farazkhan6886
    @farazkhan6886 2 года назад

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

  • @fabiolucasdev
    @fabiolucasdev 2 года назад

    Very good.

  • @venir_dev
    @venir_dev 2 года назад

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

  • @VovanchoHBK
    @VovanchoHBK 2 года назад +1

    Wow cool 😎

  • @__renesan
    @__renesan 2 года назад

    gracias

  • @suniljaiswal8070
    @suniljaiswal8070 2 года назад

    Superb 🤩

  • @adisonmasih
    @adisonmasih 2 года назад

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

  • @alisharifian6977
    @alisharifian6977 Год назад

    I cant find badgeContent !? my flutter version is 3.7

  • @Kim-by5uy
    @Kim-by5uy 2 года назад

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

  • @achmadirfanda
    @achmadirfanda 2 года назад

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

  • @cavalinhopocoto
    @cavalinhopocoto 2 года назад

    Wonderful

  • @asif_imtiaz
    @asif_imtiaz 2 года назад

    Love it!!!

  • @abdopower5913
    @abdopower5913 2 года назад

    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 😋😋

  • @aozo0628
    @aozo0628 2 года назад

    dependencies:
    badges: ^2.0.2

  • @phatakom
    @phatakom 2 года назад

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

  • @nattawutxp
    @nattawutxp 2 года назад

    awesome

  • @erdemsym
    @erdemsym 2 года назад

    Awesome

  • @fatih1421
    @fatih1421 2 года назад

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

  • @Problemsolver434
    @Problemsolver434 2 года назад

    Good to know I don't need to use Stack

  • @crazy-man
    @crazy-man 2 года назад

    cool insted using stack with text

  • @Baraka0369
    @Baraka0369 2 года назад

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

  • @papyetlesresistancespapyet2622
    @papyetlesresistancespapyet2622 2 года назад

    What is the exact name of the package please ?

  • @TuGordoBello
    @TuGordoBello 2 года назад

    Muy util

  • @suparlan120
    @suparlan120 2 года назад

    That's what I want

  • @aozo0628
    @aozo0628 2 года назад

    how to change Bagde size?

  • @mustafashaikh7829
    @mustafashaikh7829 2 года назад

    Cool

  • @lonelylove2010
    @lonelylove2010 2 года назад

    this is what i wan😁😁😁

  • @AlexKato-y7k
    @AlexKato-y7k 2 года назад

    in code - 9, but display - 1

  • @Omarhi51llarious4tsxdl1l
    @Omarhi51llarious4tsxdl1l Год назад

    দারুন

  • @nanakwame1122
    @nanakwame1122 2 года назад

    Finally

  • @d.koshkarev
    @d.koshkarev 2 года назад

    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!

  • @takzuo
    @takzuo 2 года назад

    👌

  • @orjiemmanuel6442
    @orjiemmanuel6442 2 года назад

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

    • @KhanhFlutter
      @KhanhFlutter 2 года назад

      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
      @autumnuniverse1940 2 года назад +1

      Thanks for this comment
      Now I know it is a package

  • @4naught456
    @4naught456 2 года назад

    😍🤩

  • @BrazilMentionedHueHue
    @BrazilMentionedHueHue 2 года назад

    Damn I made with stack and circle avatar

  • @DartMitai
    @DartMitai 2 года назад

    круто

  • @lewisndiritu378
    @lewisndiritu378 2 года назад

    .... now go call your mother.

  • @兒玉拓斗
    @兒玉拓斗 2 года назад

    how to ioswidget

  • @suleyman_sezer
    @suleyman_sezer 2 года назад

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

  • @abdelkadersebihi1840
    @abdelkadersebihi1840 2 года назад

    My mom is dead

  • @EvilTim1911
    @EvilTim1911 2 года назад

    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
      @KhanhFlutter 2 года назад +2

      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.

  • @arjun1194
    @arjun1194 2 года назад

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

    • @yocheeseify
      @yocheeseify 2 года назад

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

    • @hunterwilhelm
      @hunterwilhelm 2 года назад

      @@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
      @arjun1194 2 года назад

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

    • @autumnuniverse1940
      @autumnuniverse1940 2 года назад

      Bruh