GetX in Flutter - Part 1 (Observables)

New intro for the new channel name! There are many state management options to choose from (Bloc, Provider, Mobx, etc). GetX is the new kid in town, but it's gaining a lot of traction for good reason. It has a lot in common with the Provider package, but it's slightly easer to use and is more readable in my opinion. If you understand Provider, then switching to GetX will be relatively simple. This video will get you started with using observables state in GetX.
*The aspect ratio of this video seems a little off. I was experimenting with a few things. It should be corrected going forward.
⚡Connect on Facebook: / flutterfactory
⚡Connect on Twitter: / flutterfactory
🎷 Music from www.Bensound.com
💻 Follow along with the initial code here: github.com/theflutterfactory/...

[@TheFlutterFactory]

What do you think about GetX? I think it will be the primary method of state management in Flutter at some point.

[@meeDipesh]

Simple and easy to implement. It is life saviour. Flutter itself was easy to learn and with GetX I am enjoying it more.

[@Dush999]

Agree

[@yodartt]

Hey GREAT Video! I had a quick question: What if I wanted multiple controllers and each one building a different page. For example: A UserController that its used on a profile page, but say I'm on profile 1 and tap on a comment of user 2 and go to profile 2 wouldn't this new page still use data from the previous one?

[@paanoop]

All the programmers in my community are using BLOC still. They have never heard of this! Getx is too good considering statemgmt & routing features!

[@TheFlutterFactory]

Having different options is always a good thing. They are all different. Though RiverPod will likely replace provider in the near future since it's essentially an upgraded version of provider created by the same person.

[@RajA-me9cl]

Unique && clean illustration. So grateful 🙏🏼

[@MoAdel92]

Really informative video thanks for your contribution in the flutter community

[@vishalmakam7291]

Covered most of the important things... Nice 👍

[@meeDipesh]

You just gained a new subscriber 😉

[@zerosugar2126]

Thank you for sharing!

[@NedimMalik]

Excellent teaching, thanks a lot ;)

[@babayevnariman]

best getx video thank u

[@Jan123.]

Great video.

[@CarlosHernandez-dv1ib]

What a great example, I saw your post on flutter's Facebook group.

[@TheFlutterFactory]

Thanks. I will have more Getx videos soon

[@setyatama8256]

​@@TheFlutterFactory Im waiting for a more video about GetX, thanks

[@pemangodup6549]

loved it and thank you soooo much.....

[@kanishkchawla8997]

I am the first to comment Happy to comment on my fab channel Really good vedios sir ❤️️️❤️️️

[@TheFlutterFactory]

Congrats😁. And thanks!

[@shogi23]

wow thanks men the movi is amasing

[@ameya730]

Really informative video. Has helped me a lot with state management. Just one question though... I want to get the duration & position till which a video has been video so that I can save its state [to use later]. Is it possible to declare duration and position as .obs and if yes, how do I do it ?

[@TheFlutterFactory]

I don't know how you setup your video playback, but I'm assuming you have a way to listen for updates in the video playback. You would just set the controller values as the video plays. Your duration probably wouldn't change unless you're trimming a video.

[@ameya730]

@@TheFlutterFactory Thanks for your comment. The listner part is what I was missing which I was able to figure out after seeing your reply.

[@yodartt]

Hey GREAT Video! I had a quick question: What if I wanted multiple controllers and each one building a different page. For example: A UserController that its used on a profile page, but say I'm on profile 1 and tap on a comment of user 2 and go to profile 2 wouldn't this new page still use data from the previous one? @Cheetah Coding

[@TheFlutterFactory]

The amount of controllers, the data they hold and where you use them are all in your control. You are the architect of your app. 🙂. If you feel like one controller per screen makes sense for your design, do it. But there's nothing stopping you from having one single controller for all screens or the same 5 controllers in all screens. Think about the general flow of your app before you start coding it. Software architecture is a huge topic by itself. Read about different patterns like MVP, MVVM, Clean Architecture, etc.

[@zeljkosh]

Very nice video, just curious about one thing (lets say around 29min to 30 min), you use rounded input to add a follower, but after submit how can you clear value of the rounded input. Do you have to do it from controller, or do you have to make Rounded input also obx wrapped?

[@zeljkosh]

i added TextEditingController to add followers, and after restaurantController.addFollowers(value); i just user textInputController.clear(); (and it works, is it proper way no idea )

[@TheFlutterFactory]

yep. Your UI should only talk to the restaurantController to manipulate state. You can listen for that state change wherever you want in the app. A TextEditingController is a built-in Flutter StateNotifier that holds/changes the state of that TextEdit. You can peek into the TextEditingController and learn more about it.

[@mohsinikram8921]

Hi thanks for this informative video. I have one question. The Obx() basically return a widget. But I want just need callback. Like when I will click on a button it will send me data so now it will up to me on where I will use this data.

[@TheFlutterFactory]

You don't have to use the data in your UI if you don't want to. A controller is used to store state/data that your app needs during the current session and to 'control' other aspects of your app that sets/gets that data. For example when you click a button, you can make an api call with a method in your controller that logs a user in. It's very likely that your UI needs to be notified and update when that happens so you can store whatever response you want from that in your controller in a variable. You don't have to listen for the data with an obx/Getbuilder if you don't need to, but it's there in your controller in case some other screen/widget wants to access it.

[@mohsinikram8921]

@@TheFlutterFactory Let me ask one thing, what is the best way for your point of view, I want to login in app, and I want to show progress bar that indicating the API is hitting, and when API will hit successfully , it will move to next screen. So for now, I just need callback for progress bar and success data like User object.

[@Tech1st]

can you create a video using getX, pagination API?

[@zeljkosh]

Just a small question (i dont know if i saw this in some part of tutorial,i did watch all of the ones regarding get). Simple example, lets say you have MainScreen with scaffold,app bar and drawer, MainController, and lets say we have TestScreen with its own widget tree. Now when i choose test screen in drawer i want that body of MainScreen scaffold be replaced with TestScreen. Should we make observable boolean in MainController, and when its false MainScreen scaffold shows empty container, then on drawer click we set it to true, and we get TestScreen in our MainScreen scaffold. is this proper way to do it, i think i saw this somewhere but i dont know if it was navigation part or the observable part. just curious if its ok to do this. Thanks!

[@TheFlutterFactory]

Based on how you worded your question, this has nothing to do with state management and it's a bit confusing. Don't overthink things. You can show different options in your drawer based on different conditions. Those bools can be stored in a state controller

[@zeljkosh]

@@TheFlutterFactory for some reason my comment gets removed when i past some code link. lets say we have MainScreen and TestScreen, main screen has scaffold, app bar and drawer. when i click on drawer item, i want MainScreen scaffold body to be populated with TestScreen widgets, i dont want to go to new page, or new screen, i want to replace scaffold body in existing view with different widgets

[@TheFlutterFactory]

@@zeljkosh you would set some bool value in your controller to represent each that state. For the widgets that you want to hide/show/switch, you can just check that value. You'll probably want to use GetBuilder (part 2) instead of obs values around those widgets since it's probably not a value that will change very often, but it's your choice. So you would have something like: GetBuilder( builder: (controller) => controller.showTestWidgets? YourTestWidget(): YourMainWidget() ) and you would do that for all the different widgets you want to show based on that bool value. in the onPress of your drawer item you just set that value with something like: controller.setTestWidgets(true | false)

[@zeljkosh]

@@TheFlutterFactory Thank you for reply, yes i did exactly like you described, i was just wondering if that is good practice. Cheers

[@zeljkosh]

@@TheFlutterFactory Thank you for reply, yes i did exactly like you described, i was just wondering if that is good practice. Cheers

[@JuniorIqfar]

If i close the apps, and i want the value are store in local data. How to implement this??...

[@TheFlutterFactory]

Persistent storage is a completely separate topic. You cans use AsyncStorage to store key value pairs (similar to SharedPreferences in native Android). And there Sqflite which is a persistent local Sqlite database for flutter. I've already created videos for both of those on the channel.

[@JuniorIqfar]

i was try with get_storage in controller i write this code getName() { return (storage.read('name') != null) ? storage.read('name') : name; } but it cannot load automatically please help me

[@setyatama8256]

Im waiting for a more video about GetX, crud API with GetXstate management. thanks

[@TheFlutterFactory]

I will do one more video about GetX. Networking is not part of the GetX library. REST APIs would be handled the same way with or without it.

[@fantabarack]

obs cannot be used anymore, it's deprecated. But I don't see any example code what can be used instead...

[@TheFlutterFactory]

Where did you see that obs is deprecated?

[@TechWithDnes]

Wow.. GetX

[@rabiasharma8575]

rounded input are not show

[@flutterdarkmode]

what name of this theme vscode

[@TheFlutterFactory]

DeepDark Material Theme. just search for it in the extensions panel.

[@shogi23]

.add and addIf( don't work, I don't know what to do next, I found nothing in google pleas hepp addReview (String name, String review ){ reviews.add(name, review); } The method 'add' isn't defined for the type 'Map'.

[@TheFlutterFactory]

That should be a pretty easy to debug. Did you define your Map variable? {}

[@francescofreddi4374]

now reviews.add(name, review). isnt define add for type ''Rxmap' need to write: reviews.addIf( true, name, review, ); instead

[@shogi23]

.add and addIf( don't work, I don't know what to do next, I found nothing in google pleas hepp

[@francescofreddi4374]

@@shogi23 use Rxmap... like a type