flutter网络请求和详情页展示的例子 - 好文

总结demo，主要操作如下：

1.使用http 包进行网络请求

2.转换json数据为List<Photo>

3.使用GridView显示缩略图片

4.为缩略图添加onTap，第二屏查看大图
import 'dart:async'; import 'dart:convert'; import
'package:flutter/foundation.dart'; import 'package:flutter/material.dart';
import 'package:http/http.dart' as http; Future<List<Photo>>
fetchPhotos(http.Client client) async { final response = await
client.get('https://jsonplaceholder.typicode.com/photos'); return
compute(parsePhotos, response.body); } List<Photo> parsePhotos(String
responseBody) { final parsed = json.decode(responseBody).cast<Map<String,
dynamic>>(); return parsed.map<Photo>((json) => Photo.fromJson(json)).toList();
} class Photo { final int albumId; final int id; final String title; final
String url; final String thumbnailUrl; Photo({this.albumId, this.id,
this.title, this.url, this.thumbnailUrl}); factory Photo.fromJson(Map<String,
dynamic> json) { return Photo( albumId: json['albumId'] as int, id: json['id']
as int, title: json['title'] as String, url: json['url'] as String,
thumbnailUrl: json['thumbnailUrl'] as String ); } } void main() => runApp(new
MyApp()); class MyApp extends StatelessWidget { @override Widget
build(BuildContext context) { final appTitle = 'Isolate Demo'; return new
MaterialApp( title: appTitle, theme: new ThemeData( primarySwatch: Colors.blue,
), home: MyHomePage(title: appTitle) ); } } class MyHomePage extends
StatelessWidget { final String title; MyHomePage({Key key, this.title}) :
super(key: key); @override Widget build(BuildContext context) { return
Scaffold( appBar: AppBar( title: Text(title), ), body:
FutureBuilder<List<Photo>>( future: fetchPhotos(http.Client()), builder:
(context, snapshot) { if (snapshot.hasError) print(snapshot.error); return
snapshot.hasData ? PhotosList(photos: snapshot.data) : Center(child:
CircularProgressIndicator()); }, ), ); } } class PhotosList extends
StatelessWidget { final List<Photo> photos; PhotosList({Key key, this.photos})
: super(key: key); @override Widget build(BuildContext context) { return
GridView.builder( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2 ), itemCount: photos.length, itemBuilder: (context, index) {
return GestureDetector( onTap: () { Navigator.push(context, MaterialPageRoute(
builder: (context) => DetailPage(photo: photos[index]), )); }, child:
Image.network(photos[index].thumbnailUrl) ); } ); } } class DetailPage extends
StatelessWidget { final Photo photo; DetailPage({Key key, this.photo}) :
super(key: key); @override Widget build(BuildContext context) { return
Scaffold( appBar: AppBar( title: Text(photo.title), ), body: Center( child:
Image.network(photo.url), ), ); } }

效果如下：

热门工具换一换