Flutter only top border with topleft and topright border

Question

I need to add only top border shadow with a top left / right border radius to a widget (preferably to a container / card). I don't need left / right / bottom borders. Please see the image below.

I tried with a container as below.

Container(
        child: _buildRemaining(context),
        decoration: BoxDecoration(
          border: Border(top: BorderSide(color: Colors.grey, width: 5)),
          borderRadius: const BorderRadius.only(
            topLeft: Radius.circular(30.0),
            topRight: Radius.circular(30.0),
          ),
        ),
      ),

With container it fails complaining that you can't set only a top border.

Then with a Card widget.

Card(
        elevation: 3,
        margin: const EdgeInsets.only(bottom: 5),
        shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(30.0),
            topRight: Radius.circular(30.0),
          ),
        ),
        child:_buildRemaining(context))

With elevation set on the Card, i can see the shadow, but top border is not visible enough. Still cannot remove the left / right / bottom borders.

Any suggestions please

Answer 1

Try this,

import "package:flutter/material.dart";

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(30.0),
          child: ClipRRect(
            borderRadius: BorderRadius.circular(5.0),
            child: Container(
              height: 100.0,
              margin: const EdgeInsets.only(top: 6.0),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.vertical(top: Radius.circular(30.0)),
                color: Colors.white,
                boxShadow: [
                  BoxShadow(
                    color: Colors.grey,
                    offset: Offset(0.0, 1.0), //(x,y)
                    blurRadius: 5.0,
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}