showDialog 之前的颤振加载指示器

Posted 2023-02-23

【中文标题】showDialog 之前的颤振加载指示器

【英文标题】：Flutter loading indicator before showDialog

【发布时间】：2021-10-14 21:42:11

【问题描述】：

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

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

【参考方案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