Change border radius only for inner edges of grids (SliverGridDelegateWithMaxCrossAxisExtent)

Question

Need rounded corner only for edges of inner grids. In the below image, rounded corner only for

1. BBC News -> (top+bottom) right
2. ABC News -> (top+bottom) left

If there are more than two columns, then second columns items should have rounded edges on both left and right

child: Container(
        alignment: Alignment.bottomCenter,
        padding: EdgeInsets.fromLTRB(10, 0, 10, 10),
        decoration: BoxDecoration(
          color: Colors.black,
          borderRadius: BorderRadius.only(
            topRight: const Radius.circular(8.0),
            bottomRight: const Radius.circular(8.0),
          ),
          image: DecorationImage(
            image: CachedNetworkImageProvider(station.image, scale: 1.0),
            colorFilter: ColorFilter.mode(
                Colors.white.withOpacity(0.3), BlendMode.dstATop),
            fit: BoxFit.fitWidth,
          ),
        ),
        child: Text(
          ""
        ),
      ),

Answer 1

One way is to generate BorderRadius based on the index and the column count;

ex:

BorderRadius _generateBorderRadius(final int index, final int columnCount) {
    if (index % columnCount == 1) {
      return BorderRadius.only(
            topRight: const Radius.circular(8.0),
            bottomRight: const Radius.circular(8.0),
          );
   } else if (index % columnCount == 0) {
      return BorderRadius.only(
            topLeft: const Radius.circular(8.0),
            bottomLeft: const Radius.circular(8.0),
          );
   } else {
       return BorderRadius.all(const Radius.circular(8.0));
   }
}

Hope this will be helpful.

Happy coding!