在 flutter 的列表视图滚动中添加点

Question

I need to display categories in a scroll with 3X3 in grid view and it was working fine and slide also working fine but i cant able to achieve the dots for the scrolling.. I need like carousal. Is it possible to add dots with list view

    SingleChildScrollView(
child: GridView.count(
                  physics: ScrollPhysics(),
                  padding: EdgeInsets.fromLTRB(16, 16, 16, 0),
                  primary: false,
                  childAspectRatio: 1.1,
                  shrinkWrap: true,
                  crossAxisSpacing: 0,
                  mainAxisSpacing: 0,
                  crossAxisCount: 4,
                  // mainAxisCount:2,
                  //scrollDirection: Axis.horizontal,
                  children: List.generate(categoryData.length, (index) {
                    return GestureDetector(
                        onTap: () {
                          Navigator.push(
                              context,
                              MaterialPageRoute(
                                  builder: (context) => ProductCategoryPage(
                                      categoryId: categoryData[index].id,
                                      categoryName:
                                          categoryData[index].name)));
                        },
                        child: Column(children: [
                          buildCacheNetworkImage(
                              width: 40,
                              height: 40,
                              url: categoryData[index].image,
                              plColor: Colors.transparent),
                          Flexible(
                            child: Container(
                              margin: EdgeInsets.fromLTRB(0, 10, 0, 0),
                              child: Text(
                                categoryData[index].name,
                                style: TextStyle(
                                  color: CHARCOAL,
                                  fontWeight: FontWeight.normal,
                                  fontSize: 12,
                                ),
                                textAlign: TextAlign.center,
                              ),
                            ),
                          )
                        ]));
                  }),
                ),

)

I need to get the scrolling dots in the list view so how to achieve that

Answer 1

You should implement below way

Code:

   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;
}

Output: