How to make a rounded border in just one side of a container in Flutter?

user_1943209 0
Viewed 104

I need to draw a rounded border in just one side of a container. The problem is that this approach:

Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.only(bottomLeft: Radius.circular(4.sp), bottomRight: Radius.circular(4.sp)),
        border: Border(bottom: BorderSide(width: 2.sp, color: Color.fromARGB(255, 237, 237, 237))),
      ),

throws this error:

flutter: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
flutter: The following assertion was thrown during paint():
flutter: A borderRadius can only be given for a uniform Border.
flutter: The following is not uniform:
flutter: BorderSide.color
flutter: BorderSide.width
flutter: BorderSide.style

How can I achieve that? Expected output: enter image description here

flutter
2 Answers

Add a container with Box Shadow like this:

Container(
decoration: BoxDecoration(
                boxShadow: [
                  BoxShadow(
                    color: Colors.grey.shade100,
                    spreadRadius: 1,
                    blurRadius: 0,
                    offset: Offset(0, 0), // changes position of shadow
                  ),
                ],
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(30.0),
                  topRight: Radius.circular(30.0),
                ),
              ),
)
user_52806890

Seems that it's not supported in Flutter yet.
You can do what you need through an stack (wash your hands after using this code, though):

Stack(children: [
        Container(
          width: double.infinity,
          height: 8.sp,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(4.sp)),
            border: Border.all(width: 2.sp, color: Color.fromARGB(255, 237, 237, 237)),
          ),
        ),
        Container(
          width: double.infinity,
          height: 3.sp,
          color: Colors.white, //or your bg color
        ),
      ])
user_19432090
Related