InkWell не показывает эффект пульсации

Нажатие на контейнер запускает обработчик onTap() но не показывает никакого эффекта всплеска чернил.

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new InkWell(
          onTap: (){print("tapped");},
          child: new Container(
            width: 100.0,
            height: 100.0,
            color: Colors.orange,
          ),
        ),
      ),
    );
  }
}

Я попытался положить InkWell внутри Container но тщетно.

Ответ 1

Я думаю, что добавление цвета к контейнеру перекрывает эффект чернил

https://docs.flutter.io/flutter/material/InkWell/InkWell.html

Кажется, этот код работает

  body: new Center(
    child: new Container(
      child: new Material(
        child: new InkWell(
          onTap: (){print("tapped");},
          child: new Container(
            width: 100.0,
            height: 100.0,
          ),
        ),
        color: Colors.transparent,
      ),
      color: Colors.orange,
    ),
  ),

просто нажмите на средний квадрат.

Изменение: я нашел отчет об ошибке. https://github.com/flutter/flutter/issues/3782

Это на самом деле так, как и ожидалось, хотя мы должны обновить документы, чтобы сделать их более понятными.

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

Я хотел добавить виджет "MaterialImage", который также концептуально печатает свое изображение в материале, так что тогда брызги будут над изображением. У нас может быть MaterialDecoration, который делает нечто похожее на украшение. Или мы могли бы сделать материал сам по себе украшение. Прямо сейчас это берет цвет, но мы могли бы расширить это, чтобы взять целое художественное оформление. Пока не ясно, действительно ли совместим материал со спецификацией, чтобы иметь материал с градиентом, поэтому я не уверен, должны ли мы это делать.

В краткосрочной перспективе, если вам просто нужен обходной путь, вы можете поместить материал поверх контейнера с материалом, настроенным на использование типа "прозрачность", а затем поместить в него чернила.

--hixie

Ответ 2

Выход:

Шаг 1. Используйте Material в качестве родителя для вашего InkWell, иначе он не будет показывать волновые эффекты.

Шаг 2. Дайте color виджету Material, это будет цвет, который вы использовали в вашем Container.

Шаг 3. Не забудьте использовать onTap(), даже если вам не с чем обращаться.

Простой пример:

Widget myWidget() {
  return Material( // needed
    color: Colors.blue,
    child: InkWell(
      onTap: () {}, // needed
      child: Container(width: 200.0, height: 200.0),
    ),
  );
}

Ответ 3

InkWell() никогда не покажет эффект пульсации, пока вы не добавите

onTap : () {}

параметр внутри InkWell, когда он начинает прослушивать ваши краны только при указании этого параметра.

Ответ 4

Я столкнулся с этой же проблемой, пытаясь создать чередующийся цвет InkWell в ListView. В этом конкретном случае есть простое решение: обернуть альтернативы в контейнере, который использует в основном прозрачное изменение оттенка/яркости - анимация касания InkWell по-прежнему будет видна под ней. Нет необходимости в материале. Заметьте, что есть другие проблемы при попытке обойти это с помощью Materal - например, он переопределит DefaultTextStyle, который вы используете по умолчанию (он устанавливает AnimatedDefaultTextStyle), что является огромной болью.

Ответ 5

Лучше использовать виджет " Ink вместо любого другого виджета.

Вместо определения color внутри контейнера вы можете определить его в самом виджете Ink.

Ниже код будет работать.

Ink(
  color: Colors.orange,
  child: InkWell(
    child: Container(
      width: 100,
      height: 100,
    ),
    onTap: () {},
  ),
)

Ответ 6

   1. The InkWell widget must have a Material widget as an ancestor otherwise 
     it can't show effects.

      e.g -> Material(
                 child : InkWell(
                         child : .....

   2.you have to add "onTap" method to see the actual effects as like      
     Buttons {RaisedButton,FlatButton etc}.
     e.g -> Material(
                 child : InkWell(
                         onTap : (){}
                         child : .....

  let come to the main points see some examples below and try to understand 
  the actual concepts of InkWell

  1. In Below example Material is parent of InkWell with onTap but it still
     not working.
     Please try to understand the concept of it.
     you should provide some margin to container or other widget to show the
     effects .
     Actually below code working fine but we can't see because we did not 
     provide any margin or align so it has no space to show the effects.

      Widget build(BuildContext context) {
       return   Center(
       child: Material(
       child: new InkWell(
          onTap: () {
            print("tapped");
             },
              child: new Container(
                width: 100.0,
                height: 100.0,
                color: Colors.orange,
              ),


        ),
      ),
    );
   }

  2. Below example show InkWell effects only to upwards because we provide
     space {margin}.

     Widget build(BuildContext context) {
    return   Center(
     child: Material(
      child: new InkWell(
          onTap: () {
            print("tapped");
             },
              child: new Container(
                margin: EdgeInsets.only(top: 100.0),
                width: 100.0,
                height: 100.0,
                color: Colors.orange,
              ),


        ),
      ),
    );
   }


  3. Below exp. show the effects in all the page because
     center create margin from all the side . Centre align it child 
     widget from top, left,right and bottom.

    Widget build(BuildContext context) {
      return   Center(
      child: Material(
      child: new InkWell(
          onTap: () {
            print("tapped");
          },
            child: Center(
              child: new Container(
                width: 100.0,
                height: 100.0,
                color: Colors.orange,
              ),
            ),

          ),
         ),
        );
       }


    Happy Coding ...

Ответ 7

Вы можете достичь волнового эффекта, добавив OnTap.

onTap: (){print("clicked");}