Flutter Provider - Advanced Firebase Data Management

Sdílet
Vložit
  • čas přidán 5. 07. 2024
  • Learn how to use the Provider package to simplify data flow in your #flutter app and react to #firebase realtime streams across the entire widget tree. fireship.io/lessons/advanced-...
    Provider pub.dev/packages/provider
    FlutterFire github.com/flutter/plugins/bl...
    Enroll in Flutter Firebase - The Full Course
    fireship.io/courses/flutter-f...
    Take $10 💸 off a PRO membership with code: b9uf1v4U
  • Věda a technologie

Komentáře • 163

  • @vtitsboti9815
    @vtitsboti9815 Před 3 lety +141

    Can you pretty please make an updated version of this video? :)

    • @samuelnihoul3159
      @samuelnihoul3159 Před rokem

      Yes, it's unclear how to setup the StreamProvider now :( It requires a value and an initial data but what do we put in initial data?

    • @NickFehlinger
      @NickFehlinger Před rokem +2

      @@samuelnihoul3159 You can put null in the initial data if there isn't cached data you want to load on init. Especially for authentication you want it to return null unless there is a logged in user.

  • @degonar3528
    @degonar3528 Před 2 lety +2

    This way of teaching (presenting a problem and solution) about something like a third-party package is SO good. I hate it when tutorials just throw stuff and say "use it" and don't explain why can't I just use built-in stuff, which is often much easier to understand as a beginner. Thank you!

  • @ManOnTheMoon2131
    @ManOnTheMoon2131 Před 3 lety +21

    This was a great tutorial! Given its success, I think you should definitely come out with an updated version! Almost everything is outdated and/or deprecated.

  • @iamfirdous
    @iamfirdous Před 3 lety +4

    Please make an updated version of this video.
    BTW, I love all your videos, they are crisp and clear, and you are always straight to the point.

  • @joshuanovak919
    @joshuanovak919 Před 5 lety +13

    "Beer. Temporary solution." - If i wasn't already subscribed that would make me subscribe right there lol

  • @philippdice9483
    @philippdice9483 Před 4 lety +1

    Thank you so much! You have such a nice way to write clean code eventhough some things getting quite complex!
    You helped me alot and I was able to save a lot of boiler plate code!

  • @JohnEGledhill
    @JohnEGledhill Před 5 lety +35

    Excellent timing with suggesting Provider ... since at Google IO 2019 that is what was recommended. You got skillz.

    • @TwistedDestroyer99
      @TwistedDestroyer99 Před 4 lety +3

      Does provider work with BLOC, or is that an alternative approach?

    • @Lensbreak
      @Lensbreak Před 3 lety

      @@TwistedDestroyer99 good question, anyone has answers?

  • @luisponce3580
    @luisponce3580 Před 4 lety +1

    Im in the 7:07 minute mark and i stopped the video just to say that this video is very awesome!! I didnt know that there was the spread operator, good stuff!! Amazing video so far

  • @akhan2501
    @akhan2501 Před 4 lety

    I promise to buy the advance course, as the basic intros have helped me land jobs in flutter

  • @blessingchelinje9317
    @blessingchelinje9317 Před 5 lety +1

    So far the best tutorial to learn the provider. 1000Likes from me

  • @storylineteam
    @storylineteam Před 4 lety

    As a game development company, trying to get to the app dev zone for our clients, we find your channel great! Coming from a .Net background angdbeing a small company, we decided to use Dart and flutter, mainly for the great merging of Composition ant OOP. ..
    Please Conceder on doing a video about end 2 end encryption on firestore data, as this is the most important not covered topic out there... and apis like Virgil are too expensive for small companies and individual devs and using user password as a encryption key prevents the data to persiston password changes.
    Here in Europe, with new personal data laws, firestore is useless without the ability to encrypt data.
    Continue your great job!All the best from Greece!

  • @ssokurenko
    @ssokurenko Před 5 lety +32

    Top quality content! thanks Jeff

  • @newtonmunene
    @newtonmunene Před 5 lety +11

    Wow, that factory Class.fromMap trick is totally awesome. I can't believe I've been struggling to create classes from maps All this time

    • @oztech
      @oztech Před 5 lety

      I know we need this, but is there any way we can automatically deserialize from map to object?

  • @crossmetz1372
    @crossmetz1372 Před 5 lety

    I was just watching google I/O about provider and boom , you post this

  • @braindongle
    @braindongle Před 4 lety

    This knowledge share is pretty incredible. Getting started with Flutter is easy, but the "ok, I'm going to build a real app" part is still evolving to say the least. Choosing a state mgt and dependency injection solution is coming along (Thank you Remi Rousselet!). But how does one approach client-server communication in a real-world app that uses Firebase? Where is your source of truth for the data model? Where do you keep global state? ...and on and on. So many questions. Great answers here.

  • @seunghwanjeong5348
    @seunghwanjeong5348 Před 5 lety

    so amazing !! this is what I was waiting for thank you !! :)

  • @JayPerf
    @JayPerf Před 5 lety +2

    holy crap this is a good one hahah you are the best Firebase resource on the web dude, and the flutter stuff is also the best out there

    • @Fireship
      @Fireship  Před 5 lety +1

      Thank you Jason!

    • @JayPerf
      @JayPerf Před 5 lety +1

      @@Fireship Seriously, I was about to head down the nested widget stream road you talk about, and this video was a revelation for solving that issue. I worked through your Firestore/Angular series before discovering your stuff on Flutter and started to try to teach myself that, and this is by *far* the most comprehensive "advanced concepts" channel out there

  • @mawulijo
    @mawulijo Před 5 lety +5

    The gif in the intro keeps distracting me. hahahahahaha. Now I can write less code for the same results. Very grateful Sir Jeff.

  • @SilasSWF
    @SilasSWF Před 5 lety

    Excellent tutorial. Thank you!

  • @motta021
    @motta021 Před 5 lety

    Thank you Jeff. I love your videos.

  • @fawazjoseph878
    @fawazjoseph878 Před 4 lety

    Thank you for this video.
    It really helped me solved a big problem with my app

    • @Fireship
      @Fireship  Před 4 lety +1

      Glad to hear that, provider solved many of my problems

  • @danchatka8613
    @danchatka8613 Před 4 lety +3

    Thank you for your great tutorials.
    It would be nice if you had a simpler introduction to Flutter Provider. It would be very similar to this tutorial, except:
    a) Don't base the tutorial needing a server-side resources. Maybe reading a local config file would be a simpler way to get params that are needed by different widgets in the app;
    b) skip discussion of other Flutter state management techniques or their history. That topic is better suited for an update to your Flutter state management Grand Tour tutorial.

  • @MultiTelefono
    @MultiTelefono Před 3 lety

    I love the last tip!!

  • @jaydanu
    @jaydanu Před 5 lety +3

    Hey can you share which VS Code Theme are you using? I can't seem to find the exact same one and I like the color scheme, it's easy on the eyes and the contrast is good.

  • @basheeral-momani2032
    @basheeral-momani2032 Před 2 lety

    That's awesome thanks for sharing this part,

  • @user-fh4xo2pc2d
    @user-fh4xo2pc2d Před 5 lety +26

    Would you cover using other backend like node.js with flutter? Thank you for all the flutter tutorial. I'm buying your course!

    • @Fireship
      @Fireship  Před 5 lety +24

      Yes I would consider that. Dart has a good HTTP package and I've also been thinking about a graphql vid for other backends.

    • @aislanarislou
      @aislanarislou Před 5 lety +4

      @@Fireship Graphql would be awesome!

    • @raul286162
      @raul286162 Před 5 lety

      Node plz also would like golang

  • @drdDavi
    @drdDavi Před 5 lety +2

    You are a fast talker and alway paste the code instead of typing. But your videos are absolutely informative and clear! This one was especially helpful to me! Keep up the good work man! Flutter && VueJS && Firebase all the way.

    • @leofonseca8144
      @leofonseca8144 Před 5 lety +1

      you can slow down the video to 25%. then watch it at 50% then at full speed. typing wastes time. Im just grateful his english is crystal clear, as the subject matter already demands your full attention. a lot of other fluffer channels fail miserably at this.

  • @anderslovbrand
    @anderslovbrand Před 4 lety

    I enjoy and use many of your patterns!
    However when abstracting with Collection , how can I pass arguments that makes me apply where- or orderBy-rules?

  • @derrickawuah9477
    @derrickawuah9477 Před 5 lety +3

    Great video Jeff! I definitely like this better than Bloc for my use cases. Do you plan on covering Flutter testing in the future?

    • @Fireship
      @Fireship  Před 5 lety +1

      Yes, testing in one my video list, but no exact timeline yet...

  • @Anstroy95
    @Anstroy95 Před 4 lety

    Thanks a lot for the explanation, I want to be like you one day 💪

  • @danhemingway5780
    @danhemingway5780 Před 3 lety

    Great video. Quick question, is it possible to run calculations using a StreamBuilder as a class and then access the output of those calculations as Provider? Rather than run the repeat calculations at each required part of the app.

  • @eduardogthiesen
    @eduardogthiesen Před 4 lety +1

    Great video! I was wondering though, if, let's say I have 1000 documents in a collection, for each time I call Provider.of in a new screen Firebase will count it as 1000 reads?

  • @RobertBrunhage
    @RobertBrunhage Před 5 lety +5

    Great video, will have to check out Provider soon 🤔

    • @Fireship
      @Fireship  Před 5 lety +3

      It's really underrated, I've been enjoying it!

    • @RobertBrunhage
      @RobertBrunhage Před 5 lety +4

      @@Fireship Using BLoC right now so that I can call a function from the BLoC to update other UI when data is updated in Firestore. Is this something that is possible with Provider?
      Edit: Using provider now and replaced the way I provide my BLoCs. Really cleans up the code!

    • @AR4U303
      @AR4U303 Před 4 lety

      @Robert Brunhage , what you mean? Using provider with bloc pattern??

    • @Lensbreak
      @Lensbreak Před 3 lety

      @@RobertBrunhage can you please elaborate a bit?

  • @lwasinamdilli
    @lwasinamdilli Před 2 lety +1

    please make an updated version...... A must watch for flutter developers

  • @Blues_unicat
    @Blues_unicat Před 5 lety

    You are hero of flutter-er

  • @fpsColton
    @fpsColton Před 4 lety

    When you setup your StreamProvider with the onAuthStateChanged, I notice that for a brief moment during the app's startup, that the value provided is null. How can you implement a loading page to appear when you only have null or not null to test with in the child widgets?

  • @Hell2Night
    @Hell2Night Před 5 lety +3

    I learn about this package in the Pragmatic state management session of the Google IO. This is great, now, I don't see the point to use such things as BloC for state management. Provider make it easier, and reduce boilerplate.

    • @Fireship
      @Fireship  Před 5 lety

      That was a good talk. I like the flexibility of Provider and you can even use it to roll out your own Bloc-style solutions.

  • @saifhakeam8599
    @saifhakeam8599 Před 4 lety

    YOU SIR..... are a legend

  • @YuppinYanni
    @YuppinYanni Před 5 lety

    Are you coming out with a Flutter for beginners course soon or just the Flutter Firebase course for now?

  • @emmanuelogbewe2334
    @emmanuelogbewe2334 Před 5 lety

    Great vid!!

  • @tirupatirao7521
    @tirupatirao7521 Před 4 lety

    Peak Video tutorial for flutter

  • @storylineteam
    @storylineteam Před 4 lety

    I have a question about listening to firebase changes via streams... Is it possible this approach to be more expensive than implementing some time based or manual refresh method? Especially on apps with a large userbase? I mean, if a user remains for a long time to the same page that makes the dispose method useless..

  • @kevinbenhoff3560
    @kevinbenhoff3560 Před 4 lety

    Would you say that StreamProvider is a resource expensive way to manage state as compare to say ChangeNotifierProvider? In your example you listen to a User stream which is cool because if anything is changed in Firestore it is immediately updated in the app. However, this seems to me like it would be a fairly resource intensive (battery, wifi, data xfer) way listening to the database for changes that may not really be all the frequent. Should StreamProvider with regards to data in Firestore be reserved for things that require instant updates (like notifications for example) while data that doesn't change too often be handled by ChangeNotifierProvider. Thoughts?

  • @vidy1983
    @vidy1983 Před 3 lety

    can you explain the difference between the streamprovider and streamprovider.value constructors? its hard to find anywhere.

  • @lyseihakh
    @lyseihakh Před 4 lety

    Wow so good content. thank you

  • @SafdarAliShah_TimeTraveler

    i will be the luckiest guy to work with you on flutter and i m Sure that will be everything to learn everything...

  • @kiranjisac4745
    @kiranjisac4745 Před 4 lety +1

    Hi What to do when stream provider is called on null when The. Collection is not created yet

  • @antonivanov5751
    @antonivanov5751 Před 5 lety

    Thank you very much for your videos. Could you answer - what's the font in your VS Code that you use?

    • @deneb6139
      @deneb6139 Před 3 lety

      I think it is "Fira Code".

  • @lukaszs9648
    @lukaszs9648 Před 4 lety

    Love it!

  • @quirky_hehe
    @quirky_hehe Před 5 lety

    Is there an option to buy the flutter course alone without a subscription?

  • @josehmoller2059
    @josehmoller2059 Před 3 lety

    que buena chamba compañero. good

  • @kameshvadivel9459
    @kameshvadivel9459 Před 4 lety

    Sir,I am using grid view builder to load images from friestore, when I scroll down images are again loading, I also tried cached network image but it not worked,how to solve this problem?? Can you help me??

  • @rutayisirewilly1217
    @rutayisirewilly1217 Před 4 lety +1

    Hello could you tell me if possible how to handle errors in stream provider. thnks

  • @immathiasyde
    @immathiasyde Před 3 lety +2

    How can you use the Realtime Database instead of Firestore?

  • @muhammadchhota4463
    @muhammadchhota4463 Před 5 lety

    Is multi provider share data between multiple pages?

  • @politicallynotcorrect2968

    Can you talk about more in depth on all the providers options like providers stream ect...

  • @aislanarislou
    @aislanarislou Před 5 lety

    Hey @Fireship, Do you think Cloud Firebase is capable of replace an database architecture composed with some tables (I'm using Postgres) that have many-to-many relationships? Those relationships frequently have many-to-many between 3 tables.

    • @Fireship
      @Fireship  Před 5 lety

      It's probably possible, but might not be practical. Sometimes it's better to duplicate or partially migrate the data you want in Firebase. Every case is different.

  • @JochemToolenaar
    @JochemToolenaar Před 5 lety

    Awesomeness!

  • @parwandaha3091
    @parwandaha3091 Před 4 lety

    I still cant make the connection between the user, superhero and weapons. where did the users come in the picture?

  • @ethanzhang8932
    @ethanzhang8932 Před 5 lety

    just curious what plugins are you using in the VS code editor, they are looks awesome, could you share the plugins?

    • @Fireship
      @Fireship  Před 5 lety +2

      I will make a video that reveals all this stuff very soon :)

  • @feutioclide7345
    @feutioclide7345 Před 3 lety

    How can i Provide 2 streams in the MultiProvider array with one dependent on the other?

  • @RoughSubset
    @RoughSubset Před 5 lety

    Hey Jeff, how do you get those emojies in your IDE and in Firestore?

    • @Fireship
      @Fireship  Před 5 lety +1

      They are actually just strings so you can simply copy/paste them emojipedia.org/

  • @ddean3732
    @ddean3732 Před 4 lety

    Great vid.
    I have a question... Can I contact you directly?

  • @shashankrewankar2838
    @shashankrewankar2838 Před 3 lety +1

    stream provider asks for 'initialData', when I hot restart, the child widgets take the 'initialData' instead of the most recent data from the stream. I want it to take the most recent data instead of the value given in InitialData. Anyone knows how I can do that?

  • @peekpt
    @peekpt Před 5 lety

    I've been playing with provider, seems to be the next thing

  • @chinmayagarnaik6458
    @chinmayagarnaik6458 Před 4 lety

    Please can you make a video on how to retrieve double value or geo point from firebase

  • @bhanukaisuru2618
    @bhanukaisuru2618 Před 4 lety +3

    Great..But StreamProvider.value( change on Provider 3.0.0. Please change it in your doc.

  • @BeastinlosersHD
    @BeastinlosersHD Před 4 lety +1

    When putting your StreamBuilders inside of providers: [] in MyApp, change it from
    stuff(lazy to type it).value(stream: FirebaseAuth.instance.onAuthStateChange) to
    stuff(lazy to type it).value(value: FirebaseAuth.instance.onAuthStateChange)
    This is because when provider moved to v3 they broke a bunch of stuff from the previous version. You can look into it in more detail on their Github repo's readme

  • @E-Hub_01
    @E-Hub_01 Před 4 lety

    simple but implementation is very complex.

  • @maximilianystalloyd6610

    How can you update the data from a widget that uses Provider.of?

  • @rajdave9862
    @rajdave9862 Před 4 lety

    Please tell, from where you are learning all of these because I am not able to learn from docs. So please tell us your sources to learn?!

  • @happynewyearw
    @happynewyearw Před 5 lety

    But isn’t provider still highly tied business logic with widget tree? For example, when we have to put widget in the child of Multiprovider? When the app scale up or we have to move widget and functionally around, there’s still a lot of refactoring to do, unless we put the multiprovider at the very top of the widget tree?

    • @Fireship
      @Fireship  Před 5 lety

      That is true, but you need some way to tell the framework where its data dependencies are located. I think Provider does this in a way the fits the ergonomics of Flutter well.

  • @edbienes
    @edbienes Před 5 lety

    Please cover svelte and firestore :)

  • @doodies1234
    @doodies1234 Před 5 lety

    hey! any thoughts on fish redux?

  • @ixGeneralz
    @ixGeneralz Před 3 lety

    can we have a vidoe for many-to-many relationships using this logic?? thanks

  • @0x4ym4n
    @0x4ym4n Před 5 lety

    Great!

  • @yvesboutellier336
    @yvesboutellier336 Před 2 lety

    please do this video again but with riverpod

  • @oliverbytes
    @oliverbytes Před 4 lety +1

    What if the Firebase User changes it's display name suddenly.. will it be updated automatically by the Stream or you'll have to manually refresh the FirebaseUser?

    • @Lensbreak
      @Lensbreak Před 3 lety

      good question. did you figure out?

    • @oliverbytes
      @oliverbytes Před 3 lety

      @@Lensbreak yes I did :)

  • @carlospedroza7114
    @carlospedroza7114 Před 5 lety

    Awesome tips and tricks! Keep the good work! There is a new version of the library (now 3.0.0) at pub.dev/packages/provider, and Provider now throws if used with a Listenable or a Stream. We can disable it with Provider.debugCheckInvalidValueType = null;

  • @nested9301
    @nested9301 Před 3 lety

    why we using the factory consturctor why not a simple function?

  • @VishalDesai711
    @VishalDesai711 Před 4 lety

    what is factory return type in SuperHero?

  • @jonathankumar2052
    @jonathankumar2052 Před 5 lety +2

    Can you update this or the blog post to v3 of provider, there are some subtle differences such as different parameter names and etc.

    • @ChristianJosephs
      @ChristianJosephs Před 4 lety +1

      @fireship this is a real thing. The syntax changed with the update and the blogpost isn't up-to-date anymore. I think that can be fixed within 10min work?

    • @jonathankumar2052
      @jonathankumar2052 Před 4 lety

      @@ChristianJosephs agreed, its completely different, although the readme does guide you through the transition, it could be a bit confusing for flutter/dart beginners @fireship please try to fix this.

  • @RudeboyJackson
    @RudeboyJackson Před 5 lety

    I'm trying to implement this, but getting the following error at this line:
    StreamProvider.value
    Error: "The class 'StreamProvider' doesn't have a constructor named 'value'."
    Could someone possibly explain what I'm doing wrong? Will really appreciate it!

  • @jaigohil4963
    @jaigohil4963 Před 5 lety

    @Fireship can you make a video flutter app deployment both on ios and android? And other lisencing stuff that goes with it!

    • @Fireship
      @Fireship  Před 5 lety

      I may do that in the future, but I cover the deploy process in the full course for both google play and apple.

  • @Juliapak
    @Juliapak Před 2 lety

    Hmm I just created some classes to feed the data from firebase firestore to my widgets

  • @adebajooluwaseyi2124
    @adebajooluwaseyi2124 Před 4 lety

    one year and still here

  • @kotivideos7140
    @kotivideos7140 Před 5 lety

    what you prefer to use? provider or rxdart ?

    • @Fireship
      @Fireship  Před 5 lety +1

      They serve different purposes, I actually use provider in combination with RxDart. Rx is useful when you need specialized control flow over the stream itself.

  • @Mohamedhassan-if8ww
    @Mohamedhassan-if8ww Před 5 lety

    Can i ask you something . how does the WeaponList find the weapons weapons = Provider.of(context);
    and you didnt evil put that stream in the multi provider

    • @gmmkkgmmkk6168
      @gmmkkgmmkk6168 Před 5 lety

      I am confused also
      did you find solution?

    • @Mohamedhassan-if8ww
      @Mohamedhassan-if8ww Před 5 lety

      @@gmmkkgmmkk6168 No just waiting for his answer maybe he can explain how the cycle goes or we are missing something

    • @gmmkkgmmkk6168
      @gmmkkgmmkk6168 Před 5 lety

      What is your email?

  • @tarunblaze
    @tarunblaze Před 4 lety

    How do I Implement my isEmailVerified using provider

  • @Lensbreak
    @Lensbreak Před 3 lety +2

    BLOC or PROVIDER ? what is better in 2021?

    • @AbdulMunim-kx6np
      @AbdulMunim-kx6np Před 3 lety +1

      For me it's provider

    • @AbdulMunim-kx6np
      @AbdulMunim-kx6np Před 3 lety

      Because i only.know that not the bloc pattern

    • @fuser312
      @fuser312 Před 3 lety

      Provider is definitely better and easier but a lot of recruiters are looking for developers with BLOC experience

  • @pubgkillers4537
    @pubgkillers4537 Před 4 lety

    The method 'map' was called on null.
    Receiver: null
    Tried calling: map(Closure: (Weapon) => Card)
    This is the error that i am getting when trying to use your tutorial. Please helpp.

  • @flutterkhouse7498
    @flutterkhouse7498 Před 5 lety

    What's the intro song's name?

  • @oztech
    @oztech Před 5 lety

    I refactored my code from using Redux to BlocProvider and now I need to refactor again with Provider :-) ha.. but the Provider seems better than my current solution,,, only if it scales well.

    • @oztech
      @oztech Před 5 lety

      wait.. how do you change the value (state)?

  • @abhishekbutola8294
    @abhishekbutola8294 Před 5 lety

    What if streamHero returns null? I am getting error on model file. The methos '[ ]' was called on null

    • @abhishekbutola8294
      @abhishekbutola8294 Před 5 lety

      nvm figured it out

    • @abhishekbutola8294
      @abhishekbutola8294 Před 5 lety

      What i did was return the .forMap() with default values Map but the problem is that first I am getting the error screen showing null then its rerendering the default values instantly.

  • @darkchoclate
    @darkchoclate Před 2 lety

    wow... it's interesting to see how dart has changed dramatically in last Frew years... Now it always Buggs me to add const modifier and null check...

  • @felixo9234
    @felixo9234 Před 5 lety

    Flutterfire 🦄

  • @TimeoutMegagameplays
    @TimeoutMegagameplays Před 5 lety

    I still don't get all those state management providers, why not only use a StreamBuilder? You have to write lots more to code to achieve the same result with the other solutions.

    • @Fireship
      @Fireship  Před 5 lety +1

      Provider does not require extra boilerplate. It's actually less code than StreamBuilder (in fact, its syntactic sugar for it) because it manages the subscriptions for you, so you can treat the emitted value as if it were synchronous

    • @TimeoutMegagameplays
      @TimeoutMegagameplays Před 5 lety

      ​ Fireship ​Oh I didn't catch that synchronous thing, that is actually pretty useful stuff.

  • @erperejildo
    @erperejildo Před 4 lety

    3:42 what's that extension called?

    • @beloArgentina
      @beloArgentina Před 4 lety

      For enable that ide menu? It's just VS Code with Flutter and Dart extensions

  • @willielassiter
    @willielassiter Před 4 lety

    In your "Flutter" playlist, videos 8, 9 and 10 look to all be the same: "Flutter Provider - Advanced Firebase Data Management". you might want to take a look at that and clean it up if i'm right... or not....

  • @victornweze7230
    @victornweze7230 Před 5 lety +1

    boom