Почему Flutter IconButton анимация показывает под строкой

Question

В моем приложении я установил IconButton для рендеринга по строке с цветным фоном. К сожалению, анимация пульсации при нажатии кнопки отображается под строкой (как показано на скриншоте). Как я могу сделать пульсацию по ряду?

class Card extends StatelessWidget {
final Issue issue;
Color _bgColor;

Card({this.issue}) {
  _bgColor = colorSwatch[issue.hashCode % colorSwatch.length];
}

@override
Widget build(BuildContext context) {
  return Container(
    margin: EdgeInsets.only(top: 12, left: 18, right: 18),
    padding: EdgeInsets.only(top: 8, bottom: 8),
    decoration: new BoxDecoration(
      color: _bgColor,
      border: new Border.all(color: _bgColor),
      borderRadius: BorderRadius.all(
          Radius.circular(10.0) 
          ),
    ),
    child: Row(children: [
      IconButton(
        padding: EdgeInsets.only(right: 16),
        icon: Icon(Icons.play_arrow, color: Colors.white, size: 48),
        tooltip: 'Start ${issue.issueName}',
        onPressed: () {},
      ),
      Expanded(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              padding: const EdgeInsets.only(bottom: 8),
              child: Text(
                issue.title,
                style: TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                ),
                softWrap: true,
              ),
            ),
            Text(
              issue.issueName,
              style: TextStyle(
                color: Colors.white,
              ),
            ),
          ],
        ),
      ),
    ]));
  }
}

Answer 1

Похоже, ошибка в Flutter Framework. Это происходит только с IconButton, без проблем с FlatButton.

Возможный обходной путь - установить BlendMode для умножения BlendMode.multiply .
попробуйте это:

Container(
          decoration: BoxDecoration(
              color: Colors.greenAccent[400],
              backgroundBlendMode: BlendMode.multiply),
          child: ListTile(
            leading: IconButton(icon: Icon(Icons.play_arrow), onPressed: () {}),
            title: Text("issue title"),
            subtitle: Text("description"),
          ),
        ),

Обновление
выпуск по github

Answer 2

Вы можете обернуть Row в InkWell, это даст вам ощупь.

Я удалил цвет фона контейнера, имел проблемы с отображением пульсации, а также изменил цвет текста на черный.

    @override
  Widget build(BuildContext context) {
    return Container(
        height: 100,
        margin: EdgeInsets.only(top: 12, left: 18, right: 18),
        padding: EdgeInsets.only(top: 8, bottom: 8),
        decoration: new BoxDecoration(
          color: Colors.transparent,
          border: new Border.all(color: Colors.orange),
          borderRadius: BorderRadius.all(Radius.circular(10.0)),
        ),
        child: InkWell(
          // added here
          onTap: () {},
          child: Row(children: [
            IconButton(
              padding: EdgeInsets.only(right: 16),
              icon: Icon(Icons.play_arrow, color: Colors.black, size: 48),
              tooltip: 'Start issue',
              onPressed: () {},
            ),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(
                    padding: const EdgeInsets.only(bottom: 8),
                    child: Text(
                      'issue.title',
                      style: TextStyle(
                        color: Colors.black,
                        fontWeight: FontWeight.bold,
                      ),
                      softWrap: true,
                    ),
                  ),
                  Text(
                    'issue.issueName',
                    style: TextStyle(
                      color: Colors.black,
                    ),
                  ),
                ],
              ),
            ),
          ]),
        ));
  }

Ссылки

Добавить рябь

Answer 3

Ripple всегда берет поверх виджетов материала.Так что, если есть что-то поверх виджета материала, под вашим виджетом вы увидите рябь.

Просто оберните ваш IconButton виджетом Материал с материалом, настроенным на использование типа «прозрачность», и он должен работать.

Вы можете использовать приведенный ниже универсальный виджет для добавления ряби к вашим виджетам.

class AddRipple extends StatelessWidget {
  final Widget child;
  final Function onTap;

  AddRipple({@required this.child, @required this.onTap});

 @override
 Widget build(BuildContext context) {
 return Stack(
     children: <Widget>[
     child,
      Positioned.fill(
        child: new Material(
            color: Colors.transparent,
            child: new InkWell(
              onTap: onTap,
            ))),
      ],
    );
  }
}

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

Answer 4

Волна является частью эффекта Material.Оберните ваш IconButton с помощью Material:

Material(
  color: _bgColor,
  child: IconButton(
    padding: EdgeInsets.only(right: 16),
    icon: Icon(Icons.play_arrow, color: Colors.white, size: 48),
    tooltip: 'Start ${issue.issueName}',
    onPressed: () {},
  ),
),

---

ОБНОВЛЕНИЕ

Чтобы быть более точным в вашей цели, вы можете заменить свой Containerс Material.

return Material(
  color: _bgColor,
  borderRadius: BorderRadius.all(Radius.circular(10.0)),
  child: Container(
     margin: EdgeInsets.only(top: 12, left: 18, right: 18),
     padding: EdgeInsets.only(top: 8, bottom: 8),
     backgroundBlendMode: BlendMode.multiply,
     child: Row(
     ...
  ),
);