Key | Flutter

• Key | Flutter

• Artigo explicando como o key nos ajuda

  Understanding Keys, Elements, RenderObjects and their interplay in Flutter

Resumo das Keys

1. Chave global

Definição: Uma chave global é única em todo o aplicativo. Ela pode ser usada para acessar o estado de um widget de qualquer lugar no aplicativo. Quando usar: Quando você precisa interagir com o estado de um widget de diferentes partes do aplicativo. Quando você quer validar formulários ou controlar animações de fora da árvore de widgets.

2. Chave local

Definição: Uma LocalKey é uma classe base para chaves que são únicas dentro de uma parte específica da árvore de widgets.

3. Chave de valor

Definição: Uma ValueKey usa um valor específico para identificar um widget. Isso é útil quando o valor identifica naturalmente o widget, como um ID de um banco de dados.

4. Chave exclusiva

Definição: gera um identificador exclusivo toda vez que é usado. Isso força o widget a reconstruir sempre que é movido. Quando usar: Quando você quer garantir que um widget seja completamente reconstituído e não preserve seu estado. Quando você precisa forçar o framework a tratar os widgets como diferentes, mesmo que eles sejam idênticos.

Resumo:

Chave global: Única em todo o aplicativo, útil para acessar o estado globalmente. ValueKey: Usa um valor para identificar widgets, ótimo para listas com IDs exclusivos. UniqueKey: Sempre exclusivo, força os widgets a serem reconstruídos. Analogia simples: Pense nas chaves como rótulos em caixas. Se você embaralhar as caixas, os rótulos (chaves) ajudam a lembrar qual caixa é qual, preservando seus conteúdos e estado.

GlobalObjectKey

O GlobalObjectKey é um tipo específico de chave em Flutter que garante que o widget associado a ele permaneça o mesmo, mesmo que a estrutura do widget pai mude. Isso é particularmente útil em situações onde você precisa garantir que um widget persista, com seu estado e identidade, através de reconstruções da árvore de widgets.

Propriedades do GlobalObjectKey

GlobalObjectKey

O GlobalObjectKey herda de GlobalKey e é usado para identificar de forma única widgets em uma árvore de widgets. Ele é particularmente útil para garantir que o widget associado a ele persista mesmo através de reconstruções da árvore de widgets. Aqui estão as propriedades e métodos principais de GlobalObjectKey:

Propriedades Herdadas de GlobalKey

1. currentContext:

• Tipo: BuildContext?
• Descrição: Retorna o BuildContext associado ao widget atualmente montado. Pode ser null se o widget ainda não estiver montado.

2. currentState:

• Tipo: State?
• Descrição: Retorna o estado (State) associado ao widget identificado pela chave. Isso é útil para acessar métodos ou propriedades específicas do estado do widget. Pode ser null se o widget ainda não estiver montado.

3. currentWidget:

• Tipo: Widget?
• Descrição: Retorna a instância atual do widget associada à chave. Isso pode ser útil para inspecionar as propriedades do widget diretamente. Pode ser null se o widget ainda não estiver montado.

Propriedade Específica do GlobalObjectKey

4. value:

• Tipo: Object
• Descrição: O valor associado à chave, que é usado para comparar e identificar o widget na árvore de widgets. Este valor é passado ao criar o GlobalObjectKey.

Métodos

1. operator ==:

• Descrição: Sobrescreve o operador de igualdade para comparar o valor do GlobalObjectKey com outro objeto. Garante que a comparação seja baseada no valor associado à chave.

2. hashCode:

• Descrição: Sobrescreve o método hashCode para garantir que o código de hash do GlobalObjectKey seja consistente com o valor associado à chave. Isso é importante para o uso eficiente em coleções baseadas em hash, como HashMap e HashSet.

Exemplo Detalhado

Aqui está um exemplo que demonstra como usar GlobalObjectKey e acessar suas propriedades:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final GlobalObjectKey<_MyWidgetState> myWidgetKey = GlobalObjectKey<_MyWidgetState>('myWidgetKey');

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('GlobalObjectKey Example')),
        body: MyWidget(key: myWidgetKey),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            // Access the state of the widget using the key
            myWidgetKey.currentState?.doSomething();
            // Access the context of the widget using the key
            final context = myWidgetKey.currentContext;
            if (context != null) {
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text('State method called!')),
              );
            }
          },
          child: Icon(Icons.refresh),
        ),
      ),
    );
  }
}

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 Center(child: Text('Hello World'));
  }
}

Resumo

• currentContext: Obtém o contexto de construção (BuildContext) do widget associado.
• currentState: Obtém o estado (State) do widget associado.
• currentWidget: Obtém a instância do widget associado.
• value: O valor associado ao GlobalObjectKey, usado para comparação e identificação.

Essas propriedades e métodos tornam o GlobalObjectKey uma ferramenta poderosa para gerenciar widgets e seus estados na árvore de widgets do Flutter, garantindo a persistência e a identidade única dos widgets.

Aqui está um exemplo simples de como usar GlobalObjectKey:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final GlobalObjectKey<_MyWidgetState> myWidgetKey = GlobalObjectKey<_MyWidgetState>('myWidget');

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('GlobalObjectKey Example')),
        body: MyWidget(key: myWidgetKey),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            // Access the state of the widget using the key
            myWidgetKey.currentState?.doSomething();
          },
          child: Icon(Icons.refresh),
        ),
      ),
    );
  }
}

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 Center(child: Text('Hello World'));
  }
}

Neste exemplo, o GlobalObjectKey é usado para acessar o estado interno de MyWidget a partir do botão de ação flutuante.

A propriedade key em Flutter

A propriedade key é uma forma de identificar de maneira única widgets em Flutter. Existem vários tipos de chaves, como ValueKey, ObjectKey, e GlobalKey. O uso da propriedade key ajuda o Flutter a identificar e preservar o estado de widgets quando a árvore de widgets é reconstruída.

Por que usar chaves?

Chaves são úteis em situações onde a posição de um widget na árvore pode mudar ou onde você precisa preservar o estado de um widget. Elas ajudam a evitar reconstruções desnecessárias e a preservar o estado.

Tipos de Chaves

1. ValueKey: É usada para identificar widgets pelo valor que elas armazenam. Ideal para comparar valores simples como strings ou números.

   ValueKey('someKey')

2. ObjectKey: É usada para identificar widgets pelo objeto que elas referenciam. Isso é útil quando você precisa comparar a identidade de objetos complexos.

   ObjectKey(myObject)

3. GlobalKey: É mais poderosa, permitindo que você acesse o estado de um widget a partir de qualquer lugar na árvore de widgets.

   GlobalKey<MyWidgetState> myGlobalKey = GlobalKey<MyWidgetState>();

Exemplo de Uso de ValueKey

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('ValueKey Example')),
        body: Column(
          children: [
            MyWidget(key: ValueKey('first')),
            MyWidget(key: ValueKey('second')),
          ],
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(10),
      padding: EdgeInsets.all(20),
      color: Colors.blue,
      child: Text('Hello World', style: TextStyle(color: Colors.white)),
    );
  }
}

Neste exemplo, cada instância de MyWidget é identificada exclusivamente pelo ValueKey.

Conclusão

A propriedade key e o GlobalObjectKey são ferramentas poderosas em Flutter que ajudam a gerenciar a identidade e o estado dos widgets de forma eficiente. Elas são essenciais para criar interfaces de usuário dinâmicas e responsivas, garantindo que os widgets sejam reconstruídos corretamente e que seu estado seja preservado conforme necessário.