showDialog 之前的 Flutter 加载指示器

Question

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

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

Answer 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

showDialog 之前的 Flutter 加载指示器

Flutter loading indicator before showDialog

flutter

flutter-dependencies

flutter-layout

flutter-animation

flutter-web

代码示例