showDialog 之前的颤振加载指示器答案

【问题标题】：Flutter loading indicator before showDialogshowDialog 之前的颤振加载指示器
【发布时间】：2021-10-14 21:42:11
【问题描述】：

我有一个按钮，它运行 showDialog。是否可以在此对话框打开之前制作一些加载指示器？

我有网络应用程序。当我按下“详细信息”按钮时，它会从后端获取数据，然后处理它们，然后在 showDialog 中显示这些数据。在处理它们时，我想制作一些加载指示器，因为对话框会一直等到所有数据都收集完毕。

【问题讨论】：

标签： flutter flutter-layout flutter-dependencies flutter-web flutter-animation

【解决方案1】：

如果您正在调用后端，我想您正在执行异步操作，这意味着您应该能够使用then()：

代码示例

class MyDetailsButton extends StatefulWidget {
  @override
  State<MyDetailsButton> createState() => _MyDetailsButtonState();
}

class _MyDetailsButtonState extends State<MyDetailsButton> {
  bool _isLoading = false;

  void _showDialog() {
    setState(() => _isLoading = false);
    showDialog(
      context: context,
      builder: (_) => const AlertDialog(
        title: Text('Alert'),
      ),
    );
  }
  
  Future<void> _fetchBackEndData() async {
    // Any call to your asynchronous operation
    await Future.delayed(const Duration(seconds: 2));
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      style: ElevatedButton.styleFrom(
        primary: Colors.orange,
      ),
      onPressed: () {
        setState(() => _isLoading = true);
        
        // Call to your backend
        _fetchBackEndData().then((_) => _showDialog());
      },
      child: _isLoading
          ? const CircularProgressIndicator()
          : const Text('Details'),
    );
  }
}

在此代码示例中，我正在更改按钮的状态，使其显示加载指示器，然后对我的方法 _fetchBackEndData() 进行异步调用，通过使用 then() 回调，我可以在异步方法之后显示一个对话框完成了。

Try the full code on DartPad

【讨论】：