Synchronous BuildContexts | Decoding Flutter

Поделиться
HTML-код
  • Опубликовано: 11 июл 2022
  • Learn about Flutter's build process and its implications for using BuildContexts in button callbacks or after an asynchronous gap, as inspired by the new lint `use_build_contexts_synchronously`.
    Watch more Decoding Flutter episodes → goo.gle/DecodingFlutter
    Don’t miss an episode, subscribe to Flutter → goo.gle/FlutterYT
    #DecodingFlutter #Flutter #Developer
  • НаукаНаука

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

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

    Subscribe for more Decoding Flutter → goo.gle/FlutterYT

  • @shubhamsahu9678
    @shubhamsahu9678 10 месяцев назад +7

    WTH, this was so informative. I really needed this type of animated examples and pics to understand, coz the jagron always flew over my head if I don't picturize them. Thanks. Flutter team rocks!

  • @markIRL
    @markIRL 2 года назад +32

    I really enjoyed how much actionable content was packed into such a well-paced video! Excellent work and brilliant host! Can't wait to see even more Flutter content like this!

  • @Persphone1
    @Persphone1 Год назад +1

    Thank you Flutter :-) A really clear articulation of why the linting warning appears and how to deal with the issue. I've not refactored code bases (with only a small change really) and the problem has gone away. And I increased my knowledge of Flutter. The girls and guys at Flutter do an amazing job at information sharing.

  • @metra-it1985
    @metra-it1985 Год назад +2

    Before i was using build context in asynchronous gaps like this.
    ()async{
    //local function for snackbar which is synchronious
    _snackbar(){
    Snackbar.show(context,text:"Data fetched");
    }
    Data data=await Data.get();
    //asynchronous gap
    _snackbar();
    }
    Thanks for such a good explanation 👍
    And please correct me if I'm doing something wrong. THANKS AGAIN

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

    A very nice addition to the previous video about didChangeDependencies, now all of this makes perfect sense together.

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

      Glad you found the tutorial helpful, Sominemo!
      Check out the links in the description for more great content!
      Happy Fluttering 😎

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

    Yeah! This new thing actually freaked me out a bit. Thanks for this information Flutter team💙

  • @InfamousBlackGuy
    @InfamousBlackGuy 2 года назад +6

    Makes a good bit of sense. I assume this also applies if you're attempting to use a Context to build some object post an asynchronous gap. This is super helpful for newer Flutter devs as I've personally seen these unsafe usages done in a lot of smaller/newer codebases.

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

      Thanks for the positive feedback, Armens 😀

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

    Decoding flutter is really good way to learn flutter.
    Happy Fluttering 💙

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

      We 100% agree, Ahmad! Be sure to check out all the Decoding Flutter episodes here: goo.gle/DecodingFlutter
      Happy Fluttering 😄

  • @shinigami675
    @shinigami675 Год назад +1

    The funny thing is i just ran into a bug because of this and i was like let me have dinner before fixing and i saw this video. someone out there loves me

  • @TheManuz
    @TheManuz Год назад +1

    Thanks for this informative and concise video!

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

    Very well explained. Thank you so much. I was wondering how to fix it and what would be the consequences if I don't.

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

    Great, informative talk Tiya! Looks like you have thrown yourself into Flutter development :D

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

      We're so glad you enjoyed the video, Ian!
      Be sure to check out more Decoding Flutter episodes here:
      goo.gle/DecodingFlutter
      😎

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

    Thank you very much Tiya for the solution. Jazakallahu khairan.

  • @GabrielRodriguez-iz9ob
    @GabrielRodriguez-iz9ob 2 года назад +1

    Nice video! This video should appear when googling use_build_contexts_synchronously or in the IDE warning, because I wish I'd found it earlier.

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

    Keep flutter going , its great.. thanks Google team.

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

      Thanks so much for your support, Atomic Sage 😎

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

    Very informative, thank you 👍

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

    I noticed the lint update giving my code a bunch of these warnings. I'm slowly working through each of them to see how I can fix it. Thank you!

  • @Pedro5antos_
    @Pedro5antos_ Год назад +1

    Amazing content! Really easy to follow, Thanks

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

      Thank you for your continued support and kind words, Pedro!
      You can check out more episodes of Decoding Flutter here:
      goo.gle/DecodingFlutter
      Happy Fluttering 👍

  • @gnrslashsp6501
    @gnrslashsp6501 Год назад +1

    I saw this before and there are a lot of answers if you google it, but when you are using GetX package, for an example, mounted does not exists! How to solve async gaps in GetX? There is a Get.context, just use it and all will be fine? Thanks for the instructions here, your explanation was helpful!

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

    It was very helpful to deepen my understanding. Thank you for putting this video together, appreciate your work!

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

      Glad the tutorial was so helpful for you 😎

  • @TheEkkas
    @TheEkkas 2 года назад +9

    Very nicely explained, thanks.
    What is the episode titled that discuss 'didChangeDependencies' ?
    Answer: InheritedWidgets

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

      It's this one: ruclips.net/video/og-vJqLzg2c/видео.html
      Happy Fluttering!

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

    That was brief and nice! Thanks

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

      Happy to hear the tutorial was helpful, Frankee 😎

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

    very helpful, Thanks

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

    If(!mounted) return only works in stateful widget ... what to do with stateless widget ?

    • @laybunzz
      @laybunzz 2 года назад +7

      For now, you'd have to convert the widget into a StatefulWidget; but your question is giving me ideas...

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

      @@laybunzz I've converted to StatefulWidget to do just that a few times and wondered if there was another better way. Looking forward to see what it might be. It is bit annoying when using e.g. Riverpod or other state management solutions and you otherwise did not need a StatefulWidget and have to convert to get access to mounted info. But OK, it has not happened many times to me, maybe a handful of cases.

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

      No need to make the onPressed async.
      1. get the object from the context (or the value you need)
      2. run the async method
      3. use the .then((value) {}) on the async method which ran

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

      @@adianblabla what if you have multiple async function need to await? It's gonna create nest of .then

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

      @@hactam7358 You can us futureGroup to call them all and have just one .then method when they all complete.

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

    I have been getting this problem lately. so l would use ignore use of build context across async gaps. Thanks for the explanation 😌

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

    Thanks for this ❤️

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

    Great presenter and great video, thank you!

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

      We're happy to hear you enjoyed the video!
      Be sure to check out more episodes of Decoding Flutter:
      goo.gle/DecodingFlutter

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

    What a great talk. Very well explained.

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

      Thanks, Brad! We appreciate your feedback 😊

  • @gildaswise
    @gildaswise Год назад +1

    A quick fix: the description says that the linter rule is "use_build_contexts_synchronously", but it doesn't exist, it's "use_build_context_synchronously" without an additional s

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

    More examples like this!

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

      We're glad you found this tutorial helpful, Andrea 😃
      You can check out more episodes of Decoding Flutter here:
      goo.gle/DecodingFlutter

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

    Very useful needed information 🙏

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

      Thank you! We're happy to hear the tutorial was so helpful 😀
      Make sure to check out the link below for more episodes of Decoding Flutter:
      goo.gle/DecodingFlutter

  • @jajasaria
    @jajasaria Год назад +2

    Thank you!

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

    What if we have the same situation inside a showModalBottomSheet() call. We won't have a mounted check inside that builder. Is there a way to handle stale context in this case?

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

      Create a state full widget then pass it in the builder on the showModelBottomSheet, then you can check the mount in it

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

    amazing, I liked it a lot

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

      We're so happy that you liked the tutorial!
      Be sure to check out more episodes of Decoding Flutter here:
      goo.gle/DecodingFlutter
      Happy learning 😎

  • @ashrafal_mekhlafi
    @ashrafal_mekhlafi 11 месяцев назад +1

    كثر الله خيرك.. متى بتنزل part2

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

    I slowed down video speed to 0.75% and used CC and could get some of ideas 😁 better update lint and check if error appears then find the best pattern like didChangeDipendencies or if(!mounted)

  • @g0rbachov
    @g0rbachov Год назад +1

    Important part of explication on screen was covered by cc caption.

  • @saqqara6361
    @saqqara6361 Год назад +1

    Great!

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

    wonderful

  • @officialismailshah
    @officialismailshah Год назад +1

    Awesome

  • @user-ev2zy7gj4s
    @user-ev2zy7gj4s Год назад +1

    Hi,small clarification!how can you hold to your resources if already navigation or something removed element from tree and updated new elements.having stale context and using it access snackbar?how?can you pls explain.

  • @nevilleraheemdavis5568
    @nevilleraheemdavis5568 4 месяца назад +1

    Wouldnt FutureBuilder and StreamBuilder be considered asynchronous processes implemented within the build method?

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

    What if we want to push a new screen after an async call?

  • @quicksketch1617
    @quicksketch1617 Год назад +1

    Hi, I have a question mounted works for stateless widgets?

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

    If we have a _Stateless_Widget that needs a context after an async gap, is our best approach to hold onto the resources prior to the async gap, like suggested at 4:10? I suppose an alternative is just converting the Widget to a StatefulWidget and using mounted.

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

      Those two solutions comprise your menu of options, yes :)

  • @muhammadmohsin8762
    @muhammadmohsin8762 Год назад +1

    what if somehow mounted is getting false, in that case how we hanlde it. Please sugguest some sokution. Thank you

  • @abdelazizkayoueche8317
    @abdelazizkayoueche8317 Год назад +1

    But what about statelessWidget can we use monted propertie?

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

    Code theme is good! i want that for android studio.

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

    But the rule have to be use_build_context_synchronously There is the mistake in description down below the video - '_contexts_'

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

    Question
    What is the difference between getting a context from the build method param vs from "context" getter of State class?
    I often use the getter when I encounter this warning

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

      What a great question! The answer is that there is zero difference. The State class's build() method is redundantly passed the BuildContext variable only so that its signature matches that of the StatelessWidget's build method. The two objects (the State class and its BuildContext) can *never* de-sync, so even with all the above asynchronous confusion, it's always exactly the same.

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

      For further reference, here's a sentence in the docs that captures this: api.flutter.dev/flutter/widgets/State/build.html#:~:text=The%20BuildContext%20argument%20is%20always%20the%20same%20as%20the%20context%20property%20of%20this%20State%20object%20and%20will%20remain%20the%20same%20for%20the%20lifetime%20of%20this%20object.%20The%20BuildContext%20argument%20is%20provided%20redundantly%20here%20so%20that%20this%20method%20matches%20the%20signature%20for%20a%20WidgetBuilder

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

    Nice in depth video....vscode theme?

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

      I'd like to know too

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

      Hey there! Take a look at the links below for more information about Visual Studio themes and how to set them up to suit your preferences 🙂
      Visual Studio Code Overview: goo.gle/3chWjoi
      Getting Started with Color Themes:
      goo.gle/3RCsVZZ

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

      We've been using this one: github.com/afitz0/flutter_dart_vscode_theme

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

      @@craiglabenz9147 Thank you so much. Will you publish it in Market Place in the future?

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

      @@masishta That's an interesting idea. It probably requires some polish before doing that, but we could if folks would download it!

  • @MoAdel92
    @MoAdel92 Год назад +1

    What about stateless widget it doesn't have mounted flag?

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

    Wow this was possible?

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

    How to creat audio2face human face animation in flatter apps

  • @user-sm7wp9pi5m
    @user-sm7wp9pi5m 2 года назад +5

    05:38 -The code will not compile, cachedLayoutValues is defined at scope of didChangeDependencies and doesn't accessible at build method🤦

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

      You spotted the pseudocode!

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

    Perfeito

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

      Glad you enjoyed the tutorial, Fabricio!
      Don't forget to check out the links in the description for more tips and tutorials 😎

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

    I didn't get it 😕

  • @yourasa1213
    @yourasa1213 Год назад +1

    I think this is only working for StatefulWidget.

  • @vivekkumar-nb3sw
    @vivekkumar-nb3sw 2 года назад +1

    Hindi subtitles???

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

    Nvidia , blender audio2face auto lip sync animation how to add flutter
    Flutter auto lip sync animation how to creat in flutter is posible

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

      Hi, Parshuram!
      Click the link below to find tips and tutorials for creating animations with Flutter:
      goo.gle/3zBRy1V
      😎

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

    just use bloc

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

    Problem is "await" doesn't await at all 🙂

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

    Random jsbxba

  • @marcom.
    @marcom. 2 года назад +1

    Given the fact that Flutter is quite new I must say that its programming model isn't very convincing. It feels a lot like good old Java Swing, but more complicated. The best proof that I'm right is the fact how many tutorials and videos exist just to explain how Flutter builds its ui tree. I don't like this StatefulWidget to State to Widget cascading things. Poor design i.m.h.o.