如何在flutter中设置SnackBarAction的飞溅颜色?

ve7v8dk2  于 2023-01-31  发布在  Flutter
关注(0)|答案(2)|浏览(131)

我正在尝试使用一个小吃店,我想改变涟漪效应的行动按钮。


但是我找不到属性splashColor或类似的东西。我真的很想改变蓝色飞溅的颜色为粉红色。这是可能的吗?
遵循以下代码:

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);
von4xj4u

von4xj4u1#

请尝试以下代码:

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);
cngwdvgl

cngwdvgl2#

实现这一点的一种方法是创建一个自定义SnackBar,方法是创建您自己的小部件并设置按钮的飞溅颜色样式:

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,
            ),
          ],
        ),
      ),
    );
  }
}

然后你可以这样使用它:

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);

相关问题