PageStorage: Um Guia Simples para Salvar e Restaurar o Estado da Página no Flutter

O que é o Widget PageStorage?

PageStorage é um widget que permite salvar e restaurar o estado de uma árvore de widgets específica dentro de um PageStorageBucket. Um PageStorageBucket é simplesmente um contêiner que mantém objetos PageStorage. Cada objeto PageStorage pode armazenar o estado de uma árvore de widgets e disponibilizá-lo através de diferentes páginas ou rotas.

Por que Usar o Widget PageStorage?

O widget PageStorage é particularmente útil ao construir aplicações com um grande número de páginas que podem alterar seu estado dinamicamente. Por exemplo, se você tiver uma interface com abas que exibem diferentes dados, pode usar o widget PageStorage para armazenar e restaurar o estado de cada página conforme o usuário navega entre elas. Isso garante que a experiência do usuário seja fluida e a UI permaneça consistente, mesmo se a aplicação for fechada ou reiniciada.

Como Usar o Widget PageStorage?

Usar o widget PageStorage é direto. Simplesmente envolva a árvore de widgets da qual deseja salvar o estado com um widget PageStorage e especifique o PageStorageBucket para armazenar o estado.

PageStorage pode ser usado em vários cenários onde você deseja preservar o estado de uma árvore de widgets entre transições:

1. Interfaces com Abas

Se você tiver uma interface com abas com múltiplas páginas que exibem diferentes dados, pode usar o widget PageStorage para armazenar e restaurar o estado de cada página conforme o usuário navega entre elas.

Exemplo:

class MyTabs extends StatefulWidget {
  const MyTabs({super.key});

  @override
  State<MyTabs> createState() => _MyTabsState();
}

class _MyTabsState extends State<MyTabs> with SingleTickerProviderStateMixin {
  late TabController _controller;

  @override
  void initState() {
    super.initState();
    _controller = TabController(vsync: this, length: 2);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageStorage(
        bucket: PageStorageBucket(),
        child: TabBarView(
          controller: _controller,
          children: [
            PageStorage(
              child: MyPage1(),
              bucket: PageStorageBucket(),
            ),
            PageStorage(
              child: MyPage2(),
              bucket: PageStorageBucket(),
            ),
          ],
        ),
      ),
      bottomNavigationBar: TabBar(
        controller: _controller,
        tabs: const [
          Tab(text: 'Página 1'),
          Tab(text: 'Página 2'),
        ],
      ),
    );
  }
}

Neste exemplo, estamos usando o widget PageStorage para armazenar o estado de duas páginas (MyPage1 e MyPage2) dentro de um TabBarView. O estado de cada página é armazenado em um objeto PageStorage separado e disponibilizado através de diferentes abas usando um PageStorageBucket.

2. Entrada de Formulário

Se você tiver um formulário com múltiplos campos, pode usar o widget PageStorage para armazenar e restaurar o estado de cada campo conforme o usuário insere dados.

Exemplo:

class MyForm extends StatefulWidget {
  const MyForm({super.key});

  @override
  State<MyForm> createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Form(
        key: _formKey,
        child: PageStorage(
          bucket: PageStorageBucket(),
          child: Column(
            children: [
              TextFormField(
                decoration: const InputDecoration(labelText: 'Nome'),
              ),
              TextFormField(
                decoration: const InputDecoration(labelText: 'Email'),
              ),
              TextFormField(
                decoration: const InputDecoration(labelText: 'Senha'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Neste exemplo, estamos usando o widget PageStorage para armazenar o estado de um widget Form contendo três TextFormFields. O estado de cada campo é armazenado em um único objeto PageStorage e disponibilizado através de diferentes páginas ou rotas.

PageStorageKey

O PageStorageKey é usado para identificar unicamente um widget dentro do PageStorage. O propósito de um PageStorageKey é fornecer um identificador estável para o widget, para que seu estado possa ser armazenado e recuperado em um objeto PageStorage.

Por exemplo, considere um cenário onde você tem múltiplas instâncias do mesmo formulário em diferentes páginas. Sem um PageStorageKey, o estado de cada formulário seria armazenado no mesmo objeto PageStorage e sobrescreveria um ao outro. No entanto, ao atribuir um PageStorageKey único a cada formulário, você pode garantir que seus estados sejam armazenados e recuperados separadamente.

Exemplo:

class MyForm extends StatefulWidget {
  final int index;
  const MyForm({Key? key, required this.index}) : super(key: key);

  @override
  State<MyForm> createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Form(
        key: _formKey,
        child: PageStorage(
          bucket: PageStorageBucket(),
          key: PageStorageKey(widget.index),
          child: Column(
            children: [
              TextFormField(
                decoration: const InputDecoration(labelText: 'Nome'),
              ),
              TextFormField(
                decoration: const InputDecoration(labelText: 'Email'),
              ),
              TextFormField(
                decoration: const InputDecoration(labelText: 'Senha'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Neste exemplo, estamos usando o PageStorageKey para identificar um formulário com um número de índice único. Isso nos permite armazenar o estado de cada instância do formulário separadamente no PageStorage.

Conclusão

O widget PageStorage é uma ferramenta poderosa para preservar o estado de uma árvore de widgets entre transições no Flutter. Este widget é particularmente útil em cenários onde você deseja preservar o estado da sua UI através de diferentes páginas ou rotas, como ao navegar entre abas ou alternar entre diferentes partes da sua aplicação.

O PageStorage usa um armazenamento chave-valor para persistir o estado dos seus widgets, e o PageStorageKey para fornecer um identificador estável para cada widget. Isso facilita o armazenamento e recuperação do estado da sua UI, incluindo posições de scroll, dados de formulário e outras informações importantes.

Seja construindo uma aplicação pequena ou um sistema empresarial grande, o widget PageStorage oferece uma maneira simples e eficiente de manter o estado da sua UI. Ao usar PageStorage, você pode proporcionar aos seus usuários uma experiência mais fluida e intuitiva, e construir UIs mais robustas e amigáveis ao usuário no Flutter.

---