http网络请求demo
请求步骤
(1)导入http模块
(2)创建一个Future类的,用于接收请求
(3)创建一个普通类,用于返回对象解析
(4)创建一个有状态组件,使用FutureBuilder渲染future
//测试http请求示例
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
late Future<Album> futureAlbum;
void initState() {
super.initState();
futureAlbum = fetchAlbum();
}
Widget build(BuildContext context) {
return MaterialApp(
title: 'Fetch Data Exaple',
theme: ThemeData(primarySwatch: Colors.blue),
home: Scaffold(
appBar: AppBar(
title: const Text('Fetch Data Example'),
),
body: Center(
child: FutureBuilder<Album>(
builder: (context, snapshot) {
if (snapshot.hasData) {
return Text(snapshot.data!.title);
} else if (snapshot.hasError) {
return Text("${snapshot.error}");
}
return const CircularProgressIndicator();
},
future: futureAlbum,
)),
),
);
}
}
Future<Album> fetchAlbum() async {
final response = await http
.get(Uri.parse("https://jsonplaceholder.typicode.com/albums/1"));
if (response.statusCode == 200) {
return Album.fromJson(jsonDecode(response.body));
} else {
throw Exception('fail to load album');
}
}
//将接收的json转成对象
class Album {
final int userId;
final int id;
final String title;
const Album({required this.userId, required this.id, required this.title});
factory Album.fromJson(Map<String, dynamic> json) {
return Album(userId: json['userId'], id: json['id'], title: json['title']);
}
}