Usar Globalkey en Flutter con ejemplo y explicación

Tiempo de lectura: 2 minutos

En Flutter, un GlobalKey es un tipo especial de clave (key) que se puede usar para identificar y acceder de manera única a un widget dentro del árbol de widgets. A diferencia de las claves locales (LocalKey), que solo necesitan ser únicas dentro del padre inmediato, un GlobalKey debe ser único en todo el árbol de widgets.

Usos de GlobalKey

1. Acceso a un widget: Permite acceder al estado y métodos de un widget desde fuera del árbol de widgets.
2. Navegación y manejo de estado: Se usa en combinación con Navigator para controlar la navegación.
3. Validación de formularios: Permite validar formularios usando FormState.

Ejemplos de uso de GlobalKey

Acceso a un widget específico

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  final GlobalKey<_MyWidgetState> _myWidgetKey = GlobalKey<_MyWidgetState>();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('GlobalKey Example')),
        body: Column(
          children: [
            MyWidget(key: _myWidgetKey),
            ElevatedButton(
              onPressed: () {
                _myWidgetKey.currentState?.doSomething();
              },
              child: Text('Press me'),
            ),
          ],
        ),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  MyWidget({Key? key}) : super(key: key);

  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  void doSomething() {
    print('Button pressed!');
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(16.0),
      child: Text('Hello, World!'),
    );
  }
}

En este ejemplo, el botón puede llamar al método doSomething en el estado del widget MyWidget usando el GlobalKey.

Validación de un formulario

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FormExample(),
    );
  }
}

class FormExample extends StatelessWidget {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Form Validation Example')),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              TextFormField(
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter some text';
                  }
                  return null;
                },
              ),
              ElevatedButton(
                onPressed: () {
                  if (_formKey.currentState?.validate() == true) {
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(content: Text('Processing Data')),
                    );
                  }
                },
                child: Text('Submit'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

En este ejemplo, el GlobalKey permite validar el formulario cuando se presiona el botón «Submit». El formulario se valida llamando al método validate del estado del formulario usando _formKey.currentState.

El GlobalKey en Flutter es una herramienta para acceder y manipular widgets desde fuera del árbol de widgets, manejar el estado y realizar tareas como la validación de formularios. Su uso correcto puede facilitar el desarrollo de aplicaciones complejas y ayudar en la gestión de widgets y su estado.