Dynamically changing ListView of images using CachedNetworkImage - dart

Question

Essentially I want to do this but instead of updating a single image, I want to update a list of images. I have a ListView of images based off a List<String> of image URLs. See below:
import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
void main() => runApp(new MyApp());
class MyApp extends StatefulWidget {
#override
State<StatefulWidget> createState() {
return new MyAppState();
}
}
class MyAppState extends State<MyApp> {
double padding = 5.0;
String one = 'https://SOME_URL_HERE.com';
String two = 'https://SOME_URL_HERE.com';
String three = 'https://SOME_URL_HERE.com';
String four = 'https://SOME_URL_HERE.com';
List urls;
#override
Widget build(BuildContext context) {
urls = List();
urls.add(one);
urls.add(two);
return new MaterialApp(
debugShowCheckedModeBanner: false,
home: new Scaffold(
appBar: new AppBar(
title: new Text("Image list test"),
),
body: showBody(),
),
);
}
Widget showBody() {
return Padding(
padding: EdgeInsets.only(top: 15.0, left: 10.0, right: 10.0),
child: ListView(
children: <Widget>[
showItemImages(),
RaisedButton(
child: Text("Change image"),
onPressed: () {
setState(() {
urls = List();
urls.add(three);
urls.add(four);
});
},
),
Container(
child: Text('urls length: ${urls.length}'),
),
],
),
);
}
Widget showItemImages() {
return Padding(
padding: EdgeInsets.all(padding),
child: Container(
margin: EdgeInsets.symmetric(vertical: 20.0),
height: 200,
child: urls.length > 0 //item.images.length > 0
? getImagesListView(context)
: Container(child: Text('No images yet'))),
);
}
getImagesListView(BuildContext context) {
return ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: urls.length,
itemBuilder: (BuildContext context, int index) {
return new Container(
width: 160.0,
child: _sizedContainer(
new CachedNetworkImage(
key: new ValueKey<String>(urls[index]),
imageUrl: urls[index],
//placeholder: (context, url) => new CircularProgressIndicator(),
),
),
);
},
);
}
Widget _sizedContainer(Widget child) {
return new SizedBox(
width: 300.0,
height: 150.0,
child: new Center(
child: child,
),
);
}
}
When I push the button, it should clear the list and add two new elements to it but it is not working

Answer 1

The following 3 lines:
urls = List();
urls.add(one);
urls.add(two);
should not be put inside #override widget build method. putting them there means that you re-initialize urls every time you setstate, you should put these lines inside #override initState() method.