teste

Neste artigo vamos falar sobre usar o parâmetro key em widgets. Se não sabe o que é um widget, recomendo ver este artigo que introduzimos blocos de construção da Flutter.

Keys preservam state quando widgets se movem na sua árvore de widget.

Eles podem ser usados para preservar scrollLocation do usuário, ou manter state quando modificar uma coleção.

Neste artigo, vamos abordar essas três coisas:

Quando precisa de keys;

Onde colocá-las na árvore de widget;

Qual key é adequada para você.

Quando precisa usar keys?

Não é sempre que se usa, mas se adicionar, remover ou reordenar coleções de widgets do mesmo tipo que suportam algum state, é hora da key.

Um exemplo é um app de lista de tarefas: Usando o app, você quer reorganizar os itens com base na sua lista de tarefas por prioridade, e depois removê-los quando terminar.

Para ilustrar a necessidade de keys, escrevi um app bem simples com widgets de duas cores aleatórias que trocam de lugar quando tocar em um botão.

O código do app é esse:

import 'package:flutter/material.dart'; import 'dart:math'; void main() = runApp(new MaterialApp(home: PositionedTiles())); class PositionedTiles extends StatefulWidget { @override State‹StatefulWidget› createState() = PositionedTilesState(); } class PositionedTilesState extends State‹PositionedTiles› { List‹Widget› tiles; @override void initState(){ super.initState(); tiles = [ StatelessColorfulTile(), StatelessColorfulTile(), ]; } @override Widget build(BuildContext context){ return Scaffold( body: SafeArea( child: Row( children: tiles)), floatingActionButton: FloatingActionButton( child: Icon(Icons.sentiment_very_satisfied), onPressed: swapTiles), ); } swapTiles() { setState(() { tiles.insert(1, tiles.removeAt(0)); }); } }

Contém um stateful widget chamado PositionTiles, que constrói dois statelessTile e os coloca em uma linha.

Quando toco no botão Floating Action no final, ele troca de posição na lista, como esperado.

Mas o que acontece se trocarmos os tiles coloridos por stateful ao invés de stateless armazená-los no state?

import 'package:flutter/material.dart'; import 'dart:math'; void main() = runApp(new MaterialApp(home: PositionedTiles())); class PositionedTiles extends StatefulWidget { @override State‹StatefulWidget› createState() = PositionedTilesState(); } class PositionedTilesState extends State‹PositionedTiles› { List‹Widget› tiles; @override void initState(){ super.initState(); tiles = [ StatefulColorfulTile(), StatefulColorfulTile(), ]; } @override Widget build(BuildContext context){ return Scaffold( body: SafeArea( child: Row( children: tiles)), floatingActionButton: FloatingActionButton( child: Icon(Icons.sentiment_very_satisfied), onPressed: swapTiles), ); } swapTiles() { setState(() { tiles.insert(1, tiles.removeAt(0)); }); } }

Agora, quando aperto o botão, parece que nada mudou.

Mas se adiciono uma key a cada tile widget, os widgets trocam de lugar, como esperado.

... StatefulColorfulTile(key: UniqueKey()), StatefulColorfulTile(key: UniqueKey()), ...

Mas lembre que se a árvore inteira de widget na sua coleção é stateless, keys não são necessárias.

Tecnicamente, só precisa saber disso para usar keys em seus apps para situações simples.

Agora que todos saíram, veremos como keys funcionam por trás quando o Flutter renderizam os widgets.