Iniciando com Flutter: Widgets

Introdução

O que é flutter?

Flutter é um SDK para desenvolvimento de aplicativos multiplataforma e aplicações web criada pela Google.

Eu comecei estudando flutter sem nunca ter programado com componentes, então vários conceitos eram estranhos para mim, o principal foi o conceito e uso de Widgets.

Ao ler a documentação do flutter, me deparei com a seguinte definição de widget:

Widgets describe what their view should look like given their current configuration and state. When a widget’s state changes, the widget rebuilds its description, which the framework diffs against the previous description in order to determine the minimal changes needed in the underlying render tree to transition from one state to the next.

Em uma tradução livre:

Widgets são estruturas que descrevem como a sua visualização deve ser, conforme o sua configuração e estado atual. Quando o estado de um widget muda, o ele reconstrói sua descrição, a qual o framework compara com a diferença da descrição anterior, para determinar as mudanças mínimas na árvore de renderização ao transitar de um estado para outro.

O trecho traz o conceito de widget, porém não traz a informação de como ele é usado para a construção do app em flutter.

O objetivo desse artigo é trazer de forma clara o conceito de widgets, sejam eles imutáveis ou mutáveis. E passar uma visão do que é construir um aplicativo em flutter usando eles.

Árvore de Renderização

A primeira coisa para se entender é que todo item visual em um app em flutter é um widget dentro do outro:
Se eu quiser um texto centralizado eu coloco um widget Text dentro de um Center. Inclusive, seu app em si vai ser um Widget com outros dentro dele.

Quando o Widget exterior tem seu estado modificado, ele reconstrói os Widgets interiores a ele, ou seja, sua árvore de renderização.

Imutáveis

Chamados de “StatelessWidgets” é um objeto que se constrói uma vez e não tem informações de como se reconstruir. Então ele não vai afetar a sua árvore de renderização.

Um exemplo de um widget imutável ou Stateless é o Text. Ele é um widget que recebe um parâmetro string/texto e monta um objeto visual onde esse valor é transformado em uma label e exibido na tela.

Text( 'Esse é um texto imutável',);

Ele, por si só nunca muda seu texto sozinho, se ele foi construído uma vez, ele não tem capacidade de se reconstruir com um valor de texto novo.

Mutáveis

O chamado de “StatefulWidget” é um objeto que tem objeto de State. Esse objeto representa situação atual do widget, que pode ser modificada conforme o tempo ou conforme coisas acontecem no seu app. Esse estado sabe se reconstruir, afetando todos os Widgets dentro dele, ou seja, sua árvore de renderização.

Se eu tenho um aplicativo onde um botão é clicado para mudar o valor do Widget, deve ser indicado que o estado dele mudou, usando o método setState. Assim nos forçamos o objeto a se reconstruir e, também, a todos os Widgets que tem dentro dele, inclusive os imutáveis. Se você quiser saber mais em como o setState afeta o desempenho do app veja a documentação.

Você pode entender melhor com o exemplo:

class Counter extends StatefulWidget {
  @override
  _CounterState createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
            FloatingActionButton(
              onPressed: _incrementCounter,
              tooltip: 'Increment',
              child: Icon(Icons.add),
            )
          ],
        ),
      ),
      color: Colors.white,
    );
  }
}

Nos temos um StatefulWidget que tem tem uma variável int, um objeto Text e um botão. Quando eu clico no botão a eu somo 1 ao meu número, e sinalizo que o estado do meu widget foi modificado, usando o setState. Assim ele força e reconstrução do meu objeto Text dentro dele com o novo valor do meu número.

Conclusão

No final, construir um app em flutter é usar StatefulWidgets que forçam a reconstrução de StatelessWidgets.

Meus agradecimento a Filipe Pereira, um grande amigo.