Gerenciamento de Estado no Flutter, aprenda de uma vez!

#flutter #braziliandevs #beginners #programming

No desenvolvimento de aplicativos móveis com o Flutter, uma das decisões mais importantes que os desenvolvedores enfrentam é como gerenciar o estado da aplicação. O estado é fundamental para manter informações, responder a interações do usuário e atualizar a interface do usuário. No Flutter, existem dois principais paradigmas de gerenciamento de estado: Stateless e Stateful.

Stateless Widgets

Os Stateless Widgets são componentes no Flutter que não possuem estado interno mutável. Isso significa que, uma vez que você os construiu com um conjunto específico de propriedades, eles permanecem imutáveis durante o ciclo de vida do widget. Os Stateless Widgets são ideais para partes da interface do usuário que não precisam mudar com o tempo ou não dependem do estado.

import 'package:flutter/material.dart';

class MyApp extends StatelessWidget {
  final String title;

  MyApp(this.title);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Center(
          child: Text("Olá, mundo!"),
        ),
      );
  }
}

Neste exemplo, o widget MyApp é stateless porque ele não mantém nenhum estado interno. Ele simplesmente constrói uma interface do usuário com base nas propriedades fornecidas (no caso, o title) e não muda ao longo do tempo.

Stateful Widgets

Os Stateful Widgets são usados quando você precisa que parte da interface do usuário seja atualizada de acordo com as mudanças no estado do aplicativo. Eles possuem um estado interno mutável que pode ser modificado ao longo do tempo. Quando o estado muda, o Flutter recria o widget para refletir essas alterações.


import 'package:flutter/material.dart';

class CounterApp extends StatefulWidget {
  @override
  State<CounterApp> createState() => _CounterAppState();
}

class _CounterAppState extends State<CounterApp> {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Exemplo Stateful'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              const Text(
                'Contador:',
              ),
              Text(
                '$_counter',
                style: Theme.of(context).textTheme.titleLarge,
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _incrementCounter,
          tooltip: 'Incrementar',
          child: const Icon(Icons.add),
        ),
    );
  }
}

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

Neste exemplo, o widget CounterApp é stateful porque mantém o estado interno _counter que pode ser modificado pelo método _incrementCounter. O método setState é usado para notificar o Flutter de que o estado foi alterado, e a interface do usuário é reconstruída de acordo.

Muito obrigador por ler 😁, espero ter ajudado!

Top comments (19)

Retiago Drago • Sep 9 '23

Parabéns pelo artigo, Nathan! Você explicou muito bem a diferença entre os widgets stateless e stateful no Flutter. Eu gostei muito do exemplo do contador, ficou bem claro como o estado é atualizado e a interface do usuário é reconstruída. Você tem alguma dica de como escolher o melhor widget para cada situação?

Nathan Ferreira • Sep 9 '23

Muito obrigado Retiago! Eu sou iniciante em Flutter então não tive uma oportunidade para quebrar a cabeça pensando no melhor widget para uma situação, mas acredito que a melhor forma de encontrar o widget que está necessitando é utilizando a documentação do flutter! Na própria documentação existe o visual do widget, podendo ajudar na escolha :D

Retiago Drago • Sep 10 '23

Essa é uma ótima abordagem, Nathan! Usar a documentação é realmente uma boa maneira de entender melhor os widgets. Conforme você ganha mais experiência com o Flutter, você vai começar a ter uma noção de quais widgets funcionam melhor em diferentes situações. Continue com o bom trabalho!