0

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

enter image description here


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(
          ""
        ),
      ),
Vjy
  • 2,106
  • 3
  • 22
  • 34

1 Answers1

0

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!

pasanbuddhika
  • 516
  • 1
  • 4
  • 12