can't set border radius on one side and border on one side flutter

Question

Why this code hides the child of the container and how to solve this problem. I can't set border radius on one side and border on one side or two sides

Container(
          child: Text(
            "Test",
            style: TextStyle(
              color: Theme.of(context).primaryColor,
              fontWeight: FontWeight.w800,
              fontFamily: "GE",
              fontSize: 30.0,
            ),
          ),
          width: double.infinity,
          height: 100.0,
          padding: EdgeInsets.symmetric(vertical: 100.0, horizontal: 100.0),
          decoration: BoxDecoration(
            color: Colors.grey[800],
            borderRadius: const BorderRadius.only(
              bottomLeft: const Radius.circular(50.0),
            ),
            border: Border(
              top:
                  BorderSide(width: 16.0, color: Colors.lightBlue.shade600),
              bottom:
                  BorderSide(width: 16.0, color: Colors.lightBlue.shade900),
            ),
          ),
        )

Answer 1

Because the vertical padding is the same height as the container which leaves no space for the text to show up.

You either need to reduce the padding or increase the container height.

=== update based on the comment:

You cannot add both border and borderRadius together, hence you're getting the error.

Since it appears that you only want to add a color at the bottom and the top, you can instead use a boxShadow with borderRadius:

decoration: BoxDecoration(
  color: Colors.grey[800],
  borderRadius: const BorderRadius.only(
    bottomLeft: const Radius.circular(50.0),
  ),
  boxShadow: [
    BoxShadow(color: Colors.lightBlue.shade900, spreadRadius: 3),
  ],
),

If you want to have a different Color at the top than the bottom, you have to work around that. One way you can do the trick is to offset the shadow so it acts as a bottom border color only. Then wrap the Container in a Column, and add another thin Container above it to act as the top border color such as:

Column(
  children: [
    // top border color
    Container(
      height: 5.0,
      color: Colors.lightBlue.shade600,
    ),
    Container(
      child: Text(
        "Test",
        style: TextStyle(
          color: Theme.of(context).primaryColor,
          fontWeight: FontWeight.w800,
          fontFamily: "GE",
          fontSize: 30.0,
        ),
      ),
      width: double.infinity,
      height: 100.0,
      decoration: BoxDecoration(
        color: Colors.grey[800],
        borderRadius: const BorderRadius.only(
          bottomLeft: const Radius.circular(50.0),
        ),
        boxShadow: [
          BoxShadow(
            color: Colors.lightBlue.shade900,
            spreadRadius: 3,
            // offset to act as bottom border color
            offset: Offset(0, 5),
          ),
        ],
      ),
    ),
  ],
),