用到了http模块
官方网址
https://pub.dev/packages/http
代码
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
class HttpDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("http_demo"),
),
body: HttpDemoHome(),
);
}
}
class HttpDemoHome extends StatefulWidget {
@override
_HttpDemoHomeState createState() => _HttpDemoHomeState();
}
class _HttpDemoHomeState extends State<HttpDemoHome> {
@override
void initState() {
super.initState();
//requst network
fetchPosts().then((value) => print);
// final post = {"title": "Hello", "description": "nice to meet you."};
// print(post['title']);
// print(post['description']);
// //map to json
// final postJson = json.encode(post);
// print(postJson);
// //json to map
// final postJsonConverted = json.decode(postJson);
// print(postJsonConverted['title']);
// print(postJsonConverted is Map);
// //map to model
// final postModel = Post.fromJson(postJsonConverted);
// print("title:${postModel.title}");
// print("description:${postModel.description}");
// //model print
// print("description:${postModel.tojson()}");
}
@override
Widget build(BuildContext context) {
return FutureBuilder(
builder: (BuildContext context, AsyncSnapshot snapshot) {
print("data:${snapshot.data}");
print("data connectionState:${snapshot.connectionState}");
if (snapshot.connectionState == ConnectionState.waiting) {
return Center(child: Text("loading..."));
}
return Center(
child: ListView(
children: snapshot.data.map<Widget>((item) {
return ListTile(
title: Text(item.title),
subtitle: Text(item.author),
leading: CircleAvatar(
backgroundImage: NetworkImage(item.imageUrl),
),
);
}).toList(),
),
);
},
future: fetchPosts(),
);
}
Future<List<Post>> fetchPosts() async {
var url = Uri.parse('https://resources.ninghao.net/demo/posts.json');
final response = await http.get(url);
if (response.statusCode == 200) {
final responseBody = json.decode(response.body);
print(responseBody);
List<Post> posts = responseBody['posts']
.map<Post>((item) => Post.fromJson(item))
.toList();
return posts;
} else {
throw Exception("Failed to fetch posts");
}
}
}
class Post {
final String title;
final int id;
final String description;
final String author;
final String imageUrl;
Post(this.id, this.title, this.description, this.author, this.imageUrl);
Post.fromJson(Map json)
: title = json['title'],
id = json['id'],
author = json['author'],
imageUrl = json['imageUrl'],
description = json['description'];
Map tojson() => {'title': title, 'description': description};
}
展示
防止网址失效
网址json对应的内容
{
"posts": [
{
"id": 1,
"title": "Candy Shop",
"author": "Mohamed Chahin",
"description": "Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.",
"imageUrl": "https://resources.ninghao.net/images/candy-shop.jpg"
},
{
"id": 2,
"title": "Childhood in a picture",
"author": "Mohamed Chahin",
"description": "Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.",
"imageUrl": "https://resources.ninghao.net/images/childhood-in-a-picture.jpg"
},
{
"id": 3,
"title": "Contained",
"author": "Mohamed Chahin",
"description": "Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.",
"imageUrl": "https://resources.ninghao.net/images/contained.jpg"
},
{
"id": 4,
"title": "Dragon",
"author": "Mohamed Chahin",
"description": "Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.",
"imageUrl": "https://resources.ninghao.net/images/dragon.jpg"
},
{
"id": 5,
"title": "Free Hugs",
"author": "Mohamed Chahin",
"description": "Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.",
"imageUrl": "https://resources.ninghao.net/images/free_hugs.jpg"
},
{
"id": 6,
"title": "Gravity Falls",
"author": "Mohamed Chahin",
"description": "Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.",
"imageUrl": "https://resources.ninghao.net/images/gravity-falls.png"
},
{
"id": 7,
"title": "Icecream Truck",
"author": "Mohamed Chahin",
"description": "Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.",
"imageUrl": "https://resources.ninghao.net/images/icecreamtruck.png"
},
{
"id": 8,
"title": "keyclack",
"author": "Mohamed Chahin",
"description": "Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.",
"imageUrl": "https://resources.ninghao.net/images/keyclack.jpg"
},
{
"id": 9,
"title": "Overkill",
"author": "Mohamed Chahin",
"description": "Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.",
"imageUrl": "https://resources.ninghao.net/images/overkill.png"
},
{
"id": 10,
"title": "Say Hello to Barry",
"author": "Mohamed Chahin",
"description": "Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.",
"imageUrl": "https://resources.ninghao.net/images/say-hello-to-barry.jpg"
},
{
"id": 11,
"title": "Space Skull",
"author": "Mohamed Chahin",
"description": "Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.",
"imageUrl": "https://resources.ninghao.net/images/space-skull.jpg"
},
{
"id": 12,
"title": "The Old Fashioned",
"author": "Mohamed Chahin",
"description": "Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.",
"imageUrl": "https://resources.ninghao.net/images/the-old-fashioned.png"
},
{
"id": 13,
"title": "Tornado",
"author": "Mohamed Chahin",
"description": "Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.",
"imageUrl": "https://resources.ninghao.net/images/tornado.jpg"
},
{
"id": 14,
"title": "Undo",
"author": "Mohamed Chahin",
"description": "Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.",
"imageUrl": "https://resources.ninghao.net/images/undo.jpg"
},
{
"id": 15,
"title": "White Dragon",
"author": "Mohamed Chahin",
"description": "Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.",
"imageUrl": "https://resources.ninghao.net/images/white-dragon.jpg"
}
]
}
