Create two custom buttons inside Bottom Navigation Bar to control four pages using page view

Question

I want to control four pages using two arrows on the bottom navigation bar, and in the middle of these two arrow buttons I have a counter to show the ID of the page. Like the image below:

I'm using modular route to change the pages, but I don't know how can I do that using only two buttons, and don't have idea how can I put the counter in the middle of this two buttons. Any suggestion?

class _CreateAccountPageState
  extends ModularState<CreateAccountPage, CreateAccountController> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            body: PageView(
              controller: controller.pageViewController,
              children: [
                RouterOutlet(),
                RouterOutlet(),
                RouterOutlet(),
                RouterOutlet()
              ],
            ),
            bottomNavigationBar: AnimatedBuilder(
              animation: controller.pageViewController,
              builder: (context, snapshot) {
                return BottomNavigationBar(
                    showSelectedLabels: false,
                    showUnselectedLabels: false,
                    elevation: 0,
                    backgroundColor: Colors.white,
                    currentIndex: controller.pageViewController.page?.round() ?? 0,
                    onTap: (id) {
                      if (id == 0) {
                        Modular.to.navigate('/createaccount/pageStep1');
                      } else if (id == 1) {
                        Modular.to.navigate('/createaccount/pageStep2');
                      } else if (id == 2) {
                        Modular.to.navigate('/createaccount/pageStep3');
                      } else if (id == 3) {
                        Modular.to.navigate('/createaccount/pageStep4');
                      }
                    },
                    items: [
                      BottomNavigationBarItem(
                        icon: Icon(Icons.home),
                        label: 'Page1',
                      ),
                      BottomNavigationBarItem(
                        icon: Icon(Icons.person),
                        label: 'Page2',
                      ),
                      BottomNavigationBarItem(
                        icon: Icon(Icons.home),
                        label: 'Page3',
                      ),
                      BottomNavigationBarItem(
                        icon: Icon(Icons.person),
                        label: 'Page4',
                      )
                    ]
    
                    /*ElevatedButton(
              onPressed: () => Modular.to.navigate("/login"),
              child: Text("Voltar"))*/
                    );
              },
            ));
      }

Answer 1

Here is the output, I hope you can design the rest:

Widget

import 'package:flutter/material.dart';

class CreateAccountPage extends StatefulWidget {
  CreateAccountPage({Key? key}) : super(key: key);

  @override
  _CreateAccountPageState createState() => _CreateAccountPageState();
}

class _CreateAccountPageState extends State<CreateAccountPage> {
  PageController controller = PageController(initialPage: 0);

  int currentPage = 0;

  final pages = List.generate(
    4,
    (index) => Container(
      alignment: Alignment.center,
      color: index.isEven ? Colors.cyanAccent : Colors.yellowAccent,
      child: Text(
        "${index + 1}",
        style: TextStyle(fontSize: 44),
      ),
    ),
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: PageView(
          controller: controller,
          children: [...pages],
          onPageChanged: (value) {
            setState(() {
              currentPage = value;
            });
          },
        ),
        bottomNavigationBar: Container(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              IconButton(
                onPressed: () {
                  setState(() {
                    controller.previousPage(
                        duration: Duration(milliseconds: 400),
                        curve: Curves.easeInOut);
                  });
                },
                icon: Icon(Icons.arrow_left),
              ),
              Text(
                "${currentPage + 1}/${pages.length}",
              ),
              IconButton(
                onPressed: () {
                  controller.nextPage(
                      duration: Duration(milliseconds: 400),
                      curve: Curves.easeInOut);
                },
                icon: Icon(Icons.arrow_right),
              )
            ],
          ),
        ));
  }
}