Error in the code, BuildContext in Flutter - flutter

Question

I am making an app with different build methods so that I can make a list of items to save them on another screen when the "love heart" button is tapped. But I am getting errors in the code. I am following the Flutter Codelabs app tutorial part 2.
My code:
import 'package:aioapp2/lists.dart';
import 'package:flutter/material.dart';
class _FavoriteListState extends State<FavoriteList> {
final _suggestions = [];
final Set<Widget> _saved = Set<Widget>();
Widget _buildList() {
return ListView.builder(
itemCount: 53,
itemBuilder: (BuildContext context, int index) {
return _buildRow(_suggestions[index]);
},
);
}
Widget _buildRow(Widget website){
final bool alreadySaved = _saved.contains(website);
return Card(
child: Container(
child: ListTile(
contentPadding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
subtitle: Row(
children: <Widget>[
// Image.asset('lib/images/${images[index]}'),
],
),
),
),
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: _buildList(),
);
}
}
class FavoriteList extends StatefulWidget {
#override
_FavoriteListState createState() => _FavoriteListState();
}
The error that I'm facing is in the Image.asset() line. On typing the following line its showing red line under the "index". But it shouldn't and that's the problem! Any help?

Answer 1

You are attempting to reference the variable index from within the _buildRow method, but that variable doesn't exist there. Take a look at this excerpt from your code
Widget _buildList() {
return ListView.builder(
itemCount: 53,
itemBuilder: (BuildContext context, int index) { // <-- index declared here
return _buildRow(_suggestions[index]);
},
);
}
Widget _buildRow(Widget website){
final bool alreadySaved = _saved.contains(website);
return Card(
child: Container(
child: ListTile(
contentPadding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
subtitle: Row(
children: <Widget>[
// Image.asset('lib/images/${images[index]}'), // <-- index has not been declared here
],
),
),
),
);
}
This is an example of scope. The variable index is defined in the builder method within _buildList. That means the variable only exists there. You can't access it outside that method, so when you try to access it within _buildRow, you get an error.
If you want to pass the value of index to the _buildRow, you need to pass it as an argument to the _buildRow method:
Widget _buildList() {
return ListView.builder(
itemCount: 53,
itemBuilder: (BuildContext context, int index) { // <-- index declared here
return _buildRow(_suggestions[index], index); // Passing it as an argument
},
);
}
Widget _buildRow(Widget website, int index) {
final bool alreadySaved = _saved.contains(website);
return Card(
child: Container(
child: ListTile(
contentPadding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
subtitle: Row(
children: <Widget>[
Image.asset('lib/images/${images[index]}'), // <-- index has been declared in the parameter list so everything is ok here
],
),
),
),
);
}
(Your code doesn't declare images anywhere either, but I'm assuming you declare it elsewhere in code that you didn't share since you aren't reporting the error there.)

Answer 2

Try like this a simple workaround:
import 'package:flutter/material.dart';
void main() => runApp(
MaterialApp(
home: FavoriteList(),
)
);
class _FavoriteListState extends State<FavoriteList> {
final _suggestions = [{
'image' : 'ic_play.png'
},
{
'image' : 'ic_play.png'
},
{
'image' : 'ic_play.png'
},
{
'image' : 'ic_play.png'
}
];
final Set<Widget> _saved = Set<Widget>();
Widget _buildList() {
return ListView.builder(
itemCount: _suggestions.length,
itemBuilder: (BuildContext context, int index) {
return _buildRow(_suggestions[index]);
},
);
}
Widget _buildRow(dynamic website){
return Card(
child: Container(
child: ListTile(
contentPadding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
subtitle: Row(
children: <Widget>[
Image.asset('assets/images/${website['image']}'),
],
),
),
),
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: _buildList(),
);
}
}
class FavoriteList extends StatefulWidget {
#override
_FavoriteListState createState() => _FavoriteListState();
}

Answer 3

Shouldnt
Image.asset('lib/images/${images[index]}'),
be like
Image.asset('lib/images/${index}.png'), // Provide you have 0.png, 1.png .... in lib folder
Or you should had an String array names images like
String[] images=["1.png","2.png"];
=====
I cant see any variable images which you want to reference in the commented code.