Как сделать эффект круговой пульсации на IconButton?

Question

Я хотел бы сделать кнопку с эффектом круговой ряби, используя Icon, я видел что-то в Интернете, но не могу этого сделать.Это не так просто, как должно быть.Попытка с этим кодом сейчас.

InkWell(
                      onTap: () {},
                      splashColor: Colors.red,
                      highlightColor: Colors.white,
                      child: new Icon(
                        FontAwesomeIcons.chevronCircleUp,
                        size: 100,
                      ),
                    )

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

Container(
                      margin: EdgeInsets.all(0.0),
                      height: 100.0,
                      width: 100.0,
                      child: new RaisedButton(
                          padding: EdgeInsets.all(0.0),
                          elevation: 100.0,
                          color: Colors.black,
                          highlightElevation: 0.0,
                          onPressed: () {},
                          splashColor: Colors.red,
                          highlightColor: Colors.red,
                          //shape: RoundedRectangleBorder e tutto il resto uguale
                          shape: CircleBorder(
                            side: BorderSide(color: Colors.black, width: 5),
                          ),
                          child: Icon(
                            FontAwesomeIcons.chevronCircleUp,
                            color: Colors.white.withOpacity(.8),
                            size: 80,
                          )),
                    ),

Спасибо за помощь

Answer 1

Я использовал FAB без фона.

FloatingActionButton(
  onPressed: () {},
  backgroundColor: Colors.transparent,
  mini: true,
  child: Icon(
    Icons.more_vert,
    color: Colors.white,
  ),
)

Answer 2

В первом фрагменте кода, который вы обернули в InkWell, эффект не является круговым, я думаю, вы хотите, чтобы эффект округлости.

Вы можете напрямую использовать IconButton вместо переносаэто с InkWell.

IconButton(
        icon: Icon(FontAwesomeIcons.chevronCircleUp),
        iconSize: 100,
        onPressed: () {},
        splashColor: Colors.blue,
      ),

Answer 3

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

Padding(
    padding: EdgeInsets.all(8.0),
    child: InkWell(
        customBorder: new CircleBorder(),
        onTap: () {},
        splashColor: Colors.red,
        child: new Icon(
            Icons.arrow_back,
            size: 24,
            color: Colors.black,
        ),
    ),
)

Эффект InkWell визуализирует квадрат, однако при использовании CircleBorder обрезает его до круглой формы.

По умолчанию эффект пытается заполнитьпространство, поэтому для изменения размера я добавил отступы со всех сторон, обрезая эффект.Если у вас по-прежнему возникают проблемы с тем, что эффект ряби вообще не рендерится, перенос кода в Material() должен решить большинство проблем или взглянуть на тему приложения.

Answer 4

Оберните ваш InkWell виджет Material и material виджет должен иметь цвет.

 Material( color: Colors.transparent,
 child: InkWell( onTap: () { print("tapped"); }, ) );