GetX makes it simple to construct🧱 dependency injection, route management, and state management.

Contents:

• GetX Overview
• State Manager
• 1) Reactive State Manager
• 2) Simple State Manager
• Route Manager
• Dependencies Manager

GetX Overview:

A fast, light weight and powerful framework offers the easy 🔗route management, high-performance 🎇state management and intelligent 💉dependency injection.

State Manager:

• An app’s state is anything that resides in memory💾 while the app is running. This comprises the app’s assets, as well as all of the variables that the Flutter framework stores about the UI, such as animation state, textures, fonts, and so on, which may change🔧 or be updated⬆ during the course of the app’s lifecycle.
• GetX provides simple and reactive state manager to update⬆ widgets on upon changes on the state in the applications.
• GetX removes StatefulWidget, which implies that the state of a widget can be modified even within StatelessWidget.

🧪Reactive State Manager:

• Reactive state management is the ideal method for updating⬆ the widget automatically depending on changes in the represented data👨‍💻.
• GetX provide extremely simple way to implement reactive state management in our application.

There are 3 ways to turn a variable observable:-

The variable which ever need to be observed for changes should be declared as reactive variable.

1. Declaring a Reactive Variable with .obs():

2. Declaring a Reactive Variable with Rx{Type}:

3. Declaring a Reactive Variable using Dart Generics Rx<Type>:

Update⬆ the widget upon changes in the reactive variable:

Put the widget inside Obx() that has to be changed later on an event.

✨Simple State Manager:

GetX has a very light and simple state manager that does not require ChangeNotifier and will not create memory issues in large applications.

If controller exist in many other places use Get.find<Controller>()

Controller Lifecycle:

• onInit() — Where it is created.
• onClose() — where it is closed to make any changes in preparation for the delete method
• deleted: It is removed the controller from the memory.

Unique 🆔:

You may use GetBuilder to refine a widget’s update control by assigning them unique IDs.

Route Manager:

The route manager facilitates navigating between screens in an application.

Navigation without named routes:

Navigation with named routes:

To define routes, use GetMaterialApp:

Navigate named to route:

Dependencies Manager:

Get offers a straightforward and strong dependency management that allows you to obtain the same class as your Bloc or Controller with only one line of code, no Provider context, and no inheritedWidget.

Get.put:

Get.lazyPut:

The lazyLoad instantiate the dependency and allocate memory💾 only when it is in use. Very useful for computational expensive classes

Get.putAsync:

Get.create:

Attributes and References:

Cover Image: Image by vectorjuice on Freepik

GetX Documentation: Flutter GetX Fast, Stable, Extra-light and Powerful Flutter Framework!

Reactive State manager GIF: Flutter Official Doc.

Video: A best YouTube playlist to learn GetX

This responsive widget is simply reusable♻ across all projects!…

Overview:

A graphic user interface (GUI) design strategy called responsive design is used to provide content that dynamically adapts to different screen sizes which make our application to use conveniently across multiple platform.

Steps involved in creating responsive widget:

• Determine the current screen📱 size.
• Update⬆ the widget with respect to the size.

Get the current screen resolution:

In flutter, the “MediaQuery”💻 is used to obtain the current screen size📱; the code snippet👨‍💻 to access the screen size is shown below.

Update the widget:

• The above code snippet yields a vector object from we can obtain the screen width in order to replace or resize the widget.
• In this demo application, the widget is switched between large and small screens, and when the screen size is shrunk to its threshold size, a hamburger🍔 menu is replaced in the 🔝top navigation bar.

Responsive Widget:

The Responsive Widget can be passed with a maximum of three different Layouts for three different screen sizes as a parameter. Using media query in flutter, we can fetch screen size and custom functions were created to check the screen size anywhere in the code, and inside layout builder, we return the appropriate layout in terms of screen size.

Here we can have multiple custom screen size depends upon our needs!

🖋 Design distinct layouts for different screen sizes:

I built two unique example layouts for two different screen sizes, which can be simply swapped using the responsive widget mentioned above.

Check my GitHub repo for those demo layouts.

🧱 Assemble everything created in main.dart

I’ve passed LargeScreen and SmallScreen here; you may pass another layout for medium screen size in the same way the other two are. You may build on top of the responsive widget to pass extra layouts as needed.

Some assistance feature to alter asset size dynamically in relation to screen size:

Here is an example use case of the custom function included in a responsive widget: a hamburger menu is replace with the top navigation bar when the screen size is below a certain threshold.

Finally, we reached this

Here is the GitHub reference to utilize the responsive widget on your project!!

Attributes and References:

Cover Image: Concept illustration vector created by storyset — www.freepik.com

Flutter documentation: Creating responsive and adaptive apps

A Quick overview about media query on YouTube!