Cómo hacer un formulario de login fácil en Flutter Dart

Tiempo de lectura: < 1 minuto

Para poder crear un formulario con validaciones en flutter, primero creamos los elementos dentro de la clase.

import 'package:flutter/material.dart';

class LoginForm extends StatefulWidget {
  @override
  _LoginFormState createState() => _LoginFormState();
}

class _LoginFormState extends State<LoginForm> {
  final _formKey = GlobalKey<FormState>();
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();

  @override
  void dispose() {
    _emailController.dispose();
    _passwordController.dispose();
    super.dispose();
  }

Después creamos los elementos en el Widget

 @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        children: [
          TextFormField(
            controller: _emailController,
            keyboardType: TextInputType.emailAddress,
            validator: (value) {
              if (value == null || value.isEmpty) {
                return 'Por favor, ingresa tu correo electrónico';
              }
              return null;
            },
            decoration: InputDecoration(
              labelText: 'Correo Electrónico',
            ),
          ),
          TextFormField(
            controller: _passwordController,
            obscureText: true,
            validator: (value) {
              if (value == null || value.isEmpty) {
                return 'Por favor, ingresa tu contraseña';
              }
              return null;
            },
            decoration: InputDecoration(
              labelText: 'Contraseña',
            ),
          ),
          SizedBox(height: 16),
          ElevatedButton(
            onPressed: _submitForm,
            child: Text('Iniciar Sesión para DevCodeLight'),
          ),
        ],
      ),
    );
  }
}

Creamos una función para la acción que haya que realizar al pulsar el botón del formulario y los campos estén correctamente validados.

  void _submitForm() {
    if (_formKey.currentState!.validate()) {
      String email = _emailController.text;
      String password = _passwordController.text;
      print('Email: $email');
      print('Password: $password');
    }
  }
}

Y por último, agrega el formulario en el Widget de la vista dónde quieras usarlo

class LoginFormExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Formulario para DevCodeLight de Inicio de Sesión'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: LoginForm(),
      ),
    );
  }
}