Лучший способ добавить тень и цветную рамку в ClipRRect, используя флаттер

Question

У меня есть простой ClipRRect виджет, как показано ниже:

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(10),
          child: GridTile(
        child: Image.network(
          imageUrl,
          fit: BoxFit.cover,
        ),
        footer: GridTileBar(
          backgroundColor: Colors.black87,
          leading: IconButton(
            icon: Icon(Icons.favorite),
            color: Theme.of(context).accentColor,
            onPressed: () {},
          ),
          title: Text(
            title,
            textAlign: TextAlign.center,
          ),
          trailing: IconButton(
            icon: Icon(Icons.shopping_cart),
            onPressed: () {},
            color: Theme.of(context).accentColor,
          ),
        ),
      ),
    );
  }

Я попытался добавить тень, обернув этот виджет другим Card виджетом, чтобы добавить тень с elevation как приведенный ниже код:

@override
  Widget build(BuildContext context) {
    return Card(
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10),
        ),
        elevation: 5,
          child: ClipRRect(
        borderRadius: BorderRadius.circular(10),
            child: GridTile(
          child: Image.network(
            imageUrl,
            fit: BoxFit.cover,
          ),
          footer: GridTileBar(
            backgroundColor: Colors.black87,
            leading: IconButton(
              icon: Icon(Icons.favorite),
              color: Theme.of(context).accentColor,
              onPressed: () {},
            ),
            title: Text(
              title,
              textAlign: TextAlign.center,
            ),
            trailing: IconButton(
              icon: Icon(Icons.shopping_cart),
              onPressed: () {},
              color: Theme.of(context).accentColor,
            ),
          ),
        ),
      ),
    );
  }

но я думаю, что это совсем не логично, потому что он показывает элемент сетки немного меньше, а также мне нужно добавить border в эту сетку ..

Надеюсь, это будет достаточно ясно ..

Answer 1

вы можете создать свой виджет, который будет принимать цвета тени и границы следующим образом, поскольку ClipRRect не может принимать цвета тени или границы, мы используем контейнер

конструктор clipRRect

ClipRRect({Key key, BorderRadius borderRadius: BorderRadius.zero, CustomClipper<RRect> clipper, Clip clipBehavior: Clip.antiAlias, Widget child}) 

.

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      width: 200,
      child: Card(
        elevation: 4.0,
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.only(
                bottomRight: Radius.circular(10),
                topRight: Radius.circular(10)),
            side: BorderSide(width: 2, color: Colors.green)),
        child: Center(
          child: Icon(
            Icons.movie,
            size: 150.0,
          ),
        ),
      ),
      decoration: BoxDecoration(
        boxShadow: [
          BoxShadow(
            color: Colors.white54,
            blurRadius: 5.0,
            offset: Offset(0, 10),
            spreadRadius: 0.5,
          ),
        ],
        borderRadius: BorderRadius.circular(12),
      ),
    );
  }
}