Изменить радиус границы только для внутренних краев сеток (SliverGridDelegateWithMaxCrossAxisExtent)

Скругленный угол нужен только для краев внутренних сеток. На изображении ниже закругленный угол только для

  1. BBC News -> (вверху + внизу) справа
  2. ABC News -> (вверху + внизу) слева

Если столбцов больше двух, элементы второго столбца должны иметь закругленные края слева и справа.


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(
          ""
        ),
      ),

1 ответ

Один из способов - создать BorderRadius на основе индекса и количества столбцов;

пример:

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));
   }
}

Надеюсь, это будет полезно.

Удачного кодирования!

Другие вопросы по тегам