Play Flutter Quiz. Click here .

List of Cards from a JSON source in Flutter

This Article is posted by seven.srikanth@gmail.com at 23-11-2018 20:33:43




In this article, I'm going to share you the example of how to create a List of Cards from a JSON source.

Here is the final main.dart code. All you need to do is to, copy paste this code into your newly created flutter project and run it.

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');

// Use the compute function to run parsePhotos in a separate isolate
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).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(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final appTitle = 'Isolate Demo';

return MaterialApp(
title: appTitle,
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: Padding(
child: 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());
},
),
padding: EdgeInsets.fromLTRB(1.0, 10.0, 1.0, 10.0),
),
);
}
}

class PhotosList extends StatelessWidget {
final List<Photo> photos;

PhotosList({Key key, this.photos}) : super(key: key);

@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: photos.length,
itemBuilder: (context, index) {
return Column(
children: <Widget>[
Container(
constraints: BoxConstraints.expand(
height: Theme.of(context).textTheme.display1.fontSize * 1.1 +
200.0,
),
color: Colors.white10,
alignment: Alignment.center,
child: Card(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ListTile(
leading: Image.network(
photos[index].thumbnailUrl,
fit: BoxFit.fitWidth,
),
title: Text(photos[index].title),
subtitle: Text(photos[index].title),
),
ButtonTheme.bar(
// make buttons use the appropriate styles for cards
child: ButtonBar(
children: <Widget>[
FlatButton(
child: const Text('Open'),
onPressed: () {/* ... */},
),
],
),
),
],
),
)),
],
);
},
);
}
}



Tags: List of Cards from a JSON source in Flutter;




0 Comments
Login to comment.

Recent Comments

Be the first to Comment. You can ask a Query or Share your toughts or Just say thanks.







© 2018 - Fluttercentral | Email to me - Seven.srikanth@gmail.com

Terms | Privacy