Добавить точки в прокрутке списка в флаттере

Вы должны реализовать следующий способ

Код :

   class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  List<String> list = [];
  int perPageItem = 16;
  int pageCount;
  int selectedIndex = 0;
  int lastPageItemLength;
  PageController pageController;

  @override
  void initState() {
    pageController = PageController(initialPage: 0);
    for (int i = 1; i <= 45; i++) {
      list.add('$i');
    }
    var num = (list.length / perPageItem);
    pageCount = num.isInt ? num.toInt() : num.toInt() + 1;

    var reminder = list.length.remainder(perPageItem);
    lastPageItemLength = reminder == 0 ? perPageItem : reminder;

    super.initState();
  }

  @override
  void dispose() {
    pageController.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: [
          SizedBox(
            height: 390,
            child: PageView.builder(
                controller: pageController,
                itemCount: pageCount,
                onPageChanged: (index) {
                  setState(() {
                    selectedIndex = index;
                  });
                },
                itemBuilder: (_, pageIndex) {
                  return GridView.count(
                    physics: NeverScrollableScrollPhysics(),
                    padding: const EdgeInsets.fromLTRB(16, 16, 16, 0),
                    primary: false,
                    childAspectRatio: 1.1,
                    shrinkWrap: true,
                    crossAxisSpacing: 0,
                    mainAxisSpacing: 0,
                    crossAxisCount: 4,
                    children: List.generate(
                        (pageCount - 1) != pageIndex
                            ? perPageItem
                            : lastPageItemLength, (index) {
                      return GestureDetector(
                        onTap: () {},
                        child: Container(
                          width: 50,
                          height: 50,
                          margin: const EdgeInsets.all(5),
                          color: Colors.amber,
                          alignment: Alignment.center,
                          child: Text(
                            list[index + (pageIndex * perPageItem)],
                            style: TextStyle(color: Colors.black, fontSize: 20),
                          ),
                        ),
                      );
                    }),
                  );
                }),
          ),
          SizedBox(
            height: 15,
            child: ListView.builder(
              shrinkWrap: true,
              scrollDirection: Axis.horizontal,
              itemCount: pageCount,
              itemBuilder: (_, index) {
                return GestureDetector(
                  onTap: () {
                    pageController.animateToPage(index, duration: Duration(milliseconds: 500), curve: Curves.easeInOut);
                  },
                  child: AnimatedContainer(
                    duration: Duration(milliseconds: 100),
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.all(Radius.circular(10)),
                        color: Colors.red
                            .withOpacity(selectedIndex == index ? 1 : 0.5)),
                    margin: EdgeInsets.all(5),
                    width: 10,
                    height: 10,
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

extension NumExtensions on num {
  bool get isInt => (this % 1) == 0;
}

Выход :