Como fazer a validação de formulários com GetX

Olá, Gabriel.

Tudo bem?

Vou deixar um exemplo de cpmp isso pode ser feito, veja se faz sentido:

1. Adicionar dependências: No pubspec.yaml:

   dependencies:
     get: ^4.6.5
   

2. Criar o Controller: Gerencie estados e validações:

   import 'package:get/get.dart';
   import 'package:flutter/material.dart';
   
   class FormController extends GetxController {
     var email = ''.obs;
     var password = ''.obs;
   
     final emailController = TextEditingController();
     final passwordController = TextEditingController();
   
     String? validateEmail(String value) {
       if (!GetUtils.isEmail(value)) {
         return "Provide a valid Email";
       }
       return null;
     }
   
     String? validatePassword(String value) {
       if (value.length < 6) {
         return "Password must be at least 6 characters";
       }
       return null;
     }
   
     void submit() {
       if (validateEmail(email.value) == null && validatePassword(password.value) == null) {
         Get.snackbar("Success", "Form is valid");
       } else {
         Get.snackbar("Error", "Please provide valid information");
       }
     }
   }
   

3. Criar a View: Interface do usuário com validação:

   import 'package:flutter/material.dart';
   import 'package:get/get.dart';
   import 'form_controller.dart';
   
   class FormPage extends StatelessWidget {
     final FormController controller = Get.put(FormController());
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(title: Text('Form Validation with GetX')),
         body: Padding(
           padding: const EdgeInsets.all(16.0),
           child: Column(
             children: [
               Obx(
                 () => TextField(
                   controller: controller.emailController,
                   onChanged: (value) => controller.email.value = value,
                   decoration: InputDecoration(
                     labelText: 'Email',
                     errorText: controller.validateEmail(controller.email.value),
                   ),
                 ),
               ),
               SizedBox(height: 16),
               Obx(
                 () => TextField(
                   controller: controller.passwordController,
                   onChanged: (value) => controller.password.value = value,
                   decoration: InputDecoration(
                     labelText: 'Password',
                     errorText: controller.validatePassword(controller.password.value),
                   ),
                   obscureText: true,
                 ),
               ),
               SizedBox(height: 16),
               ElevatedButton(onPressed: controller.submit, child: Text('Submit')),
             ],
           ),
         ),
       );
     }
   }
   

4. Integrar na Aplicação:

   import 'package:flutter/material.dart';
   import 'form_page.dart';
   
   void main() {
     runApp(MyApp());
   }
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return GetMaterialApp(
         title: 'Flutter GetX Form Validation',
         theme: ThemeData(primarySwatch: Colors.blue),
         home: FormPage(),
       );
     }
   }
   

Com esses passos, você terá um projeto em Flutter utilizando o GetX para validar os campos de formulário, exibindo mensagens de erro quando necessário e notificações de sucesso/erro.

Seria mais ou menos isso?

Espero ter ajudado. Qualquer dúvida manda aqui. Bons estudos.

Obrigado pela resposta, o fumulário que possuo tem um dropdowninputfiel, como eu trabalho com ele usando o controller sem precisar usar set state, por exemplo validadar, manter a opção seleciona depois do onchange?

Para trabalhar com um DropdownButton usando o GetX, você pode utilizar um RxString ou RxInt (dependendo do tipo de dado que o dropdown representa) para manter o valor selecionado. Vou mostrar um exemplo de como você pode fazer isso:

1. Adicionar Dependências: No pubspec.yaml:

   dependencies:
     get: ^4.6.5
   

2. Criar o Controller: Gerencie estados e validações:

   import 'package:get/get.dart';
   import 'package:flutter/material.dart';
   
   class FormController extends GetxController {
     var email = ''.obs;
     var password = ''.obs;
     var selectedOption = ''.obs; // Para o Dropdown
   
     final emailController = TextEditingController();
     final passwordController = TextEditingController();
   
     String? validateEmail(String value) {
       if (!GetUtils.isEmail(value)) {
         return "Provide a valid Email";
       }
       return null;
     }
   
     String? validatePassword(String value) {
       if (value.length < 6) {
         return "Password must be at least 6 characters";
       }
       return null;
     }
   
     void submit() {
       if (validateEmail(email.value) == null && validatePassword(password.value) == null && selectedOption.value.isNotEmpty) {
         Get.snackbar("Success", "Form is valid");
       } else {
         Get.snackbar("Error", "Please provide valid information");
       }
     }
   }
   

3. Criar a View: Interface do usuário com validação e dropdown:

   import 'package:flutter/material.dart';
   import 'package:get/get.dart';
   import 'form_controller.dart';
   
   class FormPage extends StatelessWidget {
     final FormController controller = Get.put(FormController());
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(title: Text('Form Validation with GetX')),
         body: Padding(
           padding: const EdgeInsets.all(16.0),
           child: Column(
             children: [
               Obx(
                 () => TextField(
                   controller: controller.emailController,
                   onChanged: (value) => controller.email.value = value,
                   decoration: InputDecoration(
                     labelText: 'Email',
                     errorText: controller.validateEmail(controller.email.value),
                   ),
                 ),
               ),
               SizedBox(height: 16),
               Obx(
                 () => TextField(
                   controller: controller.passwordController,
                   onChanged: (value) => controller.password.value = value,
                   decoration: InputDecoration(
                     labelText: 'Password',
                     errorText: controller.validatePassword(controller.password.value),
                   ),
                   obscureText: true,
                 ),
               ),
               SizedBox(height: 16),
               Obx(
                 () => DropdownButton<String>(
                   value: controller.selectedOption.value.isEmpty
                       ? null
                       : controller.selectedOption.value,
                   hint: Text('Select an option'),
                   items: <String>['Option 1', 'Option 2', 'Option 3']
                       .map((String value) {
                     return DropdownMenuItem<String>(
                       value: value,
                       child: Text(value),
                     );
                   }).toList(),
                   onChanged: (newValue) {
                     controller.selectedOption.value = newValue!;
                   },
                 ),
               ),
               SizedBox(height: 16),
               ElevatedButton(onPressed: controller.submit, child: Text('Submit')),
             ],
           ),
         ),
       );
     }
   }
   

4. Integrar na Aplicação:

   import 'package:flutter/material.dart';
   import 'form_page.dart';
   
   void main() {
     runApp(MyApp());
   }
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return GetMaterialApp(
         title: 'Flutter GetX Form Validation',
         theme: ThemeData(primarySwatch: Colors.blue),
         home: FormPage(),
       );
     }
   }
   

Com essa abordagem, o valor selecionado no DropdownButton é gerenciado pelo GetX, e você pode validar e manter a opção selecionada facilmente, sem precisar usar setState. O Obx é usado para atualizar a interface automaticamente quando o valor do dropdown é alterado.