Custom Snackbar in Flutter

Question

I want to create a Snackbar in flutter. I want it to have borders on all 4 corners and have a border width with a different color only at bottom side.

Snackbar required :

I couldn't find a way to add both the properties together.

Can someone suggest a way to do it without using external flutter libraries or a Container inside content parameter of the snackbar widget?

I am able to create only one of the required properties separately.

1. I am able to apply border width at bottom with color.

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

SnackBar with bottom border width :

2. I am able to apply corner radius at all 4 corners.

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

Snackbar with border radius:

I want to apply both properties together but I am unable to it.

Answer 1

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

To use this snackbar just add customSnackbar widget to snackbar

const snackBar = SnackBar(
  content: customSnackbar(message: 'Yay! A SnackBar!'),
);

And to display the snackbar use scaffold key

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

I hope this will solve your problem