Flutter Custom page indicator

Question

I'm working on a Flutter project and I need help creating a specific UI component. I've included a photo of the component I want to replicate. Here is the design I'm aiming for:

What I Need:

I'm looking for guidance on how to properly implement this component in Flutter. Specifically, I'm not sure which widgets to use or how to structure the layout to achieve this design.

Answer 1

You can start from here and refactoring the following:

class _MyHomePageState extends State<MyHomePage> {
  int pageIndex = 0;
  var controller = PageController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                buildIndicatorItem(
                    (pageIndex >= 0) ? Colors.green : Colors.grey, 1),
                Container(
                  width: 50,
                  child: Divider(
                    color: (pageIndex >= 0) ? Colors.green : Colors.grey,
                  ),
                ),
                buildIndicatorItem(
                    (pageIndex >= 1) ? Colors.green : Colors.grey, 2),
                Container(
                  width: 50,
                  child: Divider(
                      color: (pageIndex >= 1) ? Colors.green : Colors.grey),
                ),
                buildIndicatorItem(
                    (pageIndex == 2) ? Colors.green : Colors.grey, 3),
              ],
            ),
            Expanded(
                child: PageView(
                    onPageChanged: (index) {
                      setState(() {
                        pageIndex = index;
                      });
                    },
                    controller: controller,
                    children: [
                  Center(child: Text('Page 1 ')),
                  Center(child: Text('Page 2 ')),
                  Center(child: Text('Page 3 ')),
                ])),
            Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [
              FloatingActionButton(
                heroTag: 'btn1',
                onPressed: () {
                  controller.previousPage(
                      duration: Duration(milliseconds: 300),
                      curve: Curves.linear);
                },
                child: Icon(Icons.arrow_back),
              ),
              FloatingActionButton(
                heroTag: 'btn2',
                onPressed: () {
                  controller.nextPage(
                      duration: Duration(milliseconds: 300),
                      curve: Curves.linear);
                },
                child: Icon(Icons.arrow_forward),
              ),
            ])
          ],
        ));
  }

  Widget buildIndicatorItem(Color color, int index) {
    return CircleAvatar(
      radius: 25,
      backgroundColor: color,
      child: Text(index.toString()),
    );
  }
}

which produces the following:

If there's something that's not clear, let me know.