[英]How to make a rounded border in just one side of a container in Flutter?
I need to draw a rounded border in just one side of a container.我需要在容器的一侧绘制圆形边框。 The problem is that this approach:
问题在于这种方法:
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(bottomLeft: Radius.circular(4.sp), bottomRight: Radius.circular(4.sp)),
border: Border(bottom: BorderSide(width: 2.sp, color: Color.fromARGB(255, 237, 237, 237))),
),
throws this error:抛出此错误:
flutter: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
flutter: The following assertion was thrown during paint():
flutter: A borderRadius can only be given for a uniform Border.
flutter: The following is not uniform:
flutter: BorderSide.color
flutter: BorderSide.width
flutter: BorderSide.style
How can I achieve that?我怎样才能做到这一点? Expected output:
预期 output:
Add a container with Box Shadow like this:像这样添加一个带有 Box Shadow 的容器:
Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.grey.shade100,
spreadRadius: 1,
blurRadius: 0,
offset: Offset(0, 0), // changes position of shadow
),
],
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30.0),
topRight: Radius.circular(30.0),
),
),
)
Seems that it's not supported in Flutter yet .似乎Flutter 还不支持它。
You can do what you need through an stack (wash your hands after using this code, though):您可以通过堆栈执行所需的操作(不过,在使用此代码后要洗手):
Stack(children: [
Container(
width: double.infinity,
height: 8.sp,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(4.sp)),
border: Border.all(width: 2.sp, color: Color.fromARGB(255, 237, 237, 237)),
),
),
Container(
width: double.infinity,
height: 3.sp,
color: Colors.white, //or your bg color
),
])
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.