Entrar Ainda não tem acesso?
1
resposta

Como "conversar" entre os widgets

por Caio Falleiro dos Santos
| 46.5k xp | 1 posts

Preciso que ao clicar num FloatingActionButton, seja criada uma nova linha (estabelecimento) dentro de uma ListView, porém não faço ideia de como fazer a comunicação entre os dois... Meu Widget a ListView está assim:

lass ListViewBuilder extends StatefulWidget {
  const ListViewBuilder({Key? key}) : super(key: key);

  @override
  State<ListViewBuilder> createState() => _ListViewBuilderState();
}

class _ListViewBuilderState extends State<ListViewBuilder> {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        padding: const EdgeInsets.all(8),
        itemCount: 6,
        itemBuilder: (BuildContext, int index) {
          return Linha();
        });
  }
}

No caso, eu possuo outro widget chamado "Linha" mas não vem ao caso...

Já meu Widget do FloatingActionButton está assim:

class MeuFloatingActionButton extends StatefulWidget {
  MeuFloatingActionButton({Key? key}) : super(key: key);

  @override
  State<MeuFloatingActionButton> createState() =>
      _MeuFloatingActionButtonState();
}

class _MeuFloatingActionButtonState extends State<MeuFloatingActionButton> {
  int qtd = 0;

  void _incrementaQtd() {
    setState(() {
      qtd++;
    });
    print(qtd);
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Container(
          padding: EdgeInsets.only(left: 24),
          child: FloatingActionButton(
            heroTag: null,
            onPressed: () {},
            tooltip: 'Vai para a tela de localização',
            child: const Icon(Icons.map),
          ),
        ),
        FloatingActionButton(
          heroTag: null,
          onPressed: _incrementaQtd,
          tooltip: 'Vai para a tela "Cria Estabelecimento" ',
          child: const Icon(Icons.add),
        ),
      ],
    );
  }
}

Resumindo... como posso fazer com que essa função incrementaQtd altere o "itemCount" do widget de ListView?

1 resposta
por Matheus Brandino
| 4805.7k xp | 10196 posts
Alura Scuba Team

Olá Caio,

Para fazer a comunicação entre os dois widgets, você pode criar uma função no widget pai (ou no widget que contém ambos) que altere o estado do widget filho, que no caso é a ListView. Essa função pode ser passada como parâmetro para o widget filho, que a chamará quando necessário.

No seu caso, você pode criar uma função no widget pai que altere o estado do itemCount da ListView. Essa função pode ser passada como parâmetro para o widget MeuFloatingActionButton e chamada no método _incrementaQtd.

Veja um exemplo de como ficaria o código:

class MeuWidgetPai extends StatefulWidget {
  const MeuWidgetPai({Key? key}) : super(key: key);

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

class _MeuWidgetPaiState extends State<MeuWidgetPai> {
  int _qtd = 0;

  void _incrementaQtd() {
    setState(() {
      _qtd++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(
          child: ListView.builder(
            padding: const EdgeInsets.all(8),
            itemCount: _qtd,
            itemBuilder: (context, index) {
              return const Linha();
            },
          ),
        ),
        MeuFloatingActionButton(
          onPressed: _incrementaQtd,
        ),
      ],
    );
  }
}

class MeuFloatingActionButton extends StatefulWidget {
  final VoidCallback onPressed;

  const MeuFloatingActionButton({Key? key, required this.onPressed})
      : super(key: key);

  @override
  State<MeuFloatingActionButton> createState() =>
      _MeuFloatingActionButtonState();
}

class _MeuFloatingActionButtonState extends State<MeuFloatingActionButton> {
  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      onPressed: widget.onPressed,
      tooltip: 'Adicionar linha',
      child: const Icon(Icons.add),
    );
  }
}

Nesse exemplo, a função _incrementaQtd é definida no widget pai MeuWidgetPai e passada como parâmetro para o widget filho MeuFloatingActionButton. Quando o botão do FloatingActionButton é pressionado, a função é chamada e altera o estado do widget pai, que por sua vez atualiza a ListView.

Espero ter ajudado e bons estudos!