仅使用 topleft 和 topright 边框颤动顶部边框答案

【问题标题】：Flutter only top border with topleft and topright border仅使用 topleft 和 topright 边框颤动顶部边框
【发布时间】：2020-05-07 10:57:10
【问题描述】：

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

我尝试使用如下容器。

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

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

有什么建议

【问题讨论】：

标签： flutter dart

【解决方案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,
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

【讨论】：