-2

Opa, pessoal, tenho uma widget ButtonsTabBar e gostaria de crias as Tabs de acordo com registros do meu banco de dados Firebase.

Hoje tenho este cenário, por exemplo:


    DefaultTabController(
              animationDuration: Duration(milliseconds: 1000),
              length: 2, //nomesProgramas.length,
              child: Column(
                children: <Widget>[
                  ButtonsTabBar(
                    contentPadding: EdgeInsets.symmetric(horizontal: 15),
                    backgroundColor: Color.fromARGB(255, 206, 38, 38),
                    unselectedBackgroundColor: Colors.grey[300],
                    unselectedLabelStyle: TextStyle(color: Colors.black),
                    labelStyle:
                        TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
                    tabs: [
                      Tab(
                        icon: Icon(
                          Icons.access_alarm,
                        ),
                        text: "Teste 1",
                      ),
                      Tab(
                        icon: Icon(
                          Icons.bluetooth,
                        ),
                        text: "Teste 2",
                      ),
                    ],
                  ),
    
                  /****** CHAMADA DAS PÁGINAS DO VALOR ATRIBUÍDO ******/
                  Expanded(
                    child: TabBarView(
                      children: <Widget>[
                        Center(
                          child: ValorAtribuidoCia(),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),

Que me gera esta saída:

Tabs inseridas manualmente

Tenho em meu banco dois registros de exemplo: "Smiles" e "Azul". Porém, apenas o primeiro é retornado em tela.

Estou tentando jogar tudo em uma lista, e depois fazer um FOR na lista inserindo os "tabs".

Segue exemplo:


    class _ValorAtribuidoState extends State<ValorAtribuido> {
      FirebaseFirestore db = FirebaseFirestore.instance;
      late List nomesProgramas = [];
    
      Future recuperaProgramas() async {
    
        db.collection("programas").snapshots().listen((snapshot) {
          nomesProgramas.clear();
    
          for (DocumentSnapshot item in snapshot.docs) {
            nomesProgramas.add(item.get("nome"));
            //print(item.get("nome"));
          }
    
        });
      }
    
      tabsProgramas() {
        recuperaProgramas();
        for (var programa in nomesProgramas) {
          return Tab(
            icon: Icon(
              Icons.text_snippet,
            ),
            text: programa.toString(),
          );
        }
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          backgroundColor: Color.fromARGB(255, 226, 226, 226),
    
          /****** BODY COM MENUS SUPERIORES ******/
          body: SafeArea(
            child: DefaultTabController(
              animationDuration: Duration(milliseconds: 1000),
              length: nomesProgramas.length,
              child: Column(
                children: <Widget>[
                  ButtonsTabBar(
                    contentPadding: EdgeInsets.symmetric(horizontal: 15),
                    backgroundColor: Color.fromARGB(255, 206, 38, 38),
                    unselectedBackgroundColor: Colors.grey[300],
                    unselectedLabelStyle: TextStyle(color: Colors.black),
                    labelStyle:
                        TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
                    tabs: [
                      tabsProgramas(),
                    ],
                  ),
    
                  /****** CHAMADA DAS PÁGINAS DO VALOR ATRIBUÍDO ******/
                  Expanded(
                    child: TabBarView(
                      children: <Widget>[
                        Center(
                          child: ValorAtribuidoCia(),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
    
          floatingActionButton: FloatingActionButton.extended(
              onPressed: () {
                recuperaProgramas(); // AQUI ESTOU RECUPERANDO OS PROGRAMAS SOMENTE PARA TESTE
              },
              splashColor: Color.fromARGB(255, 255, 115, 0),
              backgroundColor: Color.fromARGB(255, 206, 38, 38),
              icon: Icon(Icons.add),
              label: Text(
                "Adicionar",
                style: TextStyle(letterSpacing: 0, fontWeight: FontWeight.bold),
              )),
        );
      }
    }

Tab inserida dinamicamente

Se eu der um print, os dois estão sendo retornados:

Print do Console

Poderiam me ajudar? Sou novo em Flutter.

1 Resposta 1

0

Uma boa maneira de ajustar isso é você utilizar o StreamBuilder que vai trabalhar com os snapshots, tirando a necessidade de usar um listener a parte.

Alguns problemas do teu código:

  • No seu código, você alimenta a variável nomesProgramas mas nunca altera o estado do Widget com o setState().
  • Você está utilizando uma chamada assíncrona, que é o listen, sem aguardar o término do mesmo ou atualizar depois a variável como citei no item acima.
class MyClassWidget extends StatelessWidget {
  const MyClassWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
      stream: db.collection("programas").snapshots(),
      builder: (context, snapshot) {
        if (!snapshot.hasData) {
          return const Text("Carregando...");
        }
        
        final data = snapshot.data;
        final List<String> tabs = [];
        for (DocumentSnapshot item in snapshot.docs) {
          tabs.add(item.get("nome"));
        }
        
        return DefaultTabController(
          initialIndex: 1,
          length: tabs.length,
          child: Scaffold(
            appBar: AppBar(
              title: const Text('TabBar Widget'),
              bottom: TabBar(
                tabs: tabs.map((item) => Tab(
                  icon: Icon(
                    Icons.text_snippet,
                  ),
                  text: item.toString(),
                )).toList(),
              ),
            ),
            body: TabBarView(
              children: tabs.map((item) => Center(
                  child: Text(item.toString()),
                )).toList(),
            ),
          ),
        );
      }
    );
  }
}

Obs.: Pode haver erros, pois montei um exemplo rápido no dartpad. (Ajuste o que for preciso)

Explicação

O StreamBuilder vai ficar ouvindo as mudanças no banco de acordo com o Snapshot, assim quando algo for retornado, será construído seu Widget.

Para criar dinâmicamente a lista de tabs, utilize o .map() para mapear os itens da sua lista, como fiz no exemplo.

Atenção: A quantidade de tabs no TabBar sempre deve ser igual a quantidade de widgets no TabBarView.

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 .