To demonstrate how GetX works we are going to do the same application example we did for our other state management tutorials. We will have an AppBar and three buttons; the three buttons will each have a name of a fruit on them, and as you select each button, the AppBar will change with the name of the fruit listed on the button you selected.

Let's start with our typical Tutorial Boilerplate:

import 'package:flutter/material.dart'; void main() => runApp(GetXApp()); class GetXApp extends StatelessWidget { const GetXApp({ Key? key }) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('My favorite fruit is n/a.'), ), ), ); } }

Running that you should see this:

And then we will add 3 buttons, one for Apples, one for Oranges, and one for Bananas:

appBar: AppBar( title: Text('My favorite fruit is n/a.'), ), // AppBar body: Center( child: Column( children: [ ElevatedButton(child: Text('Apples'), onPressed: () {}), ElevatedButton(child: Text('Oranges'), onPressed: () {}), ElevatedButton(child: Text('Bananas'), onPressed: () {}), ], ), // Column ), // Center ), // Scaffold

Now we will do the simplest form of GetX, which will just update the values on reload. First we need to import get into our app:

flutter pub add get

If it worked correctly you should see it listed in your pubspec.yaml file.

Now we will import get into our application:

import 'package:flutter/material.dart'; import 'package:get/get.dart'; void main() => runApp(GetXApp());

And we are going to create a class called Favorites that will use the GetxController. Think of Favorites as a class you could use for all of your favorite stuff, like favorite color, favorite flavor of ice cream... for now we're just going to do favorite fruit though. We will put this at the very bottom:

class Favorites extends GetxController { String fruit = 'unknown'; void changeFruit(String newFruit) { fruit = newFruit; update(); } }

Now up in the build widget of GetXApp we will add this line:

Widget build(BuildContext context) { final Favorites favorites = Get.put(Favorites()); return MaterialApp(

And then we are going to add a GetBuilder to the AppBar to display the fruit variable:

appBar: AppBar( title: GetBuilder<Favorites>( builder: (_) => Text('My favorite fruit is ${favorites.fruit}.') ), // GetBuilder ), // AppBar

If all of that is inserted correctly, you should now see "unknown" in the AppBar instead of "n/a".

So now let's plug some code into the buttons to make this thing actually work:

body: Center( child: Column( children: [ ElevatedButton(child: Text('Apples'), onPressed: () { favorites.changeFruit('Apples'); }), // ElevatedButton ElevatedButton(child: Text('Oranges'), onPressed: () { favorites.changeFruit('Oranges'); }), // ElevatedButton ElevatedButton(child: Text('Bananas'), onPressed: () { favorites.changeFruit('Bananas'); }), // ElevatedButton ], ), // Column ), // Center

And with that, your application should function as expected, you press the Apples button, it changes your favorite fruit from "unknown" to "Apples". Or Bananas. Or Oranges. It's that simple!

Click here for the source code So far.

We can clean this up a little bit and get rid of the redundant code in the Elevated Buttons. First thing we will do is create a Stateless Widget above the Favorites class called FruitButton:

class FruitButton extends StatelessWidget { final String fruit; FruitButton(this.fruit); @override Widget build(BuildContext context) { return ElevatedButton( onPressed: () {}, child: Text(fruit), ); } }

And then now we can simplify the ElevatedButtons like this:

body: Center( child: Column( children: [ FruitButton('Apples'), FruitButton('Oranges'), FruitButton('Bananas'), ], ), ),

To make this function like it did before we can now use Get.find in our onPressed in our FruitButton like so:

return ElevatedButton( onPressed: () { Get.find<Favorites>().changeFruit(fruit); }, child: Text(fruit),

And because we only have one call to favorites in GetXApp now, we can remove this line:

Widget build(BuildContext context) { final Favorites favorites = Get.put(Favorites()); return MaterialApp(

And then make these changes to the GetBuilder:

appBar: AppBar( title: GetBuilder<Favorites>( init: Favorites(), builder: (_) => Text('My favorite fruit is ${_.fruit}.') ), ),

(Note "favorites.fruit" became "_.fruit".)

And it should still function like it did before but it should look a little bit cleaner. Click here for the source code after we made these changes.

If you'd like something more reactive we can use obs and GetX to make it observable. We're going to change things up a bit for this. First we will create a model for Fruit. We will put this at the very bottom:

class Fruit { String name; Fruit({this.name = 'unknown'}); }

And then we are going to modify our Favorites Class just a bit to work with that model:

class Favorites extends GetxController { final fruit = Fruit().obs; void changeFruit(String newFruit) { fruit.update((thisFruit) { thisFruit!.name = newFruit; }); } }

So we are now setting the Fruit model to the fruit variable and making it observable (obs). Then when the fruit is changed, we will call update to update the name property inside the Fruit model.

Now we will use GetX inside the AppBar like so:

appBar: AppBar( title: GetX<Favorites>( init: Favorites(), builder: (_) => Text('My favorite fruit is ${_.fruit.value.name}') ), // GetX ), // AppBar

You'll notice instead of calling just "fruit" name, we have to call "fruit.value.name". But the app should still work the same way.

And finally if you want to put this line back in:

class GetXApp extends StatelessWidget { final Favorites favorites = Get.put(Favorites()); @override

We can use Obx which is a little cleaner:

appBar: AppBar( title: Obx(() => Text('My favorite fruit is ${favorites.fruit.value.name}')), ),

So there are some examples of options you have using Get/GetX for your state management!

YouTube Description:

More Videos