List of Cards from a JSON source in Flutter

<p id="e06c75;](this.thumbnailUrl" color:="" color:="" color:="" color:="" color:="">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. color: rgb(187, 187, 187); background-color: rgb(40, 44, 52); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre-wrap;](color: #c678dd;](import color: #98c379;]('dart:async';color: #c678dd;](import color: #98c379;]('dart:convert'; color: #c678dd;](import color: #98c379;]('package:flutter/foundation.dart';color: #c678dd;](import color: #98c379;]('package:flutter/material.dart';color: #c678dd;](import color: #98c379;]('package:http/http.dart' color: #c678dd;](as http; color: #e5c07b;](Futurecolor: #56b6c2;](> color: #61afef;](fetchPhotos(http.color: #e5c07b;](Client client) color: #c678dd;](async { color: #c678dd;](final response color: #56b6c2;](= color: #c678dd;](await client.color: #c678dd;](get(color: #98c379;]('https://jsonplaceholder.typicode.com/photos'); color: #7f848e;font-style: italic;](// Use the compute function to run parsePhotos in a separate isolate color: #c678dd;](return color: #61afef;](compute(parsePhotos, response.body);} color: #7f848e;font-style: italic;](// A function that will convert a response body into a Listcolor: #e5c07b;](Listcolor: #56b6c2;]( color: #61afef;](parsePhotos(color: #e5c07b;](String responseBody) { color: #c678dd;](final parsed color: #56b6c2;](= json.color: #61afef;](decode(responseBody).castcolor: #56b6c2;](>(); color: #c678dd;](return parsed.mapcolor: #56b6c2;](((json) => color: #e5c07b;](Photo.color: #61afef;](fromJson(json)).color: #61afef;](toList();} color: #c678dd;](class color: #e5c07b;](Photo { color: #c678dd;](final color: #c678dd;](int albumId; color: #c678dd;](final color: #c678dd;](int id; color: #c678dd;](final color: #e5c07b;](String title; color: #c678dd;](final color: #e5c07b;](String url; color: #c678dd;](final color: #e5c07b;](String thumbnailUrl; color: #e5c07b;](Photo(); color: #c678dd;](factory color: #e5c07b;](Photo.color: #61afef;](fromJson(color: #e5c07b;](Mapcolor: #56b6c2;]( json) { color: #c678dd;](return color: #e5c07b;](Photo( albumIdcolor: #c678dd;](: json[color: #98c379;]('albumId'] color: #c678dd;](as color: #c678dd;](int, idcolor: #c678dd;](: json[color: #98c379;]('id'] color: #c678dd;](as color: #c678dd;](int, titlecolor: #c678dd;](: json[color: #98c379;]('title'] color: #c678dd;](as color: #e5c07b;](String, urlcolor: #c678dd;](: json[color: #98c379;]('url'] color: #c678dd;](as color: #e5c07b;](String, thumbnailUrlcolor: #c678dd;](: json[color: #98c379;]('thumbnailUrl'] color: #c678dd;](as color: #e5c07b;](String, ); }} color: #c678dd;](void color: #61afef;](main() => color: #61afef;](runApp(color: #e5c07b;](MyApp()); color: #c678dd;](class color: #e5c07b;](MyApp color: #c678dd;](extends color: #e5c07b;](StatelessWidget { color: #c678dd;](@override color: #e5c07b;](Widget color: #61afef;](build(color: #e5c07b;](BuildContext context) { color: #c678dd;](final appTitle color: #56b6c2;](= color: #98c379;]('Isolate Demo'; color: #c678dd;](return color: #e5c07b;](MaterialApp( titlecolor: #c678dd;](: appTitle, homecolor: #c678dd;](: color: #e5c07b;](MyHomePage(titlecolor: #c678dd;](: appTitle), ); }} color: #c678dd;](class color: #e5c07b;](MyHomePage color: #c678dd;](extends color: #e5c07b;](StatelessWidget { color: #c678dd;](final color: #e5c07b;](String title; color: #e5c07b;](MyHomePage({color: #e5c07b;](Key key, color: #e06c75;](this.title}) color: #c678dd;](: color: #e06c75;](super(keycolor: #c678dd;](: key); color: #c678dd;](@override color: #e5c07b;](Widget color: #61afef;](build(color: #e5c07b;](BuildContext context) { color: #c678dd;](return color: #e5c07b;](Scaffold( appBarcolor: #c678dd;](: color: #e5c07b;](AppBar( titlecolor: #c678dd;](: color: #e5c07b;](Text(title), ), bodycolor: #c678dd;](: color: #e5c07b;](Padding( childcolor: #c678dd;](: color: #e5c07b;](FutureBuildercolor: #56b6c2;](>( futurecolor: #c678dd;](: color: #61afef;](fetchPhotos(http.color: #e5c07b;](Client()), buildercolor: #c678dd;](: (context, snapshot) { color: #c678dd;](if (snapshot.hasError) color: #61afef;](print(snapshot.error); color: #c678dd;](return snapshot.hasData color: #c678dd;](? color: #e5c07b;](PhotosList(photoscolor: #c678dd;](: snapshot.data) color: #c678dd;](: color: #e5c07b;](Center(childcolor: #c678dd;](: color: #e5c07b;](CircularProgressIndicator()); }, ), paddingcolor: #c678dd;](: color: #e5c07b;](EdgeInsets.color: #61afef;](fromLTRB(color: #d19a66;](1.0, color: #d19a66;](10.0, color: #d19a66;](1.0, color: #d19a66;](10.0), ), ); }} color: #c678dd;](class color: #e5c07b;](PhotosList color: #c678dd;](extends color: #e5c07b;](StatelessWidget { color: #c678dd;](final color: #e5c07b;](Listcolor: #56b6c2;]( photos; color: #e5c07b;](PhotosList({color: #e5c07b;](Key key, color: #e06c75;](this.photos}) color: #c678dd;](: color: #e06c75;](super(keycolor: #c678dd;](: key); color: #c678dd;](@override color: #e5c07b;](Widget color: #61afef;](build(color: #e5c07b;](BuildContext context) { color: #c678dd;](return color: #e5c07b;](ListView.color: #61afef;](builder( itemCountcolor: #c678dd;](: photos.length, itemBuildercolor: #c678dd;](: (context, index) { color: #c678dd;](return color: #e5c07b;](Column( childrencolor: #c678dd;](: color: #56b6c2;]([ color: #e5c07b;](Container( constraintscolor: #c678dd;](: color: #e5c07b;](BoxConstraints.color: #61afef;](expand( heightcolor: #c678dd;](: color: #e5c07b;](Theme.color: #61afef;](of(context).textTheme.display1.fontSize color: #56b6c2;](* color: #d19a66;](1.1 color: #56b6c2;](+ color: #d19a66;](200.0, ), colorcolor: #c678dd;](: color: #e5c07b;](Colors.white10, alignmentcolor: #c678dd;](: color: #e5c07b;](Alignment.center, childcolor: #c678dd;](: color: #e5c07b;](Card( childcolor: #c678dd;](: color: #e5c07b;](Column( mainAxisSizecolor: #c678dd;](: color: #e5c07b;](MainAxisSize.min, childrencolor: #c678dd;](: color: #56b6c2;]([ color: #e5c07b;](ListTile( leadingcolor: #c678dd;](: color: #e5c07b;](Image.color: #61afef;](network( photos[index].thumbnailUrl, fitcolor: #c678dd;](: color: #e5c07b;](BoxFit.fitWidth, ), titlecolor: #c678dd;](: color: #e5c07b;](Text(photos[index].title), subtitlecolor: #c678dd;](: color: #e5c07b;](Text(photos[index].title), ), color: #e5c07b;](ButtonTheme.color: #61afef;](bar( color: #7f848e;font-style: italic;](// make buttons use the appropriate styles for cards childcolor: #c678dd;](: color: #e5c07b;](ButtonBar( childrencolor: #c678dd;](: color: #56b6c2;]([ color: #e5c07b;](FlatButton( childcolor: #c678dd;](: color: #c678dd;](const color: #e5c07b;](Text(color: #98c379;]('Open'), onPressedcolor: #c678dd;](: () {color: #7f848e;font-style: italic;](/* ... */}, ), ], ), ), ], ), )), ], ); }, ); }}</p>