Get – Make Flutter easy (Part 1)

Saturday, 19/09/2020

Tram Ho

Introduce

For those who are new to flutter, the potential for a structure, pattern to follow is extremely important. Today I will introduce to you an all-powerful Plugin that makes your Flutter code much more efficient and productive. That is Get one of the hottest Plugins in the Flutter community as well as on Pub.dev currently. And why is it so hot, what does it do, let’s find out

Note: to start using this Plugin you should also learn the Flutter engine first to understand how Futter components work. Again tools only make it easier at work, but in order to tackle more complex and in-depth problems, understanding Flutter is imperative.

So what does Get do:

State Manager: State management in Flutter
Navigation Manager: Manage navigation
Dependencies Manager: Provides excellent dependencies injection solution
Utils function: Utility functions that are extremely useful in Flutter programming

Because the content of Get is quite long, I will divide it into many parts: Today we will learn about how to manage the state of Get first.

First, to use get, you add dependencies to the pubspec.yaml file first

dependencies:
  flutter:
    sdk: flutter
  get: ^3.4.6

dependencies:

flutter:

sdk: flutter

get: ^3.4.6

Get – State Manager

Advantages

First, I’ll cover the problems with current common types of state management

The BLoC pattern is also an efficient and secure way of state management. However, the code is quite confusing and time-consuming to implement, in some cases it is difficult to handle. Difficult to reach new people
MobX is also a great library, easier to use than BLoC, but too dependent on code generation. It can be confusing to the user and bloat the project’s scope
A provider is a basic type of state management that is very effective for many people. In the beginning, everyone should use a proficient Provider. However, the Provider uses InheritedWidget and it can only be used in the widget tree, so in many cases it cannot be handled.

Next is the advantages of Get – State manager

Only update the necessary widgets
Uses less memory than other types of state management
Forget StatefulWidget. With Get you don’t have to think about using StatefulWidget or StateLessWidget anymore. Now you have only one component, GetWidget
The organization of the project structure will be extremely clear, the logical code is completely separated from the UI (I will demo the project structure in the last post of the series)
Update widgets without spending ram for that
Memory optimization, you will not have to worry about Out Memory anymore, Get will automatically clean up unnecessary components.

Principle of operation

In principle, Get. Those who are familiar with working with Rx will surely understand how it works easily

Get basically works like Rx, also has Observables and components to listen for changes of Observable.

To declare an Observable with Get is also very simple, there are three ways as follows

The first is using Rx{Type}.

    var count = RxString();
    
The second is to use Rx and type it with Rx&lt;Type&gt;

    var count = Rx&lt;String&gt;();
    
The third, more practical and easier approach, is just to add an .obs to your variable.

    var count = 0.obs;
    Rx&lt;int&gt; count = 0.obs;

The first is using Rx{Type}.

var count = RxString();

The second is to use Rx and type it with Rx<Type>

var count = Rx<String>();

The third, more practical and easier approach, is just to add an .obs to your variable.

var count = 0.obs;

Rx<int> count = 0.obs;

Next I will introduce GetxController

Each screen will have a Controller extends from GetxController. This controller will declare Observable and process all logic of that screen. Ex

class Controller extends GetxController {
  var count = 0.obs;
  void increment() {
    counter.value++;
  }
}

class Controller extends GetxController {

var count = 0.obs;

void increment() {

counter.value++;

}

To listen to Observables in View you can use one of the following ways

1. GetX Component

GetX&lt;Controller&gt;(
  builder: (value) {
    print("count  rebuild");
    return Text('${controller.count.value}');
  },
),

GetX<Controller>(

builder: (value) {

print("count rebuild");

return Text('${controller.count.value}');

When the value of the observable count changes, the widget uses it automatically is updated without affecting the other widgets in the widget tree.

2. GetBuilder This is a simple way to use the Get State Manager.

In controller

// Create controller class and extends GetxController
class Controller extends GetxController {
  int counter = 0;
  void increment() {
    counter++;
    update(); // use update() to update counter variable on UI when increment be called
  }
}

// Create controller class and extends GetxController

class Controller extends GetxController {

int counter = 0;

void increment() {

counter++;

update(); // use update() to update counter variable on UI when increment be called

}

In View

GetBuilder&lt;Controller&gt;(
  init: Controller(), // INIT IT ONLY THE FIRST TIME
  builder: (controller) =&gt; Text(
    '${controller.counter}',
  ),
)

GetBuilder<Controller>(

init: Controller(), // INIT IT ONLY THE FIRST TIME

builder: (controller) => Text(

'${controller.counter}',

)

For GetBuilder we do not need to declare the type Observable for the fields but directly use the type to use. However, you need to call the update () function available in GetXController to update the Widgets

If you have navigate to another screen but still need to use data from old monitor, simply call the controller of that screen to use. This is a great point of Get

Class a => Class B (has controller X) => Class C (has controller X)

class PageA extends GetWidget&lt;ControllerA&gt; {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: FlatButton(
          onPress() =&gt;   Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) =&gt; ClassB()));
        ),
      ),
}

class PageB extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: GetBuilder&lt;ControllerA&gt;(
          builder: (s) =&gt; Text('${s.counter}'),
        ),
      ),
}

// Hoặc sử dụng Get.find() 

class PageC extends StatelessWidget {
ControllerA _controllerA = Get.find();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child:  =&gt; Text('${_controllerA.counter}'),
      ),
}

class PageA extends GetWidget<ControllerA> {

@override

Widget build(BuildContext context) {

return Scaffold(

body: Center(

child: FlatButton(

onPress() => Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) => ClassB()));

}

class PageB extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Scaffold(

body: Center(

child: GetBuilder<ControllerA>(

builder: (s) => Text('${s.counter}'),

}

// Hoặc sử dụng Get.find()

class PageC extends StatelessWidget {

ControllerA _controllerA = Get.find();

@override

Widget build(BuildContext context) {

return Scaffold(

body: Center(

child: => Text('${_controllerA.counter}'),

}

3.Obx () The last way is by using Obx () componet. This will be the mainstream way we should use it in practice. Because of its certain advantages (this one you take the trouble to read the attached link below, because it’s quite verbose)

// controller 

class HomeController extends GetxController {
  var count = 0.obs;
  void increment() {
    counter.value++;
  }
}

class HomePage extends GetWidget&lt;HomeController&gt; {

  @override
  Widget build(BuildContext context) {
    return Column(
        children: [
             Obx(() =&gt; Text(_controller.count.value.toString()),
             FooterWidget(),
        ]     
    );
  }
}


class FooterWidget extends GetWidget {
  DetailController _controller = Get.find();

  @override
  Widget build(BuildContext context) {
    return Center(
        child: Obx(() =&gt; Text(_controller.count.value.toString())
        );
  }
}

// controller

class HomeController extends GetxController {

var count = 0.obs;

void increment() {

counter.value++;

}

class HomePage extends GetWidget<HomeController> {

@override

Widget build(BuildContext context) {

return Column(

children: [

Obx(() => Text(_controller.count.value.toString()),

FooterWidget(),

]

);

}

class FooterWidget extends GetWidget {

DetailController _controller = Get.find();

@override

Widget build(BuildContext context) {

return Center(

child: Obx(() => Text(_controller.count.value.toString())

);

}

With Getx – Obx the child widgets will easily use the Controller of the parent widget. Update data is automatically updated every time observable changes its value. Extremely easy is not it

Binding

Another extremely important component of Get is Binding.

Similar to Controller, each screen will also have a Binding, which is the place to provide dependencies (repository, usecase, ….) for that screen even controller is provided here. This section is related to dependencies manager so I will explain in the following section. I will show you how to use Binding as follows:

class DetailBinding extends Bindings {
  @override
  void dependencies() {
    Get.lazyPut&lt;DetailController&gt;(() =&gt; DetailController());
  }
}

class DetailBinding extends Bindings {

@override

void dependencies() {

Get.lazyPut<DetailController>(() => DetailController());

}

Binding will be attached when configuring route in App. Well forget to use all the features of Get you must use GetMaterialApp Ex

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      enableLog: true,
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      initialBinding: DependenciesBinding(),
      initialRoute: '/search',
      getPages: [
        GetPage(
            name: '/search',
            page: () =&gt; SearchPage(),
            binding: SearchBinding()),
        GetPage(
            name: '/detail', page: () =&gt; DetailPage(), binding: DetailBinding())
      ],
    );
  }
}

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return GetMaterialApp(

enableLog: true,

debugShowCheckedModeBanner: false,

title: 'Flutter Demo',

theme: ThemeData(

primarySwatch: Colors.blue,

visualDensity: VisualDensity.adaptivePlatformDensity,

initialBinding: DependenciesBinding(),

initialRoute: '/search',

getPages: [

GetPage(

name: '/search',

page: () => SearchPage(),

binding: SearchBinding()),

GetPage(

name: '/detail', page: () => DetailPage(), binding: DetailBinding())

);

}

So to manage state with Get, each screen in Flutter will consist of 3 components: Controller class (Extends from GetXController), Binding class (Extend from Binding) and Widget class (Extends from GetWidget)

To learn more about State Manager with Get you go to the following link: https://github.com/jonataslaw/getx/blob/master/docs/en_US/state_management.md#conditions-to-rebuild

Thank you for watching, wish you success and see you in the next section

Share the news now

Source : Viblo

Get – Make Flutter easy (Part 1)

Introduce

Get – State Manager

Advantages

Principle of operation

TikTok becomes the second largest social platform in South Africa

The fastest depreciating after 9 months of launch, iPhone 14 Pro Max continues to break the bottom in Vietnam

Beginner's guide to R: Introduction

10 essential SublimeText plugins for JavaScript developers