Виджет Flutter InkWell не отображается через градиент и цвет контейнера - PullRequest
Новая
       35

Виджет Flutter InkWell не отображается через градиент и цвет контейнера

0 голосов
/ 21 апреля 2020

РЕДАКТИРОВАТЬ: я пытался обернуть Container в виджет Material и переместить свойство color в виджет Material, но я помещаю кучу ResourceCards в горизонтальный ListView, так кажется, что цвет из виджета Material только заполняет пространство вокруг ResourceCard.

Я создал свой собственный виджет ResourceCard во Флаттере. Я обернул его GestureDetector для обнаружения касаний, но я хочу показать какую-то обратную связь или эффект, чтобы уведомить пользователя о том, что он был прослушан. Я решил заменить GestureDetector виджетом InkWell, но я не вижу эффекта spla sh через линейный градиент и цвет контейнера, поэтому я просто вернул его обратно к GestureDetector. Я видел другие посты с потенциальными обходными путями, но ни один из них не работает с линейным градиентом и цветом. Вот как выглядит один из виджетов ResourceCard: https://imgur.com/dg3fu9e. Вот код виджета: 

class ResourceCard extends StatelessWidget {
  ResourceCard({
    @required this.colour,
    @required this.margin,
    @required this.cardText,
    this.onPress,
    @required this.cardCaption,
    @required this.paddingText,
  });

  final Color colour;
  final String cardText;
  final Function onPress;
  final EdgeInsets margin;
  final String cardCaption;
  final EdgeInsets paddingText;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onPress,
      child: Column(
        children: <Widget>[
          Container(
            width: 75.0,
            height: 75.0,
            child: Center(
              child: Text(
                cardText,
                style: TextStyle(
                  color: Colors.white,
                  fontFamily: 'Circular STD',
                  fontWeight: FontWeight.w900,
                  fontSize: 20.0,
                ),
              ),
            ),
            margin: margin,
            decoration: BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.topRight,
                end: Alignment.bottomLeft,
                colors: [colour, Colors.blue],
              ),
              color: colour,
              borderRadius: BorderRadius.circular(15.0),
              boxShadow: [
                BoxShadow(
                  color: Color.fromRGBO(0, 0, 0, 0.5),
                  blurRadius: 10.0,
                  spreadRadius: 1.0,
                )
              ],
            ),
          ),
          Padding(
            padding: paddingText,
            child: Text(
              cardCaption,
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.white70,
                fontWeight: FontWeight.w300,
                fontSize: 10.0,
                fontFamily: 'Circular STD',
              ),
            ),
          ),
        ],
      ),
    );
  }
}

1 Ответ

1 голос
/ 22 апреля 2020

Самое простое решение - использовать виджет Material в качестве родителя для InkWell и установить его color на прозрачный. InkWell должен быть установлен только на карте (в вашем примере GestureDetector установлен на весь столбец). Чтобы соответствовать точной форме, InkWell получает те же borderRadius, что и ваша карта (контейнер)

Вот решение вашего метода сборки. Я поместил виджет InkWell и Materal в качестве родителя виджета Center 

@override
Widget build(BuildContext context) {
  return Column(
    children: <Widget>[
      Container(
        width: 75.0,
        height: 75.0,
        child: Material(
          color: Colors.transparent,
          child: InkWell(
            onTap: onPress,
            borderRadius: BorderRadius.circular(15.0),
            splashColor: Colors.grey[500],
            child: Center(
              child: Text(
                cardText,
                style: TextStyle(
                  color: Colors.white,
                  fontFamily: 'Circular STD',
                  fontWeight: FontWeight.w900,
                  fontSize: 20.0,
                ),
              ),
            ),
          ),
        ),
        ...
...