当前位置：首页 > news >正文

Flutter 使用http库获取网络数据的方法(一)

news 2025/7/6 6:25:04

前言

对于大部分应用来说，获取网络数据都是必不可少的一个功能。幸运的是，Dart 和 Flutter 就为我们提供了这样的工具。

1.使用 http库请求网络数据

我们看看如何使用http获取网络数据。

1. 添加 `http` package

http 包是 Flutter 官方推荐的网络请求库，简单易用。需要在 pubspec.yaml 中添加依赖：

dependencies:http: ^1.4.0

然后我们在需要的地方导入http包。

import 'package:http/http.dart' as http;

如果你想部署到Android上，需要添加下网络请求权限：

<uses-permission android:name="android.permission.INTERNET" />

2.进行网络请求

我这里找了一个开源的图片列表接口，使用方法如下：

  void sendRequest() async {var url = Uri.parse('https://picsum.photos/v2/list?page=1&limit=5');var response = await http.get(url);if (response.statusCode == 200) {final List<dynamic> data = List.from(jsonDecode(response.body));debugPrint("服务器返回结果：$data");setState(() {imageUrls = data.map((e) => e['download_url'] as String).toList();});}}

3.处理Http网络请求返回的数据

这里仅展示Http网络库的用法，就不做复杂的数据模型转换了。仅用一个图片展示下网络图片：

Image.network(url)

4.完整的代码

完整的代码如下：

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;class MyHomePage extends StatefulWidget {const MyHomePage({super.key, required this.title});final String title;@overrideState<MyHomePage> createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {List<String> imageUrls = [];void sendRequest() async {var url = Uri.parse('https://picsum.photos/v2/list?page=1&limit=5');var response = await http.get(url);if (response.statusCode == 200) {final List<dynamic> data = List.from(jsonDecode(response.body));debugPrint("服务器返回结果：$data");setState(() {imageUrls = data.map((e) => e['download_url'] as String).toList();});}}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary,title: Center(child: Text(widget.title,style: TextStyle(),),),),body: RefreshIndicator(onRefresh: () async {sendRequest();},child: ListView(children: [if (imageUrls.isEmpty)Padding(padding: const EdgeInsets.all(16.0),child: Center(child: Text('下拉获取图片')),)else...imageUrls.map((url) => Padding(padding: const EdgeInsets.all(8.0),child: Image.network(url),))],),),);}
}