Update Get Builder with id in Getx Flutter
Hi Coders,
hope you are doing great,
Today in this article we are gonna learn about the new axciting feature of Get builder in Getx i.e its id,
and yes you heard it right Get builder of Getx Flutter provide the id by which we can update the GetBuilder below are few pros and cons of that so first lets dive into that before moving to the main course
Watch this article in YouTube
What is GetBuilder ID:
Each GetBuilder has it own id which you can give them a unique name to call that particular getbuilder by their id , and just like the key which we have in every widget we used in Flutter.
Why we need :
Getbuilder return a widget which means that the return part of the Getbuilder will always refresh and not only the updating one and suppose if we implement 2 GetBuilder to overcome that issue then there is a case which we will handle is that
1. Every Getbuilder will refresh with the update function
BUT if we set the id to the Getbuilder then we can update that particular Getbuilder
Now let's get to the coding part
Homepage_view.dart
import 'dart:developer';
import 'package:codemicros_getx_series/app/views/home/homepage_controller.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
class HomepageView extends StatelessWidget {
const HomepageView({super.key});
@override
Widget build(BuildContext context) {
return GetBuilder(
id: 'outer',
builder: (HomepageController homepageController) {
log("-->> Outer get builder called");
return Scaffold(
appBar: AppBar(
title: Text(
homepageController.isDark.value ? "Dark Theme" : "LightTheme"),
actions: [
Switch(
value: homepageController.isDark.value,
onChanged: (value) {
homepageController.updateTheme();
},
)
],
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
GetBuilder<HomepageController>(
id: "inner",
builder: (controller) {
log("-->> inner get builder called");
return Text(controller.counter.value.toString());
},
),
ElevatedButton(
onPressed: () {
homepageController.updateCounterValue();
},
child: Text("update count"))
],
),
),
floatingActionButton: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
ElevatedButton(
onPressed: () {
homepageController.redirectToTesting();
},
child: const Text("Go to Testing Screen"))
],
),
);
},
);
}
}
Homepage_controller.dart
import 'dart:developer';
import 'package:codemicros_getx_series/app/routes/app_routes.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
class HomepageController extends GetxController {
final RxInt counter = 0.obs;
int counter2 = 0;
RxBool isDark = false.obs;
//udate theme
updateTheme() {
log("is Dark:--> ${isDark.value}");
log("is Dark from Getx :--> ${Get.isDarkMode}");
Get.changeTheme(Get.isDarkMode ? ThemeData.light() : ThemeData.dark());
// Get.changeThemeMode()
isDark.value = !isDark.value;
update();
}
//update count value
updateCounterValue() {
counter.value = counter.value + 1;
update(["inner"]);
}
updateCounter2Value() {
counter2 = counter2 + 1;
update();
}
changeLanguage({
required String lang,
required String countryCode,
}) {
Get.updateLocale(Locale(lang, countryCode));
}
/// Redirect to Testing screen
redirectToTesting() {
Get.toNamed(Routes.testing);
}
}
