在颤动中连续显示按钮和列表视图

Question

我正在快速开发一个学习应用程序，那里有 20 页。在应用程序的底部，水平列表中的数字列表是从 1 到 20。通过选择任何数字，我可以导航到同一页面。我想在屏幕上一次显示 5 个数字，一旦我单击向前箭头，它将显示接下来的 5 个数字。通过单击向后箭头，它将显示前 5 个数字。请查看我的代码，让我知道我正在做的问题。

我的代码是;-

 Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Color(0xcc292e3a),
      appBar: AppBar(
        backgroundColor: Colors.black,
        title: Text("Add Exercise"),
      ),

      body: Column(

        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [

          Container(
            padding: EdgeInsets.only(left: 16, top: 16, right: 16),
            child: Row(
              children: [
                Container(
                  width: 40,
                  child:
                  IconButton(
                    padding: EdgeInsets.only(right: 10),
                    icon: Image.asset('assets/images/backArrow.png'),
                    onPressed: (){},
                  ),),
                Container(
            padding: EdgeInsets.only(left: 5, right: 5),
            height: 90,
            color: Colors.transparent,
            child: ListView.builder(
                scrollDirection: Axis.horizontal,
                itemCount: exerciseNumber.length,
                itemBuilder: (context, index) {
                  return GestureDetector(
                    onTap: () {
                      setState(() {
                        selectedIndex = index;
                        print('it is working');
                        resizeList(index+1);

                        previousSelectedIndex = selectedIndex;
                        print(selectedIndex);
                      });
                    },
                    child: Padding(
                      padding: const EdgeInsets.symmetric(
                          horizontal: 10, vertical: 30),
                      child: Container(
                        padding: EdgeInsets.only(left: 23, top: 4),
                        height: 40,
                        width: 60,
                        decoration: BoxDecoration(
                          color: index == selectedIndex ? Color(0xFFF3CA20)
                              : Colors.black,
                          shape: BoxShape.circle,
                            // border: Border.all(color: Colors.grey),
                            // borderRadius: BorderRadius.all(Radius.circular(5))
                  ),
                        child: Text(
                          exerciseNumber[index],
                          style: TextStyle(
                              color: index == selectedIndex
                                  ? Colors.black
                                  : Colors.white,
                              fontSize: 20,
                              // fontFamily: 'Kanit',
                              fontWeight: FontWeight.bold,
                              letterSpacing: 1.2),
                        ),
                      ),
                    ),
                  );
                }),
          ),
                Container(
                  width: 40,
                  child:
                  IconButton(
                    padding: EdgeInsets.only(right: 10),
                    icon: Image.asset('assets/images/forwardArrow.png'),
                    onPressed: (){},
                  ),),
              ],
            ),
          ),
          // Container(
          // padding: EdgeInsets.all(16),
          // child: buildInsertButton(),
          // ),
        ],
      ),


    );
  }

这里是练习编号

  final exerciseNumber = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20'];