Flutter RefreshIndicator with a ListView populated from JSON

<p id="e06c75;](this.thumbnailUrl" color:="" color:="" color:="" color:="" color:="">In this article, I'm going to share an example of how to implement RefreshIndicator widget with a ListView which is populated from JSON. 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;](return color: #e5c07b;](MaterialApp( titlecolor: #c678dd;](: color: #98c379;]('Flutter Demo', themecolor: #c678dd;](: color: #e5c07b;](ThemeData( primarySwatchcolor: #c678dd;](: color: #e5c07b;](Colors.blue, ), homecolor: #c678dd;](: color: #e5c07b;](MyHomePage(titlecolor: #c678dd;](: color: #98c379;]('Flutter Demo Home Page'), ); }} color: #c678dd;](class color: #e5c07b;](MyHomePage color: #c678dd;](extends color: #e5c07b;](StatefulWidget { color: #e5c07b;](MyHomePage({color: #e5c07b;](Key key, color: #e06c75;](this.title}) color: #c678dd;](: color: #e06c75;](super(keycolor: #c678dd;](: key); color: #c678dd;](final color: #e5c07b;](String title; color: #c678dd;](@override color: #e5c07b;](_MyHomePageState color: #61afef;](createState() => color: #e5c07b;](_MyHomePageState();} color: #c678dd;](class color: #e5c07b;](_MyHomePageState color: #c678dd;](extends color: #e5c07b;](Statecolor: #56b6c2;]( { color: #c678dd;](int _count color: #56b6c2;](= color: #d19a66;](0; 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(widget.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;](RefreshIndicator( childcolor: #c678dd;](: color: #e5c07b;](PhotosList(photoscolor: #c678dd;](: snapshot.data, countcolor: #c678dd;](: _count color: #56b6c2;](+ color: #d19a66;](2), onRefreshcolor: #c678dd;](: _refreshhandle, ) 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: #e5c07b;](Futurecolor: #56b6c2;]( color: #61afef;](_refreshhandle() color: #c678dd;](async { color: #61afef;](setState(() { _count++; }); color: #c678dd;](return color: #d19a66;](null; }} color: #c678dd;](class color: #e5c07b;](PhotosList color: #c678dd;](extends color: #e5c07b;](StatelessWidget { color: #c678dd;](final color: #e5c07b;](Listcolor: #56b6c2;]( photos; color: #c678dd;](final color: #c678dd;](int count; color: #e5c07b;](PhotosList({color: #e5c07b;](Key key, color: #e06c75;](this.photos, color: #e06c75;](this.count}) 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;](: count, 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[count color: #56b6c2;](- index color: #56b6c2;](- color: #d19a66;](1].thumbnailUrl, fitcolor: #c678dd;](: color: #e5c07b;](BoxFit.fitWidth, ), titlecolor: #c678dd;](: color: #e5c07b;](Text(photos[count color: #56b6c2;](- index color: #56b6c2;](- color: #d19a66;](1].title), subtitlecolor: #c678dd;](: color: #e5c07b;](Text(photos[count color: #56b6c2;](- index color: #56b6c2;](- color: #d19a66;](1].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> <p>Hope this example is helpful. Thanks,Srikanth</p>