Flutter :how can add other widget under gridview after a certain number of index

Question

I am working with flutter gridview project in where i want show another widget after certain number of index.

how can i add widget after each 6 index of gridview

GridView.builder(shrinkWrap: true,gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2,childAspectRatio: MediaQuery.of(context).size.width /
            (MediaQuery.of(context).size.width*0.9),),
            physics: NeverScrollableScrollPhysics(),


            itemCount: widget.dicovervehiclelist.length,
            itemBuilder: (BuildContext context, int index) {
              return vehicleview(
                  widget.dicovervehiclelist[index], context,widget.dicovervehiclelist.length,index);
            }),

Answer 1

We can put business logic inside itemBuilder.

If the index+1 can be divided by 6, then we put another widget. In this case, I put Text("This is Separator") widget.

  Widget renderSeparator(){
    return Text("This is Separator");
  }

  Widget renderGrids() {
    Widget grids = GridView.builder(
      shrinkWrap: true,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        childAspectRatio: MediaQuery.of(context).size.width /
            (MediaQuery.of(context).size.width * 0.9),
      ),
      // physics: NeverScrollableScrollPhysics(),
      // itemCount: widget.dicovervehiclelist.length,
      itemCount: 20,
      itemBuilder: (BuildContext context, int index) {
        // return vehicleview(
        //   widget.dicovervehiclelist[index], 
        //   context,widget.dicovervehiclelist.length,
        //   index);
        return Container(
          child: Column(
            children: <Widget>[
              Text("Main Content"),
              if ((index+1) % 6 == 0)
                renderSeparator()
            ],
          )
        );
      },
    );
    return grids;
  }

- updated requirement by Hitanshu

thanks ...but its only below in that index which is ==5 and so on , i want show below the both index like 4 and 5 ..where crossAxisCount:1

If we want to implement combination of Grid and List View, we need to have

1. CustomScrollView
2. SliverGrid
3. SliverList
4. SliverChildListDelegate

Working Example App

You may look into repository. Github

And this is the full Code

import 'package:flutter/material.dart';

class GridViewListViewIndex extends StatelessWidget {

  final int newsFeedCount = 18;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Special after 6th'),
      ),
      body: Container(
        child: renderScrollArea(context),
      ),
    );
  }

  List<Widget> businessLogic(BuildContext context) {
    List<Widget> temp = [];
    for (var i = 1; i < newsFeedCount+1; i++) {
      if (i % 6 == 1) {
        temp.add(renderGrids(context));
      }
      if (i % 6 == 0) {
        temp.add(renderLists(context));
      }
    }
    return temp;
  }

  Widget renderScrollArea(BuildContext context) {
    final scrollableArea = CustomScrollView(
      slivers: businessLogic(context),

      // Below lines are neglected as we have more complex requirement
      // slivers: <Widget>[
      //   renderGrids(context),
      //   renderLists(context),
      //   renderGrids(context),
      //   renderLists(context),
      // ],
    );
    return scrollableArea;
  }

  Widget renderLists(BuildContext context) {
    final lists = SliverList(
      delegate: SliverChildListDelegate(
        [
          NewsFeed(),
        ],
      ),
    );
    return lists;
  }

  Widget renderGrids(BuildContext context) {
    final grids = SliverGrid(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
      ),
      delegate: SliverChildListDelegate(
        [
          NewsFeed(),
          NewsFeed(),
          NewsFeed(),
          NewsFeed(),
          NewsFeed(),
          NewsFeed(),
        ],
      ),
    );
    return grids;
  }
}

class NewsFeed extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white30,
        border: Border.all(
          color: Colors.black26,
          width: 1.0,
        ),
      ),
      padding: EdgeInsets.all(16.0),
      child: Center(
        child: Text("Content"),
      ),
    );
  }
}

Demo