Question 76340 in Flutter Question posted in
The official Flutter documentation can be found here.

How to insert a custom tile in list view at specific interval – Flutter

I am trying to insert a custom tile after every 4 entries in ListView.builder. The problem is that when the Listview.builder is scrolled up/down, the page number changes. Please see the clip. (Notice my custom tile in grey stating page numbers)

https://youtube.com/shorts/BTm7BEya62A?feature=share

My Code is as follows:

      int pageCounter = 1;
  int oldPageCounter = 0;
  final int pageLength = 735;
  int pageLengthLeft = 735;
    Listview.builder...
    itemBuilder: (BuildContext context, int index) {
                

      adjustPageCounter(widget.mapOfProblems.values.elementAt(index), index);
...
            child:  (oldPageCounter != pageCounter)
                                        ? Column(
                                      children: [
                                        getPageDivider(),
                                        MyUsualListTile()
                                        ])
                                       : MyUsualListTile()
)}
    
    getPageDivider() {
        oldPageCounter = pageCounter;
        return Container(
          padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 16),
          width: double.infinity,
          color: Colors.grey[300],
          child: Align(alignment: Alignment.topRight,child: Text('Page $pageCounter'),),
        );
      }
    
    void adjustPageCounter(element, int index) {
        if (element is Note || element is Snag){
          if (pageLengthLeft<165) resetPageLengthIncCounter();
          pageLengthLeft -= 165;
        }
        if (element is Photos) {
            if (pageLengthLeft < 250) resetPageLengthIncCounter();
            pageLengthLeft -= 250;
        }
      }
    
      void resetPageLengthIncCounter() { pageLengthLeft = pageLength; pageCounter++;}
Tags:

2

Answers


  1. 0

    The best way to do this is to use ListView.separated() like so:

    ListView.separated(
      cacheExtent: 20,
      itemBuilder: (context, index) => ListTile(
            title: Text('Item $index'),
          ),
      separatorBuilder: (context, index) => (index + 1) % 4 == 0
          ? Container(
              height: 10,
              color: Colors.pink,
            )
          : const Divider(),
      itemCount: 100)

    See screenshot

    Login or Signup to reply.
  2. 0

    You can try like any of bellow approach.

    Using simple listView

    class MyPageListView extends StatelessWidget {
  const MyPageListView({super.key});

  final int pageLength = 735;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: (pageLength),
        itemBuilder: (context, index) {
          return Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Row(
                children: [
                  Expanded(
                    child: ((index) % 4 == 0)
                        ? Container(
                            height: 40,
                            color: Colors.yellow,
                            child: index == 0
                                ? Center(child: Text('Page:  ${(index + 1)}'))
                                : Center(
                                    child:
                                        Text('Page:  ${((index) ~/ 4) + 1}')),
                          )
                        : Container(),
                  ),
                ],
              ),
              index == 0
                  ? Container()
                  : Row(
                      children: [
                        Expanded(
                          child: Container(
                            height: 40,
                            color: Colors.blue,
                            child: Text('item index: ${index + 1}'),
                          ),
                        ),
                      ],
                    )
            ],
          );
        },
      ),
    );
  }
}

    Using separated ListView

    class MyPageListView extends StatelessWidget {
  const MyPageListView({super.key});

  final int pageLength = 735;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.separated(
        itemCount: pageLength,
        itemBuilder: (context, index) => Column(
          children: [
            if (index == 0)
              Container(
                height: 40,
                width: MediaQuery.of(context).size.width,
                color: Colors.yellow,
                child: Center(
                  child: Text('Page: ${(index + 1)}'),
                ),
              ),
            SizedBox(
              height: 40,
              child: Text('Item ${index + 1}'),
            ),
          ],
        ),
        separatorBuilder: (context, index) => (index + 1) % 4 == 0
            ? Container(
                height: 40,
                color: Colors.yellow,
                child: Center(
                  child: Text('Page: ${((index) ~/ 4) + 1}'),
                ),
              )
            : Container(),
      ),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search