Synchronous BuildContexts | Decoding Flutter

Поділитися
Вставка
  • Опубліковано 6 вер 2024
  • 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/Decodin...
    Don’t miss an episode, subscribe to Flutter → goo.gle/FlutterYT
    #DecodingFlutter #Flutter #Developer

КОМЕНТАРІ • 99

  • @flutterdev
    @flutterdev  2 роки тому +9

    Subscribe for more Decoding Flutter → goo.gle/FlutterYT

  • @shubhamsahu9678
    @shubhamsahu9678 11 місяців тому +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!

  • @metra-2020
    @metra-2020 Рік тому +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

  • @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!

  • @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.

  • @atomicsage7559
    @atomicsage7559 2 роки тому +3

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

    • @flutterdev
      @flutterdev  2 роки тому

      Thanks so much for your support, Atomic Sage 😎

  • @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 😀

  • @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 😎

  • @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 😄

  • @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: ua-cam.com/video/og-vJqLzg2c/v-deo.html
      Happy Fluttering!

  • @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

  • @shinigami675
    @shinigami675 2 роки тому +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

  • @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.

  • @kavienanj
    @kavienanj 2 роки тому +4

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

  • @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!

  • @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!

  • @saffanalvy
    @saffanalvy 2 роки тому +3

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

  • @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.

  • @TheManuz
    @TheManuz Рік тому +1

    Thanks for this informative and concise video!

  • @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

  • @tahaahvazi
    @tahaahvazi 2 роки тому +3

    very helpful, Thanks

  • @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.

  • @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.

  • @nevilleraheemdavis5568
    @nevilleraheemdavis5568 6 місяців тому +1

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

  • @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 :)

  • @ashrafal_mekhlafi
    @ashrafal_mekhlafi Рік тому +1

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

  • @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.

  • @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

  • @quicksketch1617
    @quicksketch1617 Рік тому +1

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

  • @jajasaria
    @jajasaria Рік тому +2

    Thank you!

  • @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!

  • @abuzar478
    @abuzar478 2 роки тому +2

    Thanks for this ❤️

  • @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
      😎

  • @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

  • @mdmarcaassport
    @mdmarcaassport 2 роки тому +1

    wonderful

  • @abdelazizkayoueche8317
    @abdelazizkayoueche8317 Рік тому +1

    But what about statelessWidget can we use monted propertie?

  • @angusclark1467
    @angusclark1467 2 роки тому +1

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

  • @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_'

  • @Pedro5antos_
    @Pedro5antos_ 2 роки тому +1

    Amazing content! Really easy to follow, Thanks

    • @flutterdev
      @flutterdev  2 роки тому

      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 👍

  • @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 😌

  • @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 😎

  • @darshanrathod9572
    @darshanrathod9572 2 роки тому +1

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

  • @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

  • @frankeestv3860
    @frankeestv3860 2 роки тому +1

    That was brief and nice! Thanks

    • @flutterdev
      @flutterdev  2 роки тому +1

      Happy to hear the tutorial was helpful, Frankee 😎

  • @MoAdel92
    @MoAdel92 Рік тому +1

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

  • @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 😎

  • @muhammadmohsin8762
    @muhammadmohsin8762 Рік тому +1

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

  • @maxhuk
    @maxhuk 2 роки тому +1

    Very informative, thank you 👍

  • @BradEvans
    @BradEvans 2 роки тому

    What a great talk. Very well explained.

    • @flutterdev
      @flutterdev  2 роки тому

      Thanks, Brad! We appreciate your feedback 😊

  • @officialismailshah
    @officialismailshah Рік тому +1

    Awesome

  • @BôBo-b8x
    @BôBo-b8x 5 днів тому

    Топовая связка, всегда в деле.

  • @saqqara6361
    @saqqara6361 Рік тому +1

    Great!

  • @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 😕

  • @MPRGyanStudio888
    @MPRGyanStudio888 2 роки тому +1

    How to creat audio2face human face animation in flatter apps

  • @guccibase
    @guccibase 2 роки тому +2

    Wow this was possible?

  • @yourasa1213
    @yourasa1213 2 роки тому +1

    I think this is only working for StatefulWidget.

  • @vivekkumar-nb3sw
    @vivekkumar-nb3sw 2 роки тому +1

    Hindi subtitles???

  • @devillspdr
    @devillspdr 2 роки тому +1

    just use bloc

  • @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
      😎

  • @brunomulas389
    @brunomulas389 2 роки тому +1

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

  • @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.

  • @shubhamprakash2545
    @shubhamprakash2545 2 роки тому +1

    Random jsbxba