时间戳

首页 > 解决方案 > Flutter：添加网址后如何显示加载屏幕？

android - 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);
          });

标签： androidflutterurl

解决方案

您可以使用 FutureBuilder 的连接状态类，如下所示：

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

此外，在您的按钮上，您需要调用setState()以触发视图重新加载，这反过来将再次检查连接状态，如果该async功能仍在进行中，您将看到加载指示器，否则您放入其他内容

推荐阅读