1

BOM DIA!! Estou fazendo um app e neste em uma unica tela existe uma lista com opções ( o widget de opção no caso é listoption ) e uma outra area que mostra qual o listoption foi selecionado.

basicamente estou querendo passar o valor da variável nome de um widget para outro, mas sem que abra uma nova tela.

Deste quero que onPressed passe o nome da opção selecionada:

class ListOption extends StatefulWidget {
  const ListOption({super.key, required this.nome});

  final String nome;

 

  @override
  State<ListOption> createState() => _ListOptionState();
}

class _ListOptionState extends State<ListOption> {


  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Container(
        width: 70,
        height: 70,
        color: Colors.grey,
        child: TextButton(
          onPressed: () {
           
          },
          child: Text(widget.nome),
        ),
      ),
    );
  }
}

Para este, quero exibir onde atualmente está como widget.nome selecionado:

import 'package:flutter/material.dart';

class MyInfo extends StatefulWidget {
  MyInfo({super.key, this.nomeselecionado});
  
  String? nomeselecionado;
  

  @override
  State<MyInfo> createState() => _MyInfoState();
}

class _MyInfoState extends State<MyInfo> {
    bool isSwitched = false;
    String? selectedOption  ;

  @override
  Widget build(BuildContext context) {
    return //TESTE DE BOTAO TBM
        Padding(
      padding: const EdgeInsets.all(10),
      child: Container(
        height: MediaQuery.of(context).size.height * 0.7 * 0.25,
        width: MediaQuery.of(context).size.width,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(20),
          color: Colors.white,
        ),
        child: Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Container(
                  height: 20,
                  width: 300,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(20),
                    color: Color.fromARGB(153, 180, 177, 177),
                  ),
                  child: Text(
                    "CONFIGURAÇÂO ATUAL",
                    textAlign: TextAlign.center,
                  ),
                )
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Column(
                  children: [
                    Padding(
                      padding: const EdgeInsets.all(10),
                      child: Container(
                        //esse container que vai aparecer o nome
                        width: 70,
                        height: 60,
                        color: Colors.grey,
                         child: Center(
                          child: Text(widget.nomeselecionado ?? ""),
                        ),
                      ),
                    )
                  ],
                ),
                Column(
                  children: [
                    Switch(
                      value: isSwitched,
                      onChanged: (value) {
                        setState(() {
                          isSwitched = value;
                          print(isSwitched);
                        });
                      },
                      activeTrackColor: Colors.lightGreenAccent,
                      activeColor: Colors.green,
                    ),
                  ],
                )
              ],
            ),
          ],
        ),
      ),
    );
  }
}

mas todos exemplos que vi usam o navigator e abre outra tela e nao quero isso.

pois esses dois widgets ficam em uma mesma tela.

1 Resposta 1

2

Para resolver isso existem algumas formas diferentes. A mais simples é:

Dentro do widget ListOption crie um argumento de callback. Esse argumento deve ser uma função que vai ser chamada no onPressed:

class ListOption extends StatefulWidget {
  const ListOption({super.key, required this.nome, required this.callback});
  final String nome;
  final Function callback; // Nova variável criada.
  @override
  State<ListOption> createState() => _ListOptionState();
}

Usando essa variável, chame ela diretamente no parâmetro onPressed:

child: TextButton(
          onPressed: (){
            widget.callback("Valor a ser passado"); // Chamada do callback.
          },
          child: Text(widget.nome),
        ),

Ao criar esse widget, você agora deve passar também o novo parâmetro que você criou. É uma função e portanto a estrutura é parecida com o que você fez no onPressed. Isto é, na tela que engloba os dois widgets, você vai usar algo do tipo:

ListOption(nome: "", callback: (String valorRecebido){
    setState((){
        stringASerMostradaNoSegundoWidget = valorRecebido;
    });
})

Vale deixar claro que nesta tela que engloba os dois widgets você vai precisar de uma nova variável para armazenar essa informação:

String stringASerMostradaNoSegundoWidget = '';

Para este callback, use o setState para atualizar o estado dos widgets nessa tela.

Feito isso, é necessário que o widget que use esta informação, MyInfo receba essa mesma variável que o callback acabou de atribuir. Ao chamá-lo, você deve usar algo da forma:

[...]
MyInfo(nomeselecionado: stringASerMostradaNoSegundoWidget);
[...]

E com essas alterações você já deve ter o resultado desejado.


O nome disso é gerenciamento de estado e é um tópico bem extenso e para horas de discussão. Estado é o nome que se dá a essas variáveis que você usa para construir sua tela, como usamos ali.

No seu caso, era uma tela simples que só precisava passar um texto de um widget para o outro. Porém conforme o aplicativo cresce, esse tipo de abordagem acaba não sendo tão simples. Fazer isso em uma escala grande é impraticável.

Podem ter múltiplos widgets que precisam de múltiplas variáveis de estado com ações que alterem o estado de outros widgets na árvore. Nesses casos, é recomendado utilizar um gerenciamento de estados mais elaborado, e diversas alternativas podem ser encontradas na documentação oficial da Google (em inglês). Nessa mesma página tem também um link para uma introdução ao assunto, com um exemplo que pode ser interessante olhar depois.

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 .