时间戳

首页 > 解决方案 > 带有加载微调器和确认的颤振 showDialog

flutter - 带有加载微调器和确认的颤振 showDialog

问题描述

在颤振中，我有一个带有取消和确认按钮的 showDialog() 。确认按钮将触发对 API 的调用。我需要的是在单击后在 showDialog 窗口中显示“正在加载...”，一旦 API 调用完成以显示成功或失败。我该如何管理？或者我应该关闭窗口，等待回复并弹出一个成功或错误的新对话窗口？感谢您提供任何帮助或更好的建议。这是我到目前为止所拥有的：

void _showAlert(String textLabel, String action, String linkId) {
  showDialog(
    context: context,
    //barrierDismissible: false, // on external click
    builder: (_) => new AlertDialog(
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
      title: new Text(
        'Please confirm:',
        style: TextStyle(color: Colors.deepOrange, fontWeight: FontWeight.bold),
        textAlign: TextAlign.center,
      ),
      content: new Text(
        textLabel,
        style: new TextStyle(fontSize: 20.0),
      ),
      actions: <Widget>[
        new FlatButton(
            onPressed: () {
              Navigator.pop(context);
            },
            child: new Text('CANCEL')),
        new FlatButton(
            onPressed: () {
              _postAction(action, linkId).then((_) => setState(() {}));
              Navigator.pop(context);
            },
            child: new Text('I CONFIRM')),
      ],
    ));
}

标签： fluttershowdialog

解决方案

你可以试试这个，这只是想法..

class _SampleState extends State<Sample> {

  bool isSuccessFromApi = false;
  bool isLoading = false;

  Widget popup() {
    showDialog(context: context, builder: (builder) {
      return AlertDialog(
        content: !isSuccessFromApi ? Container(
          child: Text('Are you Sure???'),
        ) : Container( child: isLoading ? CircularProgressIndicator() : Text('Success'),),
        actions: <Widget>[
          Text('Cancel'),
          InkWell(child: Text('OK'), onTap: apiCall,)
        ],
      );
    });
  }

  void apiCall(){
    setState(() {
      isLoading = true;
    });
    //call the api
    //after success or failure
    setState(() {
      isLoading = false;
      isSuccessFromApi = true;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: popup(),
    );
  }
}

推荐阅读