Flutter 仅带有左上角和右上角的上边框

Question

我只需要向小部件（最好是容器/卡片）添加具有左上/右上边框半径的顶部边框阴影。我不需要左/右/下边框。请看下图。

我尝试使用如下容器。

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),
          ),
        ),
      ),

对于容器，它无法抱怨您不能只设置顶部边框。

然后使用 Card 小部件。

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))

在卡片上设置高程后，我可以看到阴影，但顶部边框不够明显。仍然无法删除左/右/下边框。

任何建议请

Answer 1

尝试这个，

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,
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Answer 2

decoration: BoxDecoration(
      border: Border(
        top: BorderSide(width: 16.0, color: Colors.lightBlue.shade600),
        bottom: BorderSide(width: 16.0, color: Colors.lightBlue.shade900),
      ),
      color: Colors.white,
    ),