【自学Flutter】36 网络操作

最新推荐文章于 2024-07-26 02:34:54 发布

原创最新推荐文章于 2024-07-26 02:34:54 发布 · 184 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Flutter #Android

自学Flutter 专栏收录该内容

64 篇文章

订阅专栏

本文介绍了一个使用Flutter和Dio库进行网络请求的示例。通过一个简单的应用，演示了如何异步获取网页内容并更新UI。文章展示了如何创建状态管理、按钮点击事件处理以及响应数据的展示。

36 网络操作

1.源代码

import 'package:dio/dio.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool loading = false;
  String text = "";

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ConstrainedBox(
          constraints: BoxConstraints.expand(),
          child: SingleChildScrollView(
            child: Column(
              children: <Widget>[
                Padding(
                  padding: EdgeInsets.only(top: 100),
                  child: RaisedButton(
                      child: Text("获取百度首页"),
                      onPressed: loading ? null : () async {
                        setState(() {
                          loading = true;
                          text = "正在请求...";
                        });
                        try {
                          Dio dio = new Dio();
                          Response response=await dio.get("https://www.baidu.com/");
                          text = response.data;
                        } catch (e) {
                          text = "请求失败：$e";
                        } finally {
                          setState(() {
                            loading = false;
                          });
                        }
                      }
                  ),
                ),
                Builder(builder: (context){
                  return Container(
                      width: MediaQuery
                          .of(context)
                          .size
                          .width - 50.0,
                      child: Text(text)
                  );
                })
              ],
            ),
          ),
        ),
      ),
    );
  }
}

2.引用

dio: 2.1.7

在这里插入图片描述

3.解释源代码

import 'package:dio/dio.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  //是否加载标识
  bool loading = false;
  //显示的文本内容
  String text = "";

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ConstrainedBox(
          constraints: BoxConstraints.expand(),
          child: SingleChildScrollView(
            child: Column(
              children: <Widget>[
                Padding(
                  padding: EdgeInsets.only(top: 100),
                  child: RaisedButton(
                      child: Text("获取百度首页"),
                      onPressed: loading ? null : () async {
                        setState(() {
                          loading = true;
                          text = "正在请求...";
                        });
                        try {
                          //导包  import 'package:dio/dio.dart';
                          Dio dio = new Dio();
                          Response response=await dio.get("https://www.baidu.com/");
                          text = response.data;
                        } catch (e) {
                          text = "请求失败：$e";
                        } finally {
                          setState(() {
                            loading = false;
                          });
                        }
                      }
                  ),
                ),
                Builder(builder: (context){
                  return Container(
                      width: MediaQuery
                          .of(context)
                          .size
                          .width - 50.0,
                      child: Text(text)
                  );
                })
              ],
            ),
          ),
        ),
      ),
    );
  }
}

4.效果图

在这里插入图片描述