#Google

This tutorial will help you to learn MVVM in Flutter using Providers with a simple real world example.
Written Tutorial
vipinvijayannair.medium.com/m...
Source Code:
bitbucket.org/vipinvijayan198...
More tutorials can be found in coderzheaven.com
Find me on
Medium: / vipinvijayannair
Facebook: / contactvipinvijayan
Twitter: @mr_vipin_nair
Page: / mobile-tutor-299932940...
Leave your valuable feedback comments below this post and I will make sure to follow your suggestions as much as possible. Support is important.
Keywords: Google Flutter, Google Mobile Application, Coderzheaven, Android, iOS, Flutter, Cross Platform, React Native, MVVM Architecture.
#GoogleFlutter #MVVMFlutter #FlutterTutorial

[@kevinvishal9071]

Great tutorial. You clearly explained how to structure app with MVVM, This will be a good starter project / or base project for many of the developers like me. Thank you so much.

[@carlsmith358]

The best tutorial of MVVM in Flutter using network requests that I've found. I'm also glad you corrected my assumption that screens with user input needed to be StatefulWidgets.🙂

[@MobileProgrammer]

I am glad

[@kisanshah3739]

Thank you so much the thing I wanted to learn the most is this. Great content!!!

[@juliejohn5159]

Excellent. Wanted video.

[@DJSebas213]

GREAT!

[@jayasubin-codes6233]

Great content. Thank you for this tutorial

[@ameeneetemadi429]

Very informative, you are great.👍

[@mustafatahir981]

Very impressive! keep it up.

[@vibhor1386]

This is so amazing man seriously.

[@hashankannangara8723]

important video!

[@kamiroro3318]

Thank you, very informative for me as i'am fairly new with flutter.

[@hitesh2293]

This video is gem. I saw alot of videos on the provider based architecture but everyone made a very basic easy app to teach. Thankyou for uploading

[@MobileProgrammer]

Glad it was helpful!

[@uvaismohammad4216]

You are a legend bro.. Thanks a lot

[@bobojonh718]

thank you for clear explanation of MVVM

[@thaliaamargianou7870]

So valuable content! Great work! Thanks...! Would be nice to see as a next part of this, data persistence! I mean local storage.. shared prefs or other..! So we can have a better view how we could add local storage on mvvm architecture! Thanks anyways..!

[@nikhilkukreja8498]

brilliant ❤❤

[@vipinvijayan6034]

This is a really useful video. Keep going. Thanks.

[@MobileProgrammer]

Thankyou

[@khalifarazeeth]

Very good tutorial

[@yusufumar6738]

Amazing content!, it's well detailed. thank you 👏

[@MobileProgrammer]

You are welcome. Thank you

[@petsshoppy2458]

Wow...Excellent Video

[@MobileProgrammer]

Thanks.

[@devendiran97]

Useful

[@vibhor1386]

Very informative. Can you please make a firebase auth with shared preferences/persistence , firestore, tutorial with MVVM architecture using provider?

[@michealgabriel1437]

Amazing stuff! Thank you so much ❤❤❤

[@MobileProgrammer]

You are welcome

[@erdemsym]

Excallent, thank you for your effort :)

[@MobileProgrammer]

You are welcome

[@user-kp4qs2nf7q]

Just made it 1k likes 🎉

[@pravinromano8774]

Thank you so much sir, for such a wonderful tutorial sir, i loved it so much from your video only i got good information about BLOC patter as well thank you sir

[@MobileProgrammer]

You are welcome

[@amansingh.h716]

Thnkyou bro for this awesome tuts

[@MobileProgrammer]

You are welcome

[@almamun2565]

Great content deserve more likes 👍

[@MobileProgrammer]

Thanks.

[@veeraharikumarsakthivel8983]

It is really useful video. Less time and good content

[@MobileProgrammer]

Thank you

[@veeraharikumarsakthivel8983]

@@MobileProgrammer I thought of buying a paid course to learn MVVM but this video just saved my money! Thank you bro. Subscribed!

[@MobileProgrammer]

I m glad my video helped.

[@pedromiranda3148]

Link to source code is not working :( Can you write some github link please? Also you dont show the UserError

[@MedioNoOficial]

Finally I understood the MVVM in flutter. But I still have a question. It could be a good idea to implement MVVM patern if you handle your data through streams, for example from websocket, and build your list consuming directly the stream with StreamBuilder?

[@vivekprasad2703]

Please make more videos on mvvm architecture

[@MobileProgrammer]

Sure. Will do. Thanks for the feedback

[@prashantdwivedi1736]

looks good.

[@MobileProgrammer]

Thankyou

[@prashantdwivedi1736]

@@MobileProgrammerThanks sir! I have a request, Please make more detailed videos on proper Flutter architecture using provider that can be used in large apps as well i.e scaling at big level is possible. And also the folder structure that we should follow. Thanks again for your efforts

[@M.......A]

Thanks a lot for this. I am just wondering about the exact gain of using Provider to access the ViewModel. Can't I just create an instance of it inside the view and just access it? What is the exact gain of using the Provider here?

[@MohanRaj-sc2xz]

Hi, Can you please tell me what the code you did on models/user_error.dart file? seems you have missed to show it on this video

[@cndiandian]

greet, thanks!

[@MobileProgrammer]

You are welcome

[@ParabTarak]

Very well explained. Thanks. Just a nitpick. The error at 28:45 is caught by the static check if the method specifies the return type i.e. bool addUser(){}; The empty return in if(!isValid) will also give runtime error. Similarly there were many get methods without return type specified. This can result in compile time or runtime errors that could have been avoided just by being specific of their return types.

[@saqib399]

I didn't understand much as i am a beginner but it was amazing to watch your coding skills.Thank you

[@techfauz]

He's too fast not for beginners like us but he's good

[@maxxy-r3q]

Hi, can you tell me what code you did to the models/user_error.dart file? It looks like you missed to show it in this video. I have searched for it on your website, but I still don't find models/user_error.dart

[@user-xe8vl9eh9l]

Hi i have a doubt i want to create a app with lots of images but i dont have a api ,so i decided to create a json and listed out all the images there like {"img1" =" assets.image1.png", "img2" = "assets.image2" } and so on when ia am compiling it is throwing an erroe saying that cannot locate ,some times late value not initialized and so ,now my doubt is can i use it this way or i have to create a static List with all the values and just simply display

[@vibhor1386]

You can load your json file inside the init method, by using DefaultAssetBundle constructor and passing in the json file path as string, you have to make this await, please google some DefaultAssetBundle json load and you will get your answer.

[@peekpt]

So the ViewModel is what is called a "Controller" it has actions and outputs states...

[@anozGosai]

what about the user_error.dart file, i didnt saw you creating the file, or have i missed it? I am getting an error on UserError _userError on users_view_model.dart.

[@TV-kl9wc]

thank you for the good content But where are the binders?

[@user-rf4pj4zx4s]

whats the difference between mvvm and mvc in flutter both seems similar except the names

[@vibhor1386]

Sir, can you please make a video on MVVM with clean architecture too?

[@MobileProgrammer]

I will try.

[@sagar.s]

Description link for tutorial is deleted. Can you please make it online again ?

[@adityajha8701]

Why have you made some functions like add users async? I only used async for functions that fetches data from intrernet. Thank you

[@MobileProgrammer]

async improves your apps performance no matter if it is a network call or not. when you call a network function with async, the network library is doing the real async call, not your function that is actually doing async network call, I hop you get it.

[@akcanmurat441]

hello bro, i have a question for you. you added a multiprovider in main for one vm. Is it necessary to follow the same method for multiple vms?

[@MobileProgrammer]

Not necessarily,most of the times apps will have multiple notifiers to separate the logic in different files

[@akcanmurat441]

@@MobileProgrammer It's been 6 months since it started. I collected the vms in main like you, but since there are more than one it's wrapped with all vms in the widget tree. I don't know if this is true.

[@baboeli]

Hi, do you have this proyect in github, there are somethings that I don't know come from, regards.

[@MobileProgrammer]

Yes, please check description

[@alexeyshubnikov2484]

This is very helpful, thanks! But what if we also want to adjust the user details for selected user (i.e. change email or name) - how do we do that?

[@MobileProgrammer]

You can definitely do that. What is blocking you? So basically you have to modify and update the data and add to user list or so

[@alexeyshubnikov2484]

@@MobileProgrammer I just try to find the best solution from design perspective. First thing that comes to my mind is to have a method updateEmail(String email) inside the UserModel class, and then to call it from the ViewModel via _selectedUser (i.e. updateSelectedUsersEmail(String email) { _selectedUser.updateEmail(email); notifyListeners(); }. Is it a good practice to have methods to edit Model values inside the Model class? And if more general - I try to understand how to handle nested objects - imagine you have list of Users, each user has list of settings, and each settings has list of something else - and you want your app to allow going deeper down the tree and edit the values - the above described approach can get messy (i.e. we should have _selectedUser, _selectedSetting, _selectedSmth etc.) - so I am wondering if this can be managed by one ViewModel or should we also have nested ViewModels to deal with this kind of problem (and if Provider can handle nested ViewModels)

[@MobileProgrammer]

Logic should be inside the bloc event driven

[@JeanPierreSchnyder]

Thank you for this video. But it would be great if we could access to the application code !

[@MobileProgrammer]

You can find it at the end of written tutorial in the description

[@2005sty]

I cannot find this source code. Only one wriiten in Kotlin.

[@orchlonchinbat2214]

what is inside in models>user error? I couldn't see the file in this video.

[@MobileProgrammer]

Please check the repo in the description

[@ravikovind]

6 month we miss you sir

[@MobileProgrammer]

Sorry buddy. I was busy

[@aquilrodrigues8155]

can you share the github link for this project

[@MobileProgrammer]

please check the description

[@thangkieu4016]

I need to find the lost user_error segment, please give me the information about that part

[@MobileProgrammer]

I forgot to include in video.. please just create a class

[@user-oy3sf4zy5s]

Can any1 share their repo with me so that i can go through it and make my project correct

[@user-oy3sf4zy5s]

kindly please update your code sir as it's showing multiple red errors & I am new in Flutter, after applying some changes still not running on device.

[@AnupUpadhayaya]

Why i am getting error in UserError

[@user-qr9pe5hw7d]

have you reay skipped the userError step becaus icant fond it in the video please snd this dart file

[@MobileProgrammer]

You can find it in the source code link I the description

[@user-tz3sd3sd6d]

@@MobileProgrammer where is it?

[@karthikm7063]

@@user-tz3sd3sd6d import 'dart:convert'; UserError userErrorFromJson(String str) => UserError.fromJson(json.decode(str)); String userErrorToJson(UserError data) => json.encode(data.toJson()); class UserError { UserError({ this.code, this.message, }); int code; String message; factory UserError.fromJson(Map json) => UserError( code: json["code"] == null ? null : json["code"], message: json["message"] == null ? null : json["message"], ); Map toJson() => { "code": code == null ? null : code, "message": message == null ? null : message, }; }

[@buraksafak9107]

@@karthikm7063 Thanks for your support.

[@karthikm7063]

@@buraksafak9107 welcome

[@swapnilgawali9412]

please share code.

[@user-xe8vl9eh9l]

you just gave a fancy name view model to the provider

[@MobileProgrammer]

It’s not fancy name. You heard view model first.

[@jimmyryan5880]

Make the text bigger

[@user-oy3sf4zy5s]

Facing this issue @Mobile Programmer :- The following _CastError was thrown building HomeScreen(dirty, dependencies: [_InheritedProviderScope]): Null check operator used on a null value

[@souravpanda1945]

can you please share the source code link ?

[@MobileProgrammer]

Plz check the description

[@amirhosseinfazli2458]

not work in dart version 1.17.3

[@MobileProgrammer]

What is the error you are getting?

[@ravipatelsrashtasoft]

When You have created the UserError File. I thing you forgot to show it in this video. Please check

[@MobileProgrammer]

Yeah, I forgot. Will add in the description. Sorry

[@ravipatelsrashtasoft]

@@MobileProgrammer Thanks

[@juanjosep988]

You didn't show the userError model. I assume is basically the same as the apiError.

[@MobileProgrammer]

Please check the source code linked in the description

[@jorgeSanchez-og1fu]

@@MobileProgrammer Hi, I can't fine the link to de Source code. Where is?

[@user-tz3sd3sd6d]

@@MobileProgrammer can't find a link for this repos,please send it here.I really want to understand mvvm for flutter

[@_aguskhaer]

@@MobileProgrammer have you delete your article on medium? i can't find your article

[@MobileProgrammer]

No. I didn’t

[@susangautam2063]

bro can u teach me how to navigate to particular user's details without using mvvm please

[@MobileProgrammer]

Navigator.push

[@susangautam2063]

@@MobileProgrammer how to navigate for the particular user

[@MobileProgrammer]

Same

[@susangautam2063]

@@MobileProgrammer can you make a short video on that please I'm not getting it

[@MobileProgrammer]

I wil try

[@02565120]

What about the object holding memory in viewmodel ?

[@MobileProgrammer]

Well, object has to held somewhere, so it would be in view model

[@02565120]

But this object will be there in the viewmodel even after got back from the screen which uses the object

[@02565120]

Lets say we have 30 screens and 30 viewmodels , how can we release the memory that all of these objects occupied when these are not in use

[@MobileProgrammer]

You can override the close method in the bloc to dispose anything

[@MobileProgrammer]

A view model does not correspond to a screen first of all. So that would be a bad design. You can have one view model for the entire app also. You can clear data anytime you want.

[@tutorialscamp3569]

Sir where is the UserError coming from?

[@MobileProgrammer]

Sorry, I might have missed it. You can find it in my repo which is linked in the description.

[@tutorialscamp3569]

@@MobileProgrammer okay that's fine.

[@muhammadjavedrafique4592]

@@MobileProgrammer where is the link sir plz?

[@RattzMusic]

why don't you show when create class user_error

[@MobileProgrammer]

Sorry, I might have missed it. You can find it in my repo which is linked in the description.

[@maxxy-r3q]

@@MobileProgrammer I don't see users_error in your repository.

[@muhammadjavedrafique4592]

first you give hope but at the end you dont tell what is UserError

[@MobileProgrammer]

Just create a class . I forgot to include it in the video. Sorry

[@islahudinmly9922]

can you help me? LateInitializationError: Field '_userError@568429593' has not been initialized. position flutter version 2.10.5 dart version 2.16.2

[@MobileProgrammer]

Just assign some value to the variable before using it if you have declared it using late keyword