3

Olá!

Achei muitos tutoriais na internet, mas não consegui implementar nenhum com sucesso. A maioria desses tutoriais, trabalham com a criação de 2 listas, uma inicial e outra secundária para serem manipuladas. Esta realmente é a melhor forma de implementação? Estou utilizando o padrão bloc. Por isso, estou tendo certa dificuldade na manipulação dos dados.

Segue código:

class FollowingPage extends StatefulWidget {
  final Player players;

  const FollowingPage({Key key, this.players}) : super(key: key);

  @override
  _FollowingPageState createState() => _FollowingPageState();
}

class _FollowingPageState extends State<FollowingPage> {
  FollowingBloc _followingBloc;
  TextEditingController editingController = TextEditingController();

  @override
  void initState() {
    _followingBloc = FollowingBloc();
    _followingBloc.dispatch(FollowingEventList(context: context));
    super.initState();
  }

  @override
  void dispose() {
    _followingBloc.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<FollowingEvent, FollowingState>(
        bloc: _followingBloc,
        builder: (context, state) {
          if (state is FollowingStateLoading) {
            return Center(child: CircularProgressIndicator());
          }

          if (state is FollowingStateError) {
            return Center(child: Text(state.message));
          }

          if (state is FollowingStateInitial) {
            return Center(child: Text("Nenhuma informação."));
          }

          if (state is FollowingStateSuccess) {
            Result _following = state.followingModel.result;

            return Scaffold(
              appBar: AppBarCustom(),
              body: Container(
                child: Column(
                  children: <Widget>[
                    Padding(
                      padding: const EdgeInsets.all(7.0),
                      child: TextField(
                        onChanged: (text) {

                        },
                        controller: editingController,
                        decoration: InputDecoration(
                            labelText: "Procurar jogadores",
                            hintText: "Informe o nome do jogador",
                            prefixIcon: Icon(Icons.search),
                            border: OutlineInputBorder(
                                borderRadius:
                                    BorderRadius.all(Radius.circular(25.0)))),
                      ),
                    ),
                    Divider(),
                    Expanded(
                      child: ListView.builder(
                        scrollDirection: Axis.vertical,
                        shrinkWrap: true,
                        itemCount: _following.players.length,
                        itemBuilder: (context, index) {
                          if (_following.players.isEmpty) {
                            return Container(
                              height: MediaQuery.of(context).size.height * 0.6,
                              child: Center(
                                child: Text(
                                    "Você ainda não segue outros jogadores"),
                              ),
                            );
                          }

                          Player _dataCurrent = _following.players[index];


                          return Card(
                            child: ListTile(
                              leading: CircleAvatar(
                                radius: 25,
                                backgroundImage: _dataCurrent.avatar != null
                                    ? NetworkImage(_dataCurrent.avatar)
                                    : AssetImage('assets/img/person.png'),
                                backgroundColor: Colors.transparent,
                              ),
                              //title: Text(_dataCurrent.name),
                              title: Text(_dataCurrent.name != null
                                  ? _dataCurrent.name
                                  : "Não informado"),
                              trailing: Icon(Icons.arrow_forward_ios),
                              onTap: () {
                                Navigator.of(context).push(MaterialPageRoute(
                                    builder: (context) => FollowingDetails(
                                        player: _dataCurrent)));
                              },
                            ),
                          );
                        },
                      ),
                    ),
                  ],
                ),
              ),
            );
          }
          return null;
        });
  }
}

Como vocês podem perceber ainda sou iniciante. Quero apenas filtrar esta lista de acordo com o que o usuário informar!

Segue uma print: tela da listview

2
  • Acho estranho que mesmo seguindo os tutoriais você não utilizou nenhum StreamBuilder que é essencial na utilização do BLoC pattern... Eu não conheço a classe que você utilizou BlocBuilder<FollowingEvent, FollowingState>, mas irei formular um resposta com a maneira que utilizo o BLoC e assim que possível estarei respondendo sua pergunta. Commented 30/09/2019 às 19:43
  • 1
    Vou esperar a sua resposta para te mostrar onde fica o StreamBuilder. Eu separo essas chamadas em uma outra classe! Mas aguardo ansiosamente sua contribuição meu amigo!
    – Guto G
    Commented 30/09/2019 às 21:42

1 Resposta 1

4

O BLoC Pattern traz para a gente, dentre diversas outras coisas, a possibilidade de redesenharmos apenas parte de nossos Widgets sem precisarmos "modificar toda a arvore".

Do jeito que você fez, colocando toda sua estrutura de Widgets dentro do BlocBuilder vai fazer com que toda a sua arvore seja redesenhada, perdendo assim o sentido de utilizar o pattern.

Você precisa então separar sua classe BLoC por Streams e vincular a ela apenas Widgets específicos fazendo uso do StreamBuilder.

Criei um exemplo baseado no que você nos mostrou, não esta 100% correto, mas a lógica da para entender e você pode adequar a sua necessidade...

Utilizei o package bloc_pattern, fazendo uso de suas bibliotecas

import 'package:bloc_pattern/bloc_pattern.dart';
import 'package:rxdart/rxdart.dart';

Vamos aos exemplos

Classe BLoC

class FollowingBloc extends BlocBase{

  @override
  void dispose() {
    playersController.close();
  }

  bool isFilter = false;

  FollowingBloc(){
    /* Pega os dados recebidos pelo "inPlayers" e joga nas variáveis*/
    playersController.stream.listen((data){
      players = data;
      if (!isFilter)
        playersFiltered = data;
    });
  }

  List<Player> players;
  List<Player> playersFiltered;

  final BehaviorSubject<List<Player>> playersController = BehaviorSubject<List<Player>>(seedValue: []);
  Stream<List<Player>> get outPlayers => playersController.stream;
  Sink<List<Player>> get inPlayers => playersController.sink;

  void findPlayerName(String name){
    List<Player> players = playersController.value.where((player) => player.name.toLowerCase().contains(name)).toList();
    isFilter=true;
    inPlayers.add(players);
    isFilter=false;
  }
}

Criamos aqui a classe que fará o controle de suas Streams. Nela criamos o controle da sua lista de jogadores playersController e a propriedade inPlayers e outPlayers que serão a entra e saída dos dados, respectivamente.
Criamos também o método findPlayers() que será responsável por filtrar os dados na sua lista de jogadores e retornar para a Stream os novos dados.

Classe FallowingPage

class FollowingPage extends StatelessWidget {
  FollowingBloc _followingBloc = FollowingBloc();
  TextEditingController editingController = TextEditingController();

  FollowingPage({this.players});
  final List<Player> players;
  Player filteredPlayers;

  @override
  Widget build(BuildContext context) {
    if (!players.isEmpty)
      _followingBloc.inPlayers.add(players);

    return Scaffold(
      body: Container(
        child: Column(
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(7.0),
              child: TextField(
                controller: editingController,
                decoration: InputDecoration(
                    labelText: "Procurar jogadores",
                    hintText: "Informe o nome do jogador",
                    prefixIcon: Icon(Icons.search),
                    border: OutlineInputBorder(
                        borderRadius:
                            BorderRadius.all(Radius.circular(25.0)))),
                onChanged: (text) {
                  _followingBloc.findPlayerName(text);
                },
              ),
            ),
            Divider(),
            Expanded(
              child: StreamBuilder(
                stream: _followingBloc.outPlayers,
                builder: (context, snapshot) {
                  if(!snapshot.hasData)
                    return Center(child: CircularProgressIndicator());
                  else {
                    return ListView.builder(
                      scrollDirection: Axis.vertical,
                      shrinkWrap: true,
                      itemCount: snapshot.data?.length,
                      itemBuilder: (context, index) {
                        if (snapshot.data.isEmpty) {
                          return Container(
                            height: MediaQuery.of(context).size.height * 0.6,
                            child: Center(
                              child: Text(
                                  "Você ainda não segue outros jogadores"),
                            ),
                          );
                        }

                        Player _dataCurrent = snapshot.data[index];

                        return Card(
                          child: ListTile(
                            leading: CircleAvatar(
                              radius: 25,
                              backgroundImage: _dataCurrent.avatar != null
                                  ? NetworkImage(_dataCurrent.avatar)
                                  : AssetImage('assets/img/person.png'),
                              backgroundColor: Colors.transparent,
                            ),
                            title: Text(_dataCurrent.name != null
                                ? _dataCurrent.name
                                : "Não informado"),
                            trailing: Icon(Icons.arrow_forward_ios),
                            onTap: () {
                              /*Navigator.of(context).push(MaterialPageRoute(
                                  builder: (context) => FollowingDetails(
                                      player: _dataCurrent)));*/
                            },
                          ),
                        );
                      },
                    );
                  }
                }
              )
            ),
          ],
        ),
      ),
    );
  }

Modifiquei a sua hierarquia de Widgets como comentei no começo da resposta e como você pode ver, apenas a lista de jogadores agora está dentro de um StreamBuilder, pois somente ela terá que ser redesenhada conforme o filtro for aplicado.
Repare que também modifiquei sua classe de StatefulWidget para Stateless pois como ela será trabalhada com Streams do BLoC, não existe a necessidade, por exemplo, de utilizar o setState().

Entendendo tudo o que foi feito

  1. Transformei sua classe em um statellesWidget, fazendo assim que sua arvore de Widgets seja desenhada apenas uma vez, pois da forma que estava sua lista e seu TextField seriam sempre redesenhados, gastando processamento atoa.
  2. Criamos sua classe BLoC para fazer o controle dos dados. Já aplicando o filtro a sua lista. Perceba que utilizei para controle duas listas, sendo a players e a playersFiltered, pois precisamos manter os dados sem filtro em algum lugar para não necessitar ficar fazendo requisição a API a todo momento.
  3. Apliquei o método findPlayers() no onChange do teu TextFied, assim sempre que digitar alguma coisa nele, a sua lista será filtrada, os novos dados serão enviados para a sua stream playersController onde a mesma irá processar as informações e executar a sua saída outPlayers, que por sua vez irá redesenhar sua lista de jogadores.

Segue abaixo o exemplo completo, lembrando que fiz de uma forma simples baseada em outras classes que utilizo e não realizei testes na mesma.

import 'package:flutter/material.dart';
import 'package:bloc_pattern/bloc_pattern.dart';
import 'package:rxdart/rxdart.dart';

class Player{
  String name;
  String avatar;
}

class FollowingBloc extends BlocBase{

  @override
  void dispose() {
    playersController.close();
  }

  bool isFilter = false;

  FollowingBloc(){

    playersController.stream.listen((data){
      players = data;
      if (!isFilter)
        playersFiltered = data;
    });
  }

  List<Player> players;
  List<Player> playersFiltered;

  final BehaviorSubject<List<Player>> playersController = BehaviorSubject<List<Player>>(seedValue: []);
  Stream<List<Player>> get outPlayers => playersController.stream;
  Sink<List<Player>> get inPlayers => playersController.sink;

  void findPlayerName(String name){
    List<Player> players = playersController.value.where((player) => player.name.toLowerCase().contains(name)).toList();
    isFilter=true;
    inPlayers.add(players);
    isFilter=false;
  }
}

class FollowingPage extends StatelessWidget {
  FollowingBloc _followingBloc = FollowingBloc();
  TextEditingController editingController = TextEditingController();

  FollowingPage({this.players});
  final List<Player> players;
  Player filteredPlayers;

  @override
  Widget build(BuildContext context) {
    if (!players.isEmpty)
      _followingBloc.inPlayers.add(players);

    return Scaffold(
      body: Container(
        child: Column(
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(7.0),
              child: TextField(
                controller: editingController,
                decoration: InputDecoration(
                    labelText: "Procurar jogadores",
                    hintText: "Informe o nome do jogador",
                    prefixIcon: Icon(Icons.search),
                    border: OutlineInputBorder(
                        borderRadius:
                            BorderRadius.all(Radius.circular(25.0)))),
                onChanged: (text) {
                  _followingBloc.findPlayerName(text);
                },
              ),
            ),
            Divider(),
            Expanded(
              child: StreamBuilder(
                stream: _followingBloc.outPlayers,
                builder: (context, snapshot) {
                  if(!snapshot.hasData)
                    return Center(child: CircularProgressIndicator());
                  else {
                    return ListView.builder(
                      scrollDirection: Axis.vertical,
                      shrinkWrap: true,
                      itemCount: snapshot.data?.length,
                      itemBuilder: (context, index) {
                        if (snapshot.data.isEmpty) {
                          return Container(
                            height: MediaQuery.of(context).size.height * 0.6,
                            child: Center(
                              child: Text(
                                  "Você ainda não segue outros jogadores"),
                            ),
                          );
                        }

                        Player _dataCurrent = snapshot.data[index];

                        return Card(
                          child: ListTile(
                            leading: CircleAvatar(
                              radius: 25,
                              backgroundImage: _dataCurrent.avatar != null
                                  ? NetworkImage(_dataCurrent.avatar)
                                  : AssetImage('assets/img/person.png'),
                              backgroundColor: Colors.transparent,
                            ),
                            title: Text(_dataCurrent.name != null
                                ? _dataCurrent.name
                                : "Não informado"),
                            trailing: Icon(Icons.arrow_forward_ios),
                            onTap: () {
                              /*Navigator.of(context).push(MaterialPageRoute(
                                  builder: (context) => FollowingDetails(
                                      player: _dataCurrent)));*/
                            },
                          ),
                        );
                      },
                    );
                  }
                }
              )
            ),
          ],
        ),
      ),
    );
  }
}
2
  • 1
    Cara, simplesmente sensacional. Você foi totalmente didático. Além de resolver o meu problema, você deu explicação sobre outras tarefas que eu vinha executando de forma errônea. Não sei nem como te agradecer, muito obrigado pelo seu tempo!
    – Guto G
    Commented 1/10/2019 às 17:15
  • Que bom que lhe foi útil! Só de marcar a resposta como ACEITA já ajudaria muito, tanto o site quanto eu, é claro, caso julgue que sua dúvida esteja sanada. Commented 1/10/2019 às 17:40

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .