Flutter 中的自定义 Snackbar

Question

我想在 flutter 中创建一个 Snackbar。我希望它的所有 4 个角都有边框，并且仅在底部具有不同颜色的边框宽度。

我找不到将这两个属性添加在一起的方法。

有人可以建议一种不使用外部颤动库或小吃栏小部件内容参数内的容器来实现此目的的方法吗？

我只能单独创建所需的属性之一。

1. 我可以用颜色在底部应用边框宽度。

var snackBar = SnackBar(
      behavior: SnackBarBehavior.floating,
      shape: const Border(
          bottom: BorderSide(
              color: Colors.green
              width: 4,
      content: Flex(
        direction: Axis.horizontal,
        children: [
          Padding(
            padding:
                const EdgeInsets.only(right: 12),
            child:
                Icon(Icons.add),
          ),
          Text(
            "Toast message",
          ),
        ],
      ),
    );

2. 我可以在所有 4 个角上应用圆角半径。

 var snackBar = SnackBar(
      behavior: SnackBarBehavior.floating,
      shape: const RoundedRectangleBorder(
        borderRadius: 8,
      ),
      content: Flex(
        direction: Axis.horizontal,
        children: [
          Padding(
            padding:
                const EdgeInsets.only(right: 12),
            child:
               Icon(Icons.add)
          ),
        Text(
           "Toast message",       
          ),
        ],
      ),
    );

我想同时应用这两个属性，但我无法做到。

Answer 1

您可以自由制作自己的小部件，并将该小部件放入 Snackbar 小部件中。

1.创建自定义小吃栏

Widget customSnackbar({
  required String message,
  Color backgroundColor = Colors.black,
  Color borderColor = Colors.red,
  double borderWidth = 4.0,
  double cornerRadius = 8.0,
}) {
  return Container(
    padding: EdgeInsets.symmetric(horizontal: 24.0, vertical: 12.0),
    decoration: BoxDecoration(
      color: backgroundColor,
      borderRadius: BorderRadius.circular(cornerRadius),
      border: Border(
        bottom: BorderSide(color: borderColor, width: borderWidth),
        left: BorderSide(color: Colors.transparent),
        right: BorderSide(color: Colors.transparent),
        top: BorderSide(color: Colors.transparent),
      ),
    ),
    child: Text(
      message,
      style: TextStyle(color: Colors.white),
    ),
  );
}

2.将自定义小部件放入 SnackBar

将这个自定义的Snackbar小部件放到flutter的SnackBar中

void showCustomSnackbar(BuildContext context, String message) {
  final snackBar = SnackBar(
    backgroundColor: Colors.transparent, 
    elevation: 0, // this is for removing a shadow
    content: customSnackbar(message: message),
  );

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