i want to display a images and text in listview. Data is parsed and set it in model class. can you please help me out. Below is my class.
import 'dart:async';
import 'dart:convert';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:http/http.dart' as http;
Future<List<Photo>> fetchPhotos(http.Client client) async {
final response = await client.get('url here');
return compute(parsePhotos, response.body);
}
// A function that will convert a response body into a List<Photo>
List<Photo> parsePhotos(String responseBody) {
final parsed = json.decode(responseBody);
return (parsed["data"]["categoryList"] as List)
.map<Photo>((json) => new Photo.fromJson(json))
.toList();
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// SystemChrome.setEnabledSystemUIOverlays([]);
return new MyHomePage();
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new FutureBuilder<List<Photo>>(
future: fetchPhotos(new http.Client()),
builder: (context, snapshot) {
if (snapshot.hasError) print(snapshot.error);
return snapshot.hasData
? new PhotosList(photos: snapshot.data)
: new Center(child: new CircularProgressIndicator());
},
);
}
}
class PhotosList extends StatelessWidget {
final List<Photo> photos;
PhotosList({Key key, this.photos}) : super(key: key);
@override
Widget build(BuildContext context) {
return new Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
new Expanded(child: _buildList(context)
),
**//Able to display images but want to show text from list on images.**
new Padding(
padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
child: new Text('DAILY WALLPAPER',
style: new TextStyle(
fontSize: 30.0,
color: Colors.black,
fontWeight: FontWeight.bold)),
),
],
);
}
//Showing the images in listview
ListView _buildList(context) {
return new ListView.builder(
itemCount: photos.length,
itemBuilder: (context, int) {
return new CachedNetworkImage(imageUrl: photos[int].url);
});
}
}
class Photo {
final int catID;
final String title;
final String url;
final String thumbnailUrl;
final String description;
final String webstiteURL;
Photo(
{this.catID,
this.title,
this.url,
this.thumbnailUrl,
this.description,
this.webstiteURL});
factory Photo.fromJson(Map<String, dynamic> json) {
return new Photo(
catID: json['category_id'] as int,
title: json['category_name'] as String,
url: json['category_img'] as String,
thumbnailUrl: json['thumb_img'] as String,
description: json['description'] as String,
webstiteURL: json['website_url'] as String,
);
}
}
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…