Flutter Onpressed Utilize Full Index from List

Question

I have created a list with all navigation paths and I want to click on a button and go through them 1 click goes to the 0 index then another click to 1 index.
This is the one that is showing red lines underneath the index = pagesList[index] How do I make this happen? if I change it to show a hardcoded index like pagesList[3] it will go to that index value within the Array, but i want it to go through the list after each click.

Array:

List pagesList = [
  for (int index = 0; index < pagesList.length; index++)
    {
      AliflaammeemPg2(),
      AliflaammeemPg3(),
      AliflaammeemPg4(),
      AliflaammeemPg5(),
      AliflaammeemPg6(),
      AliflaammeemPg7(),
      AliflaammeemPg8(),
      AliflaammeemPg9(),
}
];



then on another page I have 
class _AliflaammeemPg2State extends State<AliflaammeemPg2> {
  @override
  Widget build(BuildContext context) {
    return ReusableLarge(
      forward: () {
        // String page = "{\"title\":\"Page1\",\"target\":\"p1\"}";
        // page = json.decode(page);
        // if(page['target'] == "p1"){

        // }
        //

        // ignore: unnecessary_statements
        Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => **pagesList[index]**

                // pagesList();

                // Navigator.push(
                //   context,
                //   MaterialPageRoute(builder: (context) => AliflaammeemPg3()),
                ));
      },

Also: This is where the widget.forward is being pressed:

         child: new Row(
                mainAxisSize: MainAxisSize.min,
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                // crossAxisAlignment: CrossAxisAlignment.center
                children: <Widget>[
                  GFButton(
                    icon: Icon(
                      styling.bottomNavBarForwardArrowIcon,
                      color: Colors.cyan,
                      size: 30,

                      // tooltip: "Forward",
                    ),
                    color: Colors.cyan,

                    textStyle: TextStyle(
                        fontSize: 20, fontWeight: FontWeight.bold),
                    text: "مستقيم",
                    // elevation: 23,
                    // iconSize: 30,
                    splashColor: Colors.lightBlue,
                    onPressed: widget.forward,

Answer 1

You can use Navigate with named routes .

// Navigate to the second screen using a named route.
  Navigator.pushNamed(context, '/$index');

MaterialApp(
  title: 'Named Routes Demo',
  // Start the app with the "/" named route. In this case, the app starts
  // on the FirstScreen widget.
  initialRoute: '/',
  routes: {
    // When navigating to the "/" route, build the FirstScreen widget.
    '/': (context) => const FirstScreen(),
    // When navigating to the "/second" route, build the SecondScreen widget.
    '/1': (context) => const AliflaammeemPg1(),
    '/2': (context) => const AliflaammeemPg2(),
        //and so on...

  },
)