Flutter：添加网址后如何显示加载屏幕？

如何解决Flutter：添加网址后如何显示加载屏幕？

我正在构建URL缩短应用程序。输入网址后，我想显示一个加载屏幕。这是我的代码。我是个初学者。请帮助我，因为这是我的第一个应用程序。代码如下。如您所见，我正在使用FutureBuilder，因此，如果url列表为空，则会显示一条相应的消息，但是我希望它在按alertdialog的ok按钮后消失。

class _homePageState extends State<homePage> {
  List userURL = List();
  List item = List();

  Future<List> getdata() async {
    //JSON Parser
    var url = 'https://api.shrtco.de/v2/shorten?url=${userURL.last}';
    var respons = await http.get(url);
    var result = jsonDecode(respons.body);
    item.add(result['result']['short_link']); //dictionary parse

    print(item);
    return item;
  }

  createAlertDialog(BuildContext context) {
    //method for alertdialog
    //promise to return string
    TextEditingController customController =
        TextEditingController(); //new texteditingc object
    return showDialog(
        context: context,builder: (context) {
          return AlertDialog(
            title: Text("Enter URL: "),content: TextField(
              controller: customController,),actions: [
              MaterialButton(
                elevation: 5.0,child: Text("OK"),onPressed: () {
                  if (customController.text != null &&
                      customController.text != "") {
                    userURL.add(customController.text);
                  }

                  setState(() {});
                  Navigator.of(context).pop();
                },)
            ],);
        });
  }

  @override
  Widget build(BuildContext context) {
    String temp;
    return Scaffold(
      appBar: AppBar(
        title: Text("Shortie"),body: Padding(
          padding: const EdgeInsets.all(8.0),child: FutureBuilder(
            future: getdata(),builder: (BuildContext context,AsyncSnapshot snapshot) {
              if (snapshot.data == null) {
                return Center(
                    child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,children: [
                      Icon(
                        Icons.sentiment_very_dissatisfied,color: Colors.grey,size: 80,Text(
                        "No short links to display",style: TextStyle(
                          color: Colors.grey[700],fontSize: 15,//fontWeight: FontWeight.bold
                        ),]));
              } else {
                return ListView.builder(
                  itemCount: snapshot.data.length,itemBuilder: (context,index) {
                    return ListTile(
                      leading: Icon(Icons.link),title: Text(snapshot.data[index]),subtitle: Text(userURL[index]),onTap: () {
                        Share.share(
                            'Check out the short link I just shared with the application Shortie: ${snapshot.data[index]}',subject: 'Shortie short link');
                        print(snapshot.data[index]);
                      },);
                  },);
              }
            },)),floatingActionButton: FloatingActionButton(
        onPressed: () {
          createAlertDialog(context).then((onValue) {
            temp = onValue;
            print(temp);
          });

解决方法

您可以按如下方式使用FutureBuilder的connection state class：

FutureBuilder(
      future: getdata(),builder: (BuildContext context,AsyncSnapshot snapshot) {
              if (snapshot.connectionState == ConnectionState.waiting) {
                 return CircularProgressIndicator(backgroundColor: Colors.blue);
              } else {
                 return Container();
              }
       },);

此外，您还需要在按钮上调用setState()来触发视图重新加载，这将再次检查connectionState，如果async函数仍在进行中，您将看到加载指示符，否则您将其他内容放进去