颤振| 边界半径不适用于Android

Question

I want to find out why border radius wouldn't apply top half of the widget on Android.
Here is the image on Android

However on the web, it's working like image below.

Does anyone know why?

Code

    Center(
      child: Card(
        elevation: 1.5,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(16.0))),
        child: SizedBox(
          width: 250.0,
          height: 150.0,
          child: Column(
            children: <Widget>[
              Container(
                width: double.infinity,
                height: 60.0,
                color: Colors.pink[200].withOpacity(0.95),
                child: Center(
                  child: Text('Felicity Jones'),
                ),
              ),
              Expanded(
                child: Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 8.0),
                  child: Center(
                    child: Text('9:15'),
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    ),

Answer 1

If you observe carefully by changing the opacity of the color for time being to:

color: Colors.pink[200].withOpacity(0.2),

You'll see that the top left and top right corners are cut-off and not filled by the color:

In order to avoid this, use Card widget's clipBehavior: Clip.antiAlias, property that covers all corners of the card with the given color. Here's the updated result:

Hope this answers your question.

Answer 2

You can try the following:

Center(
    child:
      Card(
          elevation: 1.5,
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(16.0))),
          child: SizedBox(
            width: 250.0,
            height: 150.0,
            child: Column(
              children: <Widget>[
                Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.vertical(
                        top: new Radius.circular(16.0)
                        ),
                    color: Colors.pink[200].withOpacity(0.95),
                  ),
                  width: double.infinity,
                  height: 60.0,
                  child: Center(
                    child: Text('Felicity Jones'),
                  ),
                ),
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 8.0),
                    child: Center(
                      child: Text('9:15'),
                    ),
                  ),
                )
              ],
            ),
          ),
        ),
      ),

Note that the color was moved inside the BoxDecoration as it will fail to compile otherwise. I kept the shape attribute so that the lower part of the card will be rounded as well. You could tinker with that and remove it, if necessary.

Answer 3

Edit: In your case like @Darshan mentioned you can just set clipBehavior: Clip.antiAlias in Card widget.

You can use also use ClipRRect to force the child to have the given border radius, if you don't have clipBehavior .

Center(
  child: Card(
    elevation: 1.5,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(16.0),
    ),
    child: ClipRRect(
      borderRadius: BorderRadius.circular(16.0),
      child: SizedBox(
        width: 250.0,
        height: 150.0,
        child: Column(
          children: <Widget>[
            Container(
              width: double.infinity,
              height: 60.0,
              color: Colors.pink[200].withOpacity(0.95),
              child: Center(
                child: Text('Felicity Jones'),
              ),
            ),
            Expanded(
              child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: 8.0),
                child: Center(
                  child: Text('9:15'),
                ),
              ),
            )
          ],
        ),
      ),
    ),
  ),
)