4. Flutter: Gerenciador de Estado: Provider

Provider é o gerenciador de estado indicado pelo próprio google e é um excelente provedor de estados

4. Flutter: Gerenciador de Estado: Provider

Iremos utilizar um dos pacote indicado pelo Google que é o provider para trabalhar com o ChangeNotifier.

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(
    MaterialApp(
      home: ChangeNotifierPage(),
    ),
  );
}

Primeiramente iremos criar uma classe que ira gerenciar nosso Estado:

class ChangeNotifierState extends ChangeNotifier {
  String nome = "Flutter";

  void alterarNome() {
    nome += "Brasil";
    // Notifica as mudanças
    notifyListeners();
  }
}

Criando a nossa página onde terá o conteúdo com os dados que queremos alterar:

class ChangeNotifierContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    var state = Provider.of(
      context,
      listen: false,
    );

    return Column(
      children: [
        Consumer(
          builder: (_, changeNotifierState, __) {
            return Text(changeNotifierState.nome);
          },
        ),
        RaisedButton(
          onPressed: () {
            state.alterarNome();
          },
          child: Text("Alterar Nome"),
        )
      ],
    );
  }
}

Aqui nós instanciamos o nosso provider, var state = Provider.of(context, listen: false); porém colocamos o listen: false para que ele não fique escutando as alterações e impedindo de ficar refazendo a tela a cada momento que há alguma alteração.

Ao colocarmos o nosso texto que sofrerá alteração dentro de um Consumer() nós estamos deixando ele observável, esperando as alterações. Portanto, se houver alteração no estado, somente reconstruirá esse consumer e não a tela toda.

class ChangeNotifierPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ChangeNotifier"),
      ),
      // ChangeNotifierProvider que irá
      // prover o meu Estado
      body: ChangeNotifierProvider(
        create: (context) => ChangeNotifierState(),
        child: ChangeNotifierContent(),
      ),
    );
  }
}

Veja que devemos colocar o nosso conteúdo que será alterado dentro do ChangeNotifierProvider() que irá prover o nosso gerenciador de estado ChangeNotifierState() dentro ChangeNotifierContent().

Pronto, está feito o uso do provider, veja que também é um excelente gerenciador de estados.