Как добавить волновой эффект в PhysicalModel во флаттере

Question

Я пытался создать кнопку входа в систему, которая будет анимирована при нажатии на нее. Но при нажатии на кнопку (в PhysicalModel) волновой эффект отображается только в тексте логина, но не полностью в физической модели. Как добавить рябь в PhysicalModel или удалить эффект ряби из MaterialButton?

PhysicalModel(
            color: Colors.teal,
            borderRadius: BorderRadius.circular(50.0),
            child: MaterialButton(
                   key: _globalKey,
                   child: Text("Login"),
                   onPressed: () {
                        setState(() {
                             if (_state == 0) {
                                    animateButton();
                             }
                        });
                   },
                   elevation: 4.0,
                   minWidth: _width,
                   height: 20.0,
            ),
)

Answer 1

Если вы хотите удалить всплеск цвета MaterialButton просто измените эти цвета на прозрачные.

  MaterialButton(
    splashColor: Colors.transparent,
    highlightColor: Colors.transparent,

Если вы хотите волновой эффект для вашего PhysicalModel:

    PhysicalModel(
                  color: Colors.teal,
                  borderRadius: BorderRadius.circular(50.0),
                  child: RawMaterialButton(
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(50.0)),
                    padding: EdgeInsets.symmetric(vertical: 15.0, horizontal: 30.0),
                    materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                    child: Text("Login"),
                    onPressed: () {
                      setState(() {});
                    },
                    elevation: 4.0,
                  ),
                )

Answer 2

Вот мое решение: вы можете просто установить прозрачный цвет вашей физической модели, а цвет виджета Ink установить на то, что вам нужно для вашего дочернего виджета:

      PhysicalModel(
                        borderRadius: BorderRadius.circular(16),
                        shadowColor: Colors.grey.withAlpha(10),
                        elevation: 16,
                        color: Colors.transparent,
                        child: Ink(
                            color: Theme.of(context).scaffoldBackgroundColor,
                            child:

Это просто, и тогда вы можете получить эффект чернильницы, а также сохранить свой цвет.

Answer 3

Добавление материала Touch Ripples

Flutter предоставляет виджет InkWell для достижения этого эффекта.

Определение:

Прямоугольная область материала, который реагирует на прикосновение.

Также: виджет InkWell должен иметь виджет Материал в качестве предка. Виджет Материал - это место, где чернильные реакции на самом деле окрашены. Это соответствует предпосылке дизайна материала, где Материал - это то, что фактически реагирует на прикосновения, распространяя чернила.

Направления

1. Создайте виджет, который мы хотим нажать

2. Оберните его в виджет InkWell для управления обратными вызовами и анимацией пульсаций

       InkWell(
           // When the user taps the button, show a snackbar
           onTap: () {
             Scaffold.of(context).showSnackBar(SnackBar(
               content: Text('Tap'),
             ));
           },
           child: PhysicalModel(
             color: Colors.teal,
             borderRadius: BorderRadius.circular(50.0),
             child: MaterialButton /*or a FlatButton */(
               key: _globalKey,
               child: Text("Login"),
               onPressed: () {
                 setState(() {
                   if (_state == 0) {
                     animateButton();
                   }
                 });
               },
               elevation: 4.0,
               minWidth: _width,
               height: 20.0,
             ),
           )),