Início / coding / Perguntas / 79273341
Accepted
Alexandre B.
Asked: 2024-12-12 06:23:32 +0800 CST

Essa abordagem usando ValueNotifier e FutureBuilder está correta?

  • 772

Estou lendo um arquivo JSON para gerar o layout com base nos dados. Basicamente, ele retorna uma coluna ou uma linha. Estou usando o FutureBuilder para manipular o carregamento de dados.

Também estou usando um ValueNotifier para detectar quando o readyToInstall muda e acionar setState().

O que você acha dessa abordagem? Você a consideraria uma maneira adequada de lidar com essa situação?

Uma coisa que notei: quando clico no botão "Update", print("ok"); é chamado duas vezes. Esse é o comportamento esperado?

O código funciona bem, mas meu objetivo é aprender a maneira correta de implementá-lo.

 class InitInterface extends StatefulWidget {
  const InitInterface({super.key});

  @override
  State<InitInterface> createState() => _InitInterfaceState();
}

class _InitInterfaceState extends State<InitInterface>  {
  //used in FutureBuilder to know when we are ready to start install the layout.
  late Future<Widget> readyToInstall; 
  late Stream<Widget> readyToInstall0;

  @override
  void initState() {
    //will read json file and get data to install the layout
    readyToInstall = loadLayout();
    readyToInstall.then((value){
      print('teste');
      panelData.addListener(() { //panelData is objhect from a class that extend ValueNotifier
        readyToInstall = updateLayout();
        setState(() {});        
      });
    });   
    super.initState();
  }




  @override
  Widget build(BuildContext context) {   
    return Column(
      children: [
        FutureBuilder<Widget>(
          future: readyToInstall, 
          builder: (BuildContext context, AsyncSnapshot<Widget> snapshot) {
            if (snapshot.hasData) {
              print('ok'); //<--called two times after update
              return snapshot.data!;             
            } else if (snapshot.hasError) {
              return Text('Error: ${snapshot.error}');
            } else {
              return const Loading();
            }
          },
        ),

        ElevatedButton(
            onPressed:(){
              readyToInstall = updateLayout();
              setState(() {});              
              },
            child: Text('Update')),
      ],
    );
  }
}
flutter

1 respostas

  1. Best Answer

    Não use Widgetdentro da sua lógica de negócios

    Você deve evitar usar Widgetfora do seu código de interface do usuário. InitInterfaceStateVocê deve receber os dados diretamente e decidir o layout com base nos dados:

    class _InitInterfaceState extends State<InitInterface> {
  late Future<Data> data;
  late Stream<Data> streamOfData;
  ...

    Em seguida, defina um método que realmente decida se um Columnou Rowdeve ser usado dentro da árvore de widgets:

    Widget getLayout(Data? data) {
  if (data == null) {
  // Throw exception if the data is null
    throw Exception(...);
  }
  if (data.needsColumn) {
    return Column(...);
  } else {
    return Row(...);
  }
}

    E então você pode chamar esta função dentro do seu FutureBuilder:

    @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        FutureBuilder<Widget>(
          // Use data instead of widget here
          future: data,
          builder: (BuildContext context, AsyncSnapshot<Widget> snapshot) {
            if (snapshot.hasData) {
              return getLayout(snapshot.data);
            } else if (snapshot.hasError) {
              return Text('Error: ${snapshot.error}');
            } else {
              return const Loading();
            }
          },
        ),
        ElevatedButton(
            onPressed: () {
              readyToInstall = updateLayout();
              setState(() {});
            },
            child: Text('Update')
        ),
      ],
    );
  }

    Evite usar setStatedentroinitState

    O motivo pelo qual aqui não é um problema é que setStateestá sendo chamado dentro de um callback, o que é bom. Mas ainda assim não é uma boa prática, então você deve considerar movê-lo para, por exemplo, getLayoutfunção ou definir uma nova e chamá-la.

    Não tenho certeza do que você precisa ValueNotifierexatamente, então não posso ajudar.

    Não escreva lógica de interface do usuário dentro do buildmétodo que tenha efeitos colaterais

    Não se preocupe, você não fez isso. O motivo pelo qual é ruim é que o buildmétodo pode ser chamado várias vezes em sequência. É por isso que seu print("ok")está sendo chamado várias vezes.

    • 3

relate perguntas