dart - Flutter list items in mixed layout for each two items

Question

I want to show the list items in mixed layout, where the first two items will be in full-width Card layout and the next two items will be in Grid layout.

so far I have tried to divide the items by separating even, add numbers, but am stuck at the next condition, am not sure whether it's a good approach to achieve this.

any suggestion would be appreciated.

ListView.builder(
            key: PageStorageKey("topNewsListKey"),
            itemCount: _newsList.length + (_hasMore ? 1 : 0),
            itemBuilder: (context, index) {
              if(index % 2 == 0) {
                print('even numbers $index');
                if( ) {  // condition to divide index 0,4,8...
                   return fullWidthCardLayout();
                } else {
                  return gridLayout();
                }
              } else {
                print('odd numbers $index');
                if() {  // condition to divide index 1,5,9...
                  return fullWidthCardLayout();
                } else {
                  return gridLayout();
                }
              }
            });

question from:https://stackoverflow.com/questions/65949171/flutter-list-items-in-mixed-layout-for-each-two-items

Answer 1

use ListView.separated and build the grid in separator builder with check the index if you want only to repeat after 2 or three widgets.

  ListView.separated(
      itemCount: 25,
      separatorBuilder: (BuildContext context, int index){
        if (index.isEven) {
          return YourGridWidget();
        } },                   
        itemBuilder: (BuildContext context, int index) { 
        return YourListTileWidget(); },
   )