Add border to a Container with borderRadius in Flutter

Question

Container(
      child: Text(
          \'This is a Container\',
          textScaleFactor: 2,
          style: TextStyle(color: Colors.black),
      ),

      decoratio         


        

Answer 1

I think an easier way inspired by @pablo 's answer would be to just make a boxShadow with and offset but without any blur.

decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.vertical(
          top: Radius.circular(10),
        ),
        boxShadow: [
          // to make elevation
          BoxShadow(
            color: Colors.black45,
            offset: Offset(2, 2),
            blurRadius: 4,
          ),
          // to make the coloured border
          BoxShadow(
            color: Colors.blue,
            offset: Offset(0, 4),
          ),
        ],
      ),

The decoration above will give us an elevated box which has a blue border in the bottom. Another benefit of this approcah is that you can use it with

borderRadius: BorderRadius.circular(num)

Which means you can have a container with all rounded sides + a colored border.

Please note that the coloured border comes under the original shadow. This is done to prevent the elevation color from darkening the border.