I just started learning to use GetX in Flutter for some state management and performing a few experiences. Now I'm having a problem on updating successfully the button color state when the form fields aren't empty. I could just to this easily with a setState() and get what I wanted. Am I missing something here?
home_page.dart:
class HomePage extends GetWidget<HomeController> {
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
const SizedBox(
height: 20,
),
const AppTextField(),
const SizedBox(height: 16),
gb.passwordController.text.isNotEmpty &&
gb.confirmPasswordController.text.isNotEmpty
? Obx(
() => AppButton(
onPressed: () {
log('${gb.passwordController.text} ${gb.confirmPasswordController.text}');
gb.passwordController.text !=
gb.confirmPasswordController.text
? Get.snackbar('Error', 'Passwords do not match')
: Get.snackbar('Success', 'Passwords match');
},
text: "Login".toUpperCase(),
),
)
: AppButton(
color: Colors.grey,
onPressed: () {},
text: "Login".toUpperCase(),
),
],
),
home_controller.dart
class HomeController extends GetxController {
HomeController({this.provider});
final HomeProvider? provider;
final btn = AppButton(onPressed: () {}, text: 'Login'.toUpperCase()).obs;
RxBool formField = false.obs;
}
I just need the color to change. The only examples I find is to change values from variables.
CodePudding user response:
Here's a complete example application that uses GetxController
and GetWidget
where a button is enabled only when the TextField
has text and also a container that changes color according to that. Maybe it helps you understand it:
import 'package:flutter/material.dart';
import 'package:get/get.dart';
void main() {
runApp(
GetMaterialApp(initialBinding: InitialBindings(), home: const MainApp()));
}
class MainApp extends GetWidget<MainAppController> {
const MainApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
TextField(
controller: controller.textEditingController,
),
Obx(() => ElevatedButton(
onPressed: controller.enableButton.value ? () {} : null,
child: const Text("Button"))),
Obx(() => Container(
width: 100,
height: 100,
color:
controller.enableButton.value ? Colors.green : Colors.red,
))
],
),
);
}
}
class InitialBindings extends Bindings {
@override
void dependencies() {
Get.create(() => MainAppController());
}
}
class MainAppController extends GetxController {
TextEditingController textEditingController = TextEditingController();
RxBool enableButton = false.obs;
@override
void onInit() {
super.onInit();
textEditingController.addListener(() {
enableButton.value = textEditingController.text.isNotEmpty;
});
}
@override
void onClose() {
textEditingController.dispose();
super.onClose();
}
}