Navigating to different screens from listTile (flutter, dart) - list

Question

I am new to Flutter & would greatly appreciate some help! Apologies in advance for the messy code- I'm trying my best to understand flutter!
I am creating a simple quiz app.
The first page begins with a listTile with the titles of each subsequent page.
From clicking each listTile, I hope to navigate to a different screen. The screens are all in separate dart files.
Ideally, I would like to have the ontap function within the following code, so that each individually titled listTile could lead to a different screen:
Lesson(title: "Hosea", scoreString: "1 / 10", score: 0.1),
However, my ontap function can only be built within listTile, and so i can't make it individual for each Card!
Please help!!
**
class WelcomeScreen extends StatelessWidget {
static const String id = 'welcome_screen';
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Minor Prophets',
theme: new ThemeData(
primaryColor: Color.fromRGBO(58, 66, 86, 1.0), fontFamily: 'Raleway'),
home: new ListPage(title: 'Lessons'),
// home: DetailPage(),
);
}
}
class ListPage extends StatefulWidget {
ListPage({Key key, this.title}) : super(key: key);
final String title;
#override
_ListPageState createState() => _ListPageState();
}
class _ListPageState extends State<ListPage> {
List lessons;
#override
void initState() {
lessons = getLessons();
super.initState();
}
#override
Widget build(BuildContext context) {
ListTile makeListTile(Lesson lesson) => ListTile(
contentPadding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 1.0),
leading: Container(
padding: EdgeInsets.only(right: 12.0),
decoration: new BoxDecoration(
border: new Border(
right: new BorderSide(width: 1.0, color: Colors.white24))),
child: Icon(Icons.face, color: Colors.white),
),
title: Text(
lesson.title,
style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
),
//
subtitle: Row(
children: <Widget>[
Expanded(
flex: 1,
child: Container(
// tag: 'hero',
child: LinearProgressIndicator(
backgroundColor: Color.fromRGBO(209, 224, 224, 0.2),
value: lesson.indicatorValue,
valueColor: AlwaysStoppedAnimation(Colors.green)),
)),
Expanded(
flex: 4,
child: Padding(
padding: EdgeInsets.only(left: 10.0),
child: Text(lesson.level,
style: TextStyle(color: Colors.white))),
)
],
),
trailing:
Icon(Icons.keyboard_arrow_right, color: Colors.white, size: 30.0),
onTap: () {
},
);
Card makeCard(Lesson lesson) => Card(
elevation: 8.0,
margin: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0),
child: Container(
decoration: BoxDecoration(color: Color.fromRGBO(64, 75, 96, .9)),
child: makeListTile(lesson),
),
);
final makeBody = Container(
// decoration: BoxDecoration(color: Color.fromRGBO(58, 66, 86, 1.0)),
child: ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: lessons.length,
itemBuilder: (BuildContext context, int index) {
return makeCard(lessons[index]);
},
),
);
**
`enter code here`List getLessons() {
return [
Lesson(title: "Hosea", scoreString: "1 / 10", score: 0.1),
Lesson(title: "Joel", scoreString: "1 / 10", score: 0.1),
Lesson(title: "Amos", scoreString: "1 / 10", score: 0.1),
Lesson(title: "Obadiah", scoreString: "1 / 10"),
Lesson(title: "Jonah", scoreString: "1 / 10"),
Lesson(title: "Micah", scoreString: "1 / 10"),
Lesson(title: "Nahum", scoreString: "1 / 10"),
Lesson(title: "Habakkuk", scoreString: "1 / 10"),
Lesson(title: "Zephaniah", scoreString: "1 / 10"),
Lesson(title: "Haggai", scoreString: "1 / 10"),
Lesson(title: "Zechariah", scoreString: "1 / 10"),
Lesson(title: "Malachi", scoreString: "1 / 10"),
];
}
**
class Lesson {
String title;
String scoreString;
double score;
Lesson({this.title, this.scoreString, this.score});
}

Answer 1

try to pass in makeListTile(lesson,index) and based on this index you can navigate to different screen
onTap(){
if(index==0)
// do something
else if(index==1)
// do something different
}