以下是我编写的代码。
Future<List<Data>> getActivities() async{
var data = await http.get(HimalayanWalkConstant.baseURL + "activities",
headers: {
'Accept': 'application/json',
'Content-type': 'application/json',
'Authorization': '$token_type' + ' $access_token'});
var jsonData = json.decode(data.body);
List<Data> users = [];
for(var u in jsonData) {
Data user = Data(
id: u['id'],
description: u['description'],
featuredImageUrl: u['featuredImageUrl'],
excerpts: u['excerpts'],
title: u['title']
);
users.add(user);
}
print(users.length);
return users;
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: new AppBar(
title: new Text("Activities"),
),
body: ListView(
scrollDirection: Axis.vertical,
children: <Widget>[
Container(
padding: EdgeInsets.all(16.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(UserConstants.userDisplayName,
style: TextStyle(
fontSize: 18.0, fontWeight: FontWeight.bold)),
Text(
"what do you want to do today?",
style: TextStyle(color: Colors.grey.shade700),
)
],
),
CircleAvatar(
backgroundImage:
new NetworkImage(UserConstants.userProfileUrl),
radius: 40.0,
)
],
),
),
Container(
padding: EdgeInsets.only(left: 16.0, right: 16.0, bottom: 8.0),
child: Material(
elevation: 5.0,
child: TextField(
decoration: InputDecoration(
hintText: "Find activities",
prefixIcon: Icon(Icons.location_on),
border: InputBorder.none),
),
),
),
new Container(
padding: EdgeInsets.fromLTRB(8.0, 8.0, 8.0, 8.0),
child: Material(
child: buildListItems(getActivities()),
),
),
],
),
);
}
这是我要向其中显示数据的Ui。
Card _buildFeaturedItem({String image, String title, String subtitle}) {
return Card(
child: Material(
elevation: 5.0,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5.0)),
child: Stack(
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.circular(5.0),
child: new Image(
image: new CachedNetworkImageProvider(image),
fit: BoxFit.cover,
)),
Positioned(
right: 10.0,
top: 10.0,
child: IconButton(
onPressed: () {},
icon: Icon(Icons.favorite_border, color: Colors.white),
),
),
Positioned(
bottom: 20.0,
child: Container(
padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
color: Colors.black.withOpacity(0.7),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Text(title,
style: TextStyle(
color: Colors.white,
fontSize: 20.0,
fontWeight: FontWeight.bold)),
Text(subtitle, style: TextStyle(color: Colors.white))
],
),
),
),
],
),
),
);
}
SizedBox buildListItems(Future<List> categories) {
final ScrollController controller = new ScrollController();
return SizedBox(
child: FutureBuilder(
future: categories,
builder: (BuildContext context, AsyncSnapshot<List<dynamic>> snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
return ListView.builder(
shrinkWrap: true,
controller: controller,
scrollDirection: Axis.vertical,
itemBuilder: (context, index) {
return new Container(
child: InkWell(
onTap: () {
},
child: _buildFeaturedItem(
image: snapshot.data[index].featuredImageUrl,
title: snapshot.data[index].title,
subtitle: snapshot.data[index].slug,
),
),
);
},
itemCount: snapshot.data.length,
);
} else {
return Center(
child: CircularProgressIndicator(),
);
}
},
),
);
}
这是我通过在线pojo生成器制作的pojo。在地图上
class Autogenerated {
List<Data> data;
Autogenerated({this.data});
Autogenerated.fromJson(Map<String, dynamic> json) {
if (json['data'] != null) {
data = new List<Data>();
json['data'].forEach((v) {
data.add(new Data.fromJson(v));
});
}
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
if (this.data != null) {
data['data'] = this.data.map((v) => v.toJson()).toList();
}
return data;
}
}
class Data {
String id;
String title;
String slug;
String geo;
String description;
String excerpts;
Null deletedAt;
String featuredImageUrl;
Data(
{this.id,
this.title,
this.slug,
this.geo,
this.description,
this.excerpts,
this.deletedAt,
this.featuredImageUrl});
Data.fromJson(Map<String, dynamic> json) {
id = json['id'];
title = json['title'];
slug = json['slug'];
geo = json['geo'];
description = json['description'];
excerpts = json['excerpts'];
deletedAt = json['deleted_at'];
featuredImageUrl = json['featured_image_url'];
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['id'] = this.id;
data['title'] = this.title;
data['slug'] = this.slug;
data['geo'] = this.geo;
data['description'] = this.description;
data['excerpts'] = this.excerpts;
data['deleted_at'] = this.deletedAt;
data['featured_image_url'] = this.featuredImageUrl;
return data;
}
}