如何在 flutter 中圆角？
[英]How to rounded this corners in flutter?
问题描述
I have this design:
我有这样的设计：
I want to round the corners like is in the top of the container我想像在容器顶部一样圆角
This is my code:这是我的代码：
@override
Widget build(BuildContext context) {
return BackdropFilter(
filter: ImageFilter.blur(sigmaX: 2, sigmaY: 2),
child: Scaffold(
backgroundColor: Colors.transparent,
body: Center(
child: Padding(
padding: const EdgeInsets.all(32.0),
child: Container(
height: double.maxFinite,
width: 600,
decoration: BoxDecoration(
color: Color(0xffF6F6F6),
borderRadius: BorderRadius.all(
Radius.circular(20.0),
),
),
child: LayoutBuilder(
builder: (context, constraints) =>
Stack(
children: [
Align(
alignment: const Alignment(0, -.400),
child: Container(
child: Image.asset("lib/img/pomodoro.png",
width: 250,
height: 250,) //image size
),
),
Align(
alignment: Alignment.bottomCenter,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
...List.generate(
1,
(index) =>
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(width: 0,),
Image.asset("lib/img/google_logo.png",
width: 60,
height: 60,),
SizedBox(width: 10,),
Center(
child: Text("Continue with Google",
style: TextStyle(
fontSize: 25,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.bold,
),),
),
],
),
width: constraints.maxWidth,
height: constraints.maxHeight * .1,
color: index.isEven ?
Color(0xffF3F5F4):
Color(0xffF3F5F4),
),
),
...List.generate(
1,
(index) =>
GestureDetector(
onTap: () {
print("LogIn clicked");
Navigator.pushReplacement(
context, MaterialPageRoute(builder: (_) => LogInEnterEmailPassword()));
},
child: Container(
child: Center(child:
Text("Log In",
style: TextStyle(
fontSize: 25,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.bold,
color: Color(0xffF2F2F2)
),)),
width: constraints.maxWidth,
height: constraints.maxHeight * .1,
color: index.isEven ?
Color(0xffD94530):
Color(0xffD94530),
),
),
),
...List.generate(
1,
(index) =>
GestureDetector(
onTap: () {
print("Sign Up clicked");
Navigator.pushReplacement(
context, MaterialPageRoute(builder: (_) => SignUpNameEmailPassword()));
},
child: Container(
child: Center(child:
Text("Sign Up",
style: TextStyle(
fontSize: 25,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.bold,
color: Color(0xffF2F2F2)
),)),
width: constraints.maxWidth,
height: constraints.maxHeight * .1,
color: index.isEven ?
Color(0xff4994d9):
Color(0xff4994d9),
),
),
),
],
),
)
],
),
How to solve this design's issue?如何解决这个设计的问题？
I tried to copy and paste the first container to the last one but shows up this error:我尝试将第一个容器复制并粘贴到最后一个容器，但显示此错误：
Cannot provide both a color and a decoration\nTo provide both, use "decoration: BoxDecoration(color: color).
Thank you in advance先感谢您
2 个解决方案
解决方案1
1 已采纳 2022-08-12 17:08:34
A few things that I noticed我注意到的几件事
You can directly assign widgets inside the column without using a Listview builder.
您可以直接在列内分配小部件，而无需使用 Listview 构建器。Not sure if your UI has anything that will appear on top of the card if not you can use a Column widget in place of stack
不确定您的 UI 是否有任何会出现在卡片顶部的内容，如果没有，您可以使用 Column 小部件代替堆栈Also the height is set at double.infinity.
高度也设置为 double.infinity。
Now to answer the question, you can wrap the widget that you wish to crop with a ClipRRect and give it a borderRadius and it will crop to the required region现在回答这个问题，您可以用ClipRRect包装您希望裁剪的小部件，并给它一个borderRadius，它将裁剪到所需的区域
@override
Widget build(BuildContext context) {
return BackdropFilter(
filter: ImageFilter.blur(sigmaX: 2, sigmaY: 2),
child: Scaffold(
backgroundColor: Colors.transparent,
body: Center(
child: Padding(
padding: const EdgeInsets.all(32.0),
child: ClipRRect( //<---here
borderRadius :BorderRadius.circular(10),
child: Container(
height: MediaQuery.of(context).size.height,
width: 600,
decoration: BoxDecoration(
color: Color(0xffF6F6F6),
),
child: LayoutBuilder(
builder: (context, constraints) =>
Stack(
children: [
Align(
alignment: const Alignment(0, -.400),
child: Container(
child: Image.asset("lib/img/pomodoro.png",
width: 250,
height: 250,) //image size
),
),
Align(
alignment: Alignment.bottomCenter,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(width: 0,),
Image.asset("lib/img/google_logo.png",
width: 60,
height: 60,),
SizedBox(width: 10,),
Center(
child: Text("Continue with Google",
style: TextStyle(
fontSize: 25,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.bold,
),),
),
],
),
width: constraints.maxWidth,
height: constraints.maxHeight * .1,
color: Color(0xffF3F5F4),
),
GestureDetector(
onTap: () {
print("LogIn clicked");
Navigator.pushReplacement(
context, MaterialPageRoute(builder: (_) => LogInEnterEmailPassword()));
},
child: Container(
child: Center(child:
Text("Log In",
style: TextStyle(
fontSize: 25,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.bold,
color: Color(0xffF2F2F2)
),)),
width: constraints.maxWidth,
height: constraints.maxHeight * .1,
color: Color(0xffD94530),
),
),
GestureDetector(
onTap: () {
print("Sign Up clicked");
Navigator.pushReplacement(
context, MaterialPageRoute(builder: (_) => SignUpNameEmailPassword()));
},
child: Container(
child: Center(child:
Text("Sign Up",
style: TextStyle(
fontSize: 25,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.bold,
color: Color(0xffF2F2F2)
),)),
width: constraints.maxWidth,
height: constraints.maxHeight * .1,
color: Color(0xff4994d9),
),
),
],
),
)
],
),
)}
解决方案2
1 2022-08-12 17:10:38
Use clipBehavior: Clip.hardEdge on top Container.在容器顶部使用clipBehavior: Clip.hardEdge 。 Default clipBehavior is none.默认剪辑行为是无。
return BackdropFilter(
filter: ImageFilter.blur(sigmaX: 2, sigmaY: 2),
child: Scaffold(
backgroundColor: Colors.transparent,
body: Center(
child: Padding(
padding: const EdgeInsets.all(32.0),
child: Container(
clipBehavior: Clip.hardEdge,//here
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.