Hướng dẫn và ví dụ Flutter GetX GetBuilder

Cài đặt thư viện
Ví dụ GetBuilder

Trong Flutter GetX, GetBuilder là một widget quan trọng, nó được sử dụng để vẽ lên một vùng giao diện, và được vẽ lại khi GetxController thay đổi và bạn chủ động gọi phương thức update() của GetxController.

Khác với GetBuilder, Obx là một widget được sử dụng để vẽ ra một vùng giao diện, nó lắng nghe sự thay đổi của một biến trong GetxController và tự động vẽ lại vùng giao diện đó mà không cần sự can thiệp của bạn.
Hướng dẫn và ví dụ Flutter GetX obs Obx

1. Cài đặt thư viện

pubspec.yaml

dependencies: 
  get: ^5.0.0-release-candidate-9

2. Ví dụ GetBuilder

Mô hình dữ liệu được sử dụng trong các ví dụ của bài học này.

_model.dart

class Product {
  int id;
  String name;
  double price;
  double taxPercentage;

  Product({
    required this.id,
    required this.name,
    required this.price,
    required this.taxPercentage,
  });
}

ProductProvider là một lớp tiện ích thực hiện các hành động RESTful như GET, POST, PUT, DELETE.

_provider.dart

import '_model.dart';

class ProductProvider {
  Product findExampleProduct() {
    return Product(
      id: 1,
      name: "Samsung Galaxy S24 Ultra",
      price: 1799.99,
      taxPercentage: 0,
    );
  }
}

Trong Flutter GetX, GetMaterialApp được sử dụng để thay cho MaterialApp. Về cơ bản chúng có vai trò giống nhau và có một vài khác biệt nhỏ.

main_ex1.dart

import 'package:flutter/material.dart';
import 'page_main_ex1.dart';
import 'package:get/get.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(  // <----------- 
      title: 'Flutter GetX GetBuilder Demo 1',
      debugShowCheckedModeBanner: false,
      home: MainPageEx1(),
    );
  }
}

Flutter GetX sử dụng GetxController để quản lý trạng thái thay cho StatefulWidget. Hãy nhìn vào lớp ProductController dưới đây:

_controller.dart

import 'package:get/get.dart';

import '_model.dart';
import '_provider.dart';

class ProductController extends GetxController {
  ProductProvider provider = Get.put(ProductProvider());

  late Product product;

  @override
  void onInit() {
    super.onInit();
    product = provider.findExampleProduct();
  }

  void increasePrice() {
    product.price = product.price + 1;
    update();
  }

  void increaseTax() {
    product.taxPercentage = product.taxPercentage + 1;
    update();
  }
}

Tạo một đối tượng ProductProvider và đặt nó vào một "Objects Container" của trang. Nếu trong "Objects Container" đã sẵn có một đối tượng ProductProvider thì nó sẽ bị thay thế bởi đối tượng mới. Đối tượng này sẽ sẵn có để sử dụng đối với Route hiện tại và tất cả các Routes con.

page_main_ex1.dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';

import '_controller.dart';

class MainPageEx1 extends StatelessWidget {
  final ProductController controller = Get.put(ProductController());

  MainPageEx1({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text("Flutter GetX GetBuilder Demo 1"),
      ),
      body: GetBuilder( // <---------------------------------
        builder: (ProductController ctrl) {
          return Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text("Name: ${ctrl.product.name}"),
                const SizedBox(height: 10),
                Text("Price: ${ctrl.product.price}"),
                const SizedBox(height: 10),
                Text("Tax Percentage: ${ctrl.product.taxPercentage} %"),
                const SizedBox(height: 20),
                ElevatedButton(
                  child: const Text("Increase Price"),
                  onPressed: () {
                    ctrl.increasePrice();
                  },
                ),
                const SizedBox(height: 20),
                ElevatedButton(
                  child: const Text("Increase Tax Percentage"),
                  onPressed: () {
                    ctrl.increaseTax();
                  },
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}

Đoạn code bên trái và bên phải dưới đây hoạt động giống nhau.
`// (1) ProductController controller = Get.put(ProductController()); GetBuilder( builder: (ProductController ctrl) { // (2) ... }, ),`	`GetBuilder( init: Get.put(ProductController()), // (3) builder: (ProductController ctrl) { // (4) ... }, ),`
Đoạn code (1) tạo một đối tượng ProductController và đặt nó vào một "Objects Container" của trang. Nếu trong "Objects Container" đã sẵn có một đối tượng ProductContainer thì nó sẽ thay thế bởi đối tượng mới.	Đoạn code (3) hoạt động giống như đoạn code (1).
Một khi đối tượng ProductController sẵn có trong "Objects Container", nó sẽ được tiêm vào hàm "builder" của GetBuilder. Nếu không sẵn có bạn sẽ nhận được một lỗi.

Flutter GetX Bindings

Hướng dẫn và ví dụ Flutter GetX GetBuilder

1. Cài đặt thư viện

2. Ví dụ GetBuilder

Các hướng dẫn lập trình Flutter

Các hướng dẫn lập trình Flutter

Các bài viết mới nhất