Flutter Tutorial - Sliver App Bar & Collapsing Toolbar

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

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

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

    This might help you :)
    👉 12 Week Flutter Training from Newbie to Expert: heyflutter.com
    Source Code: github.com/JohannesMilke/sliver_appbar_ii_example
    App Bar & Transparent App Bar Tutorial: ruclips.net/video/dHBF4IJZvHk/видео.html
    Search App Bar Tutorial: ruclips.net/video/RaACAwvZ61E/видео.html
    Sticky Headers & Slivers Tutorial: ruclips.net/video/QVxd0K_74Pc/видео.html
    Material Banner Tutorial: ruclips.net/video/tmv42IcXh9M/видео.html
    SnackBar Tutorial: ruclips.net/video/UkudAgCEhBI/видео.html
    FlushBar & Top SnackBar Tutorial: ruclips.net/video/H-XEIkUfN4M/видео.html
    Dialogs Tutorial: ruclips.net/video/EjfiI7AY6EY/видео.html
    Focused Menu Tutorial: ruclips.net/video/Vttl7WGtkgg/видео.html
    Popup Menu Button Tutorial: ruclips.net/video/Y-jgYe0vevM/видео.html
    Navigation SideBar Tutorial: ruclips.net/video/t8vPjrCTHyg/видео.html

  • @darko8376
    @darko8376 3 года назад +4

    This is by far the best widget tutorial. Keep the good content coming!!! Great Jooooob

  • @zubairafzal6196
    @zubairafzal6196 3 года назад +1

    BEST EXPLAINATION ABOUT SILVERS...THANKS MAN!! YOU MADE MY DAY..

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

      Awesome 😉Thanks Zubair! 🙂If you want to learn more about slivers check this tutorial out: ruclips.net/video/QVxd0K_74Pc/видео.html

  • @_mantis
    @_mantis 3 года назад +5

    I just recently discovered your tutorials and I'm really enjoying them. Thank you so much!

  • @ahmadsalem5418
    @ahmadsalem5418 3 года назад +1

    You are the best programmer I have seen in my life
    Thank you
    continue
    I wish you good luck

  • @SunGkd123
    @SunGkd123 3 года назад +5

    The tutorials are top notch. Thank you so much :D

  • @simplegirl2218
    @simplegirl2218 3 года назад +1

    Thank you so much for this wonderful video. I'm searching for this from yesterday. This video made my day. please do more videos.

  • @oldanandiansassociationchi1157
    @oldanandiansassociationchi1157 3 года назад +1

    tanks you very very much sir.i was looking for a solution like this.please make a more videos like this(Advance Video)..thnks again

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

      Thanks Dayan! 🙂Sure I have more advanced videos, check my whole playlist out: ruclips.net/video/-mYLjTYn4ZA/видео.html

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

    GRACIASSSSS POR ESTE CONTENIDO!!! Saludos desde Colombia

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

      Thank you, Jorge Ramos Arellano! 🙂

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

    Nice tutorial. Really like your accent.

  • @pringstom
    @pringstom 3 года назад

    nice bro! Greetings from Peru

  • @user-kw4kp7eq9m
    @user-kw4kp7eq9m 2 года назад

    Thank you very much, Johannes!

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

    you are the best bro

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

    Best explanation ever❤

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

    You are my hero!)) Google should pay to you)

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

      Great, Thank You Anton Yaz

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

    thanks a lot it was very clear.

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

      Glad you liked it, Hesham Abuzaid 😀

  • @flaasher
    @flaasher 3 года назад

    Amazing ... was looking for this one 🙏🙂

  • @andresacm8453
    @andresacm8453 3 года назад

    love this tutorial, thanks bro

  • @mildercastillo2
    @mildercastillo2 3 года назад

    Bravo !!! Nice tutorial !!!

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

    Thanks for the video

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

      You are welcome, Daumienebi!

  • @flutterace4695
    @flutterace4695 Месяц назад

    Thank you very much

    • @HeyFlutter
      @HeyFlutter  25 дней назад

      You are welcome, @flutterace4695!

  • @ahmeedev
    @ahmeedev 3 года назад

    Thanks for the awesome effort.

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

    awesome tutorial

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

    can you make a tutorial about notifications, please?

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

      Thanks, Danny! 🙂 I already have tutorials about notifications below:
      1. Push Notifications 1 Tutorial: ruclips.net/video/wjJN1C9UxpY/видео.html
      2. Push Notifications 2 Tutorial: ruclips.net/video/4_2LlswlS2Q/видео.html
      3. Push Notifications 3 Tutorial: ruclips.net/video/7A7-LdYSUOg/видео.html
      4. Local Notifications 1 Tutorial: ruclips.net/video/xMeCwF5MO6w/видео.html
      5. Local Notifications 2 Tutorial: ruclips.net/video/lVDO58jCiCo/видео.html

  • @1flutterpro
    @1flutterpro 3 года назад

    The best video

  • @jamlookstech4948
    @jamlookstech4948 3 года назад

    I clicked bell 🔔 icon

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

    Great video. Thanks

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

    thank u brother

  • @МихаилРастопчин-ы8з

    Thank you very much!

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

    Thanks!

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

      Thanks, Luka Katsadze! 🙂

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

    Hi Mike,
    Then how change the Status bar color, when image expanded and when the appbar solid color?
    Thanks

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

    floating work perfect with CustomAppBar but it does not work with NestedScrollView

  • @auliasabril1899
    @auliasabril1899 3 года назад

    Awesome mike, please make video length like this again, not over 12 minutes, i cannot focus more than 12 minutes 😁

    • @auliasabril1899
      @auliasabril1899 3 года назад

      @@HeyFlutter if you have longer video, it's fine to split into two video 😀

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

      Thanks, Aulia! 🙂Sure I try to keep most of my videos around this range of 12 minutes. 💪 But there will be also sometimes some longer videos where I can go more into detail about a topic.

  • @saradar21
    @saradar21 3 года назад

    Nice Work Man .... But how can I make the background image of the app bar clickable .. So I can click on it to see it
    fullsize ?

  • @ionkhan
    @ionkhan 3 года назад

    can we also centralize the title in the center of expanded Sliver app bar? Rather than in bottom center?

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

    Can we make different color while we scroling the sliver?

  • @souravchatterjee9418
    @souravchatterjee9418 3 года назад

    Thanks man!👍

  • @theimpulson
    @theimpulson 3 года назад

    Love your videos. Any chances for videos on MethodChannel and Threading?

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

      Thanks for the idea, Aayush! 🙂 Sure for the future, however right now I'm staying within the Flutter Basics.

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

    Hey, I created Sliver app bar like you. I want to generate a list view builder in the body by getting data from API. How can I do it? help me.

  • @kingbheem640
    @kingbheem640 3 года назад +1

    How to set paginated data table no data message on a table row

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

      Thank You King Bheem! Follow this link: medium.com/flutterdevs/datatable-in-flutter-9242b4a19e67
      I hope you will get your answer 🙂

  • @slugworth4467
    @slugworth4467 3 года назад

    hi sir i love your videos so much and i ve been following for quite a while now.
    I am planning on building and app with your tutorial pretty soon.
    But please i wanna know some things before i get started.
    please i wanna know if you upload your apps to appstore or playstore

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

      Thanks, SlugWorth! 🙂Sure you can easily upload your apps to AppStore & PlayStore. I will create in the future a video about it

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

    Very nice tutorial! How would I make the overlay stick to the top when scrolling

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

      Thank You W Davis! Follow this link: stackoverflow.com/questions/60912812/how-to-make-a-widget-stick-to-the-top-while-also-having-a-scroll-view
      I hope you will get your answer 🙂

  • @sauloferreiradesouza9117
    @sauloferreiradesouza9117 3 года назад

    Thanks for your tutorial.
    I don't know if you noticed, but the buttons on the advanced sliver is only clickable on the top half. Do you have any idea how to fix it?
    Thanks again.

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

      Hello, Saulo Ferreira! Follow this link: stackoverflow.com/questions/62258640/flutter-overflowed-positioned-button-is-not-clickable, I hope it will solve your problem. Thank You 🙂

  • @andrianlee5758
    @andrianlee5758 3 года назад

    Awesome!

  • @MohamedAttia-i9c
    @MohamedAttia-i9c 8 месяцев назад

    isnt returning a widget from a function not very recommended in terms of performance?

    • @HeyFlutter
      @HeyFlutter  8 месяцев назад

      Thank you, @user-mq6sc3yy2j! 🙂. Please try to provide enough details with your question

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

    hi. great tutorial.
    one question. how did u learn all this?
    documentation?
    thnk in advance :)

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

      Thanks, Josias Mayo! 🙂 Simply checkout the SliverAppBar docs here: api.flutter.dev/flutter/material/SliverAppBar-class.html

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

    When trying to detect gestures for the widgets outside the stack it doesn’t work please help I am struck and even the flutter issues on github has closed it

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

      @@HeyFlutter There is no error it just doesn’t detect any gestures to the widget outside of the stack and this is a big issue people are facing after I googled it and I am curious to know what could be done .
      For example if I have a stack with Clip behaviour to none and then I position any widget outside of the stack it is visible but doesn’t detect any gestures like ontap and all

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

    How to do something when TabBar scroll rigth or left ?

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

      Thank You Mohammad Bahlaq! Follow this link: medium.com/@diegoveloper/flutter-collapsing-toolbar-sliver-app-bar-14b858e87abe
      I hope you will get your answer 🙂

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

    How to change title start to center while scrooling

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

      Thank You Biplove! Follow this link: stackoverflow.com/questions/66174414/how-to-center-the-title-of-a-sliverappbar-vertically
      I hope you will get your answer 🙂

  • @Jo-tb6ur
    @Jo-tb6ur 3 года назад

    Hey, wonderful video. I have a question. How do you get a horizontal scroll and verticla scroll in a sliverappbar?

    • @Jo-tb6ur
      @Jo-tb6ur 3 года назад

      @@HeyFlutter thanks

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

      Thanks Jo! 🙂 Learn more about scrolling here: ruclips.net/video/bJGRmldntOI/видео.html
      Also check this tutorial out for more advanced Sliver App Bars: ruclips.net/video/QVxd0K_74Pc/видео.html

  • @MrAvelino2010
    @MrAvelino2010 3 года назад

    Can you make a serie of firebase auth, google sign, firestore, google maps using bloc

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

      Thanks Beno! 🙂I have separate tutorials about it. The Google Maps I will update in the future.
      1. Google SignIn Tutorial: ruclips.net/video/ogW83xGQGTg/видео.html
      2. Email Sign In Tutorial: ruclips.net/video/rnHAInnjCmM/видео.html
      3. Firebase CRUD Tutorial: ruclips.net/video/EV2DyrKOqrY/видео.html
      4. Google Maps Tutorial: ruclips.net/video/mkds0jeH7kg/видео.html

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

      @@HeyFlutter thanks

  • @rikita_neichert
    @rikita_neichert 3 года назад

    Is there a way to include the BottomNavigationBar in this system? I want it to disappear & appear like the AppBar

    • @rikita_neichert
      @rikita_neichert 3 года назад

      @@HeyFlutter thank you, fixed it exactly like this yesterday, thought I had updated my comment, my bad 🙃

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

    hello there.how can i make Custom expansionTile ?

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

      Thank You rahul vaghela! Follow this link: medium.com/swlh/creating-a-custom-expansiontile-in-flutter-53d87a803732
      I hope you will get your answer 🙂

  • @roman-ns7is
    @roman-ns7is Год назад

    Hi everyone! Could anyone explain how to remove an extra white space between SliverAppBar and GridView at 2:15?

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

      Thank You @roman-ns7is! Follow this link: stackoverflow.com/questions/66184310/flutter-showing-extra-space-in-gridview-how-can-i-remove-it
      I hope you will get your answer 🙂

    • @roman-ns7is
      @roman-ns7is Год назад

      @@HeyFlutter Thank you a lot! I have been struggling with that issue for the past couple of days and have been unable to find any solutions until I came across the link you provided) 😃

  • @mohanaddiab3982
    @mohanaddiab3982 3 года назад

    Great 👍

  • @prizeground
    @prizeground 3 года назад

    Please create a video on flutter with zoom SDK #Johannes milke

  • @battleGroundAce832
    @battleGroundAce832 3 года назад

    How to Show appBar title only when scroll ?

    • @battleGroundAce832
      @battleGroundAce832 3 года назад

      @@HeyFlutter thanks, johannes
      I created my own flexible space to achieve.

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

      Thank you, Hanish Kumar! You could learn more about to Show appBar title only when scroll here: stackoverflow.com/a/67537667

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

    hello kese hai sir aap

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

    pro

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

      Thank you, EasyFlutter! 🙂

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

    like as always, awesome keep it on

  • @simplegirl2218
    @simplegirl2218 3 года назад

    how to place a leading icon for this collapsible app bar if placed in the app-bar its displaying only for the shrinked app-bar not for the expanded.

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

      Thanks, Shirisha! 🙂Why would you want to do this? Never saw this in any app. However, you could put the collapsing part inside of the FlexibleSpaceBar, so f.e. within the FlexibleSpaceBar.title property you could put a row with an icon and next to it a text.