How to set splash color from SnackBarAction in flutter?-CodePudding

I'm trying to use a snackbar and i would like to change ripple effect in action button..

but i couldnt find a property splashColor or something like that. I really like to change the blue splash color to pink. Is it possible ?

Follow code bellow:

var snackBar = SnackBar(

              content: const Text("Task removed!"),
              duration: const Duration(seconds: 3),
              action: SnackBarAction(
                  textColor: Colors.purple,
                  label: "Desfazer",
                  onPressed: (() {
                    setState(() {
                      _taskList.insert(index, _lastItemRemoved);
                    });
                    _saveFile();
                  })));
          ScaffoldMessenger.of(context).showSnackBar(snackBar);

CodePudding user response：

Try the following code:

var snackBar = SnackBar(
  padding: const EdgeInsets.only(top: 14.0, bottom: 14.0),
  content: Row(
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    children: [
      const Text("Task removed!"),
      Transform(
        transform: Matrix4.translationValues(45.0, 0.0, 0.0),
        child: ElevatedButton(style: ElevatedButton.styleFrom(foregroundColor: Colors.pink[200], backgroundColor: Colors.indigo[900]), onPressed: () {}, child: const Text("Desfazer", style: TextStyle(color: Colors.purple))),
      ),
    ],
  ),
  duration: const Duration(seconds: 3),
);

ScaffoldMessenger.of(context).showSnackBar(snackBar);

CodePudding user response：

One way to achieve this would be to create a custom SnackBar by creating your own widget and styling the button's splash color:

class CustomSnackBar extends StatelessWidget {
  final String message;
  final Duration duration;
  final String undoText;
  final Function onUndo;

  CustomSnackBar({
    @required this.message,
    @required this.duration,
    @required this.undoText,
    @required this.onUndo,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        color: Colors.grey[800],
      ),
      child: Padding(
        padding: EdgeInsets.all(8),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Text(
              message,
              style: TextStyle(
                color: Colors.white,
                fontSize: 18,
              ),
            ),
            FlatButton(
              splashColor: Colors.pink,
              child: Text(
                undoText,
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 18,
                ),
              ),
              onPressed: onUndo,
            ),
          ],
        ),
      ),
    );
  }
}

Then you use it like this:

var snackBar = CustomSnackBar(
              message: 'Task removed!',
              duration: const Duration(seconds: 3),
              undoText: 'Desfazer',
              onUndo: (() {
                setState(() {
                  _taskList.insert(index, _lastItemRemoved);
                });
                _saveFile();
              }));
          ScaffoldMessenger.of(context).showSnackBar(snackBar);