How do I pass a variable by value to Flutter MaterialPageRoute? - flutter

Question

I have a loop index that is creating ~20 ListTiles that tap to a second screen that reference its index. However it looks like it's passing by reference since the value is always the same on the second screen
user defined upper_bound
...
for(int i=0; i<upper_bound;i++)
{
...
Container -> ListTile ->
title: GestureDetector(
onTap: () async {
var returnData = await Navigator.push(
context,
MaterialPageRoute(builder: (context) =>
SecondScreen(
index: i,
))
);}
}
In this situation, the second screen always receives index as upper_bound and not the value I'd expect which is the value at the time of the loop. How can I pass the current value of the index?

Answer 1

in the first page/screen
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("ListTile Example"),
),
body: new ListView(
children: new List.generate(20, (int index) {
return new ListTile(
onTap: () {
Navigator.of(context).push(
PageRouteBuilder(
opaque: false,
pageBuilder: (BuildContext context, _, __) => NextPage(
number: index,
),
),
);
},
title: new Text(
"Index No #$index",
style: new TextStyle(fontWeight: FontWeight.w500, fontSize: 25.0),
),
subtitle: new Text("My subtitle is"),
);
}),
),
);
}
in the next or second page
import 'package:flutter/material.dart';
class NextPage extends StatefulWidget {
final int number;
NextPage({
Key key,
#required this.number,
}) : super(key: key);
#override
_NextPageState createState() => _NextPageState();
}
class _NextPageState extends State<NextPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text(widget.number.toString()),
),
);
}
}