Get a detailed slides of Flutter State Management Using GetX

1. H T T P S : / / W W W . B A C A N C Y T E C H N O L O G Y . C O M /
Flutter
State
Manageme
nt Using
GetX

2. Introduction

3. Whenever we start building any
application in a flutter, we must
decide which state management
we need to use. It would be easier
for you to make this decision with
this blog. Here, in this tutorial:
Flutter state management using
GetX, I would like to explain GetX,
a powerful flutter framework.

4. What is GetX?

5. State management allows you data
transferring within the application.
And whenever data is passed, the
application’s state is updated,
consequently rebuilding the system.
Thus, developers have to be
particularly careful about managing
the state of an application because
state updation may sometimes seem
costly for a complex application.
Flutter traditionally provides Stateful
Widget to manage states in
applications. However, we need to
deal with a few limitations when using
Stateful Widgets

6. High-performance state
management
Intelligent dependency injection
Quick and practical route
management
To overcome the limitations, we can
choose Flutter state management
using GetX.
GetX is a powerful and lightweight
solution provided by Flutter to
manage states and their updation. It
provides:

7. Why GetX?

8. Productivity: Developers can easily
implement state management with
the help of straightforward syntax.
No matter how complex a code
snippet can be, you can save time
with GetX. It increases productivity
by decreasing the development time
delivering maximum performance.
Organization and Readability: GetX
decouples the View. It provides easy
and uncomplicated syntax,
consequently increasing the
readability and format of the
business logic.
So, let’s dive a little deeper into why we
need GetX to manage the state in the
flutter app. GetX improves flutter
application in three different criteria:

9. Performance: As mentioned above,
GetX focuses on how minimum
resources can be consumed, which
can help in improving the
application performance. It doesn’t
use ChangeNotifier or Streams. Look
at the below RAM chart depicting
various state managers.

10. Enough of the theory part. Let’s move
forward in our Flutter state
management using GetX tutorial and
implement it in our application.

11. Install GetX

12. flutter pub add get
Run the above command in Android
studio/vs code’s terminal, and it will
add the latest GetX plugin to
pubspec.yaml.
We are going to cover three sections in
this further tutorial
1. State management for basic counter
app
2. Navigation using GetX
3. Inflating UI components without
context

13. Put forward your requirements, and
we will provide solutions!
Develop best, cost-effective, and
high-performance Flutter
applications with Bacancy! Stop
wasting your time and connect us to
hire Flutter developer!

14. Flutter State
Management
using GetX

15. Here I will create one counter app by
separating UI logic and business logic
using a controller, and I would use Obx for
this. Don’t worry if you are not aware of all
this; I am explaining all these in detail one
by one.
You can see the project structure I have
created using the recommended GetX
pattern, with a view, controller, and binding
class. View class handles the code for
inflating the UI, which will appear on the
screen

16. The binding class would be associated
with a particular page, and in that class,
we can instantiate controller classes. In
controller class, we can define variables
and business logic functions, in our case
increment function. Also, In the main.dart,
we have declared GetMaterialApp not
MaterialApp so we can use all the
functionalities of GetX framework.

17. CounterController class
class CounterController extends
GetxController {
final count = 0.obs;
void increment() {
count.value++;
}
}
Here I have declared the count variable
with .obs, which means count is
observable, and whenever there is a
change in this value, we can listen to that
value via controller class..

18. CounterBinding class
class CounterBinding extends
Bindings {
@override
void dependencies() {
Get.lazyPut(
() => CounterController(),
);
}
}
Here I have declared the count variable
with .obs, which means count is
observable, and whenever there is a
change in this value, we can listen to that
value via controller class..

19. CounterView class
class CounterView extends
GetView {
@override
Widget build(BuildContext
context) {
final CounterController
counterController =
Get.put(CounterController());
return Scaffold(
appBar: AppBar(
title: Text('Counter'),
centerTitle: true,
),

20. body: Center(
child: Column(
mainAxisAlignment:
MainAxisAlignment.center,
crossAxisAlignment:
CrossAxisAlignment.center,
children: [
Obx(() =>
Text(
"Counter value is
${counterController.count}",
style: TextStyle(fontSize: 25),
),
),
SizedBox(height: 16),
TextButton(
style: ButtonStyle(

21. backgroundColor:
MaterialStateProperty.all(Colors.blue),
),
onPressed: () {
counterController.increment();
},
child: Text('Increment', style:
TextStyle(fontSize: 14, color:
Colors.white)),
),
],
),
),
);
}
}

22. final CounterController
counterController =
Get.put(CounterController());
Using the above syntax in the build
method, I have defined the controller
class. Text button will call increment
method defined in controller class and
Text which will show the updated
value of count. But the main thing you
can see is the text widget is wrapped
with Obx, which means it can get the
value of the observable variable;
without Obx, the value would not get
reflected.

23. Here I have used one simple example
of counter application to understand
all the classes, structure, and state
management easily. We can achieve
many more using GetX using following
this observable pattern and writing
cleaner code.
Let’s dive into the navigation part.

24. Navigation
using GetX

25. In the screenshot attached in the state
management block, we have also created
a page name home. So let’s say we need
to go to the home page from the counter
class on one button click. We can simply
call the GetX navigation block, as shown
below.
Get.to(HomeView());
Pretty simple. Isn’t it? Rather than
calling up a lot of boilerplate code, we
can simply call this and move to a
different screen. Moreover, there are
different options to redirect to another
page too.
For instance, you can simply replace the
home screen with a currently open
screen below. It means the current
screen which would get replaced won’t
be in the stack.

26. Get.off(HomeView());
And, if we need to remove all
previous stacks, we can call
Get.off(HomeView());
Get.offAll(HomeView());
Apart from that, we can pass data
between routes and show animation
before opening another route and open a
screen as a dialog using GetX.
Now let’s move to our final point of
Inflating UI components without
context.

27. Inflating UI
Components
without
Context

28. Traditionally, to open a dialog or
bottom sheet. If you have a separate
file that handles common widgets, we
also need to pass context to that class.
But with GetX, it is not the case. We
can simply inflate that kind of UI
block without using context and in an
easier way.
To show snackbar
Get.snackbar('This is snackbar', 'This is
snackbar message', backgroundColor:
Colors.red);

29. Traditionally, to open a dialog or
bottom sheet. If you have a separate
file that handles common widgets, we
also need to pass context to that class.
But with GetX, it is not the case. We
can simply inflate that kind of UI
block without using context and in an
easier way.
To show snackbar
Get.snackbar('This is snackbar', 'This is
snackbar message', backgroundColor:
Colors.red);

30. To show dialog
Get.defaultDialog(
title: 'This is dialog',
middleText: 'This is middle text',
buttonColor: Colors.green,
textCancel: "cancel",
textConfirm: "confirm");

31. To show bottom sheet
Get.bottomSheet(
Container(
child: Wrap(
children: [
ListTile(
leading:
Icon(Icons.wb_sunny_outlined),
title: Text("Light theme"),
onTap: () =>
{Get.changeTheme(ThemeData.light())
},

32. ),
ListTile(
leading: Icon(Icons.wb_sunny),
title: Text("Dark theme"),
onTap: () =>
{Get.changeTheme(ThemeData.dark())},
)
],
),
),
backgroundColor: Colors.green
);

33. I think this is it for GetX. You can go
through the below official link to explore
more about GetX.
https://pub.dev/packages/get
With the Git Cli plugin, you can make the
project structure more trouble-free. You
can check out the link below.
https://pub.dev/packages/get_cli

34. Conclusion

35. That’s it for Flutter state
management using GetX tutorial.
If you are a flutter enthusiast, the
Flutter tutorials page is for you!
Try the tutorials and start
implementing them in your
application. Write us back if you
have any suggestions, queries, or
questions.

36. Thank You !
www.bacancytechnology.com