如何在 flutter 中圆角？

Question

我有这样的设计：

我想像在容器顶部一样圆角

这是我的代码：

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

如何解决这个设计的问题？

我尝试将第一个容器复制并粘贴到最后一个容器，但显示此错误：

不能同时提供颜色和装饰\n要同时提供两者，请使用 "decoration: BoxDecoration(color: color).

先感谢您

Answer 1

我注意到的几件事

1. 您可以直接在列内分配小部件，而无需使用 Listview 构建器。

2. 不确定您的 UI 是否有任何会出现在卡片顶部的内容，如果没有，您可以使用 Column 小部件代替堆栈

3. 高度也设置为 double.infinity。

现在回答这个问题，您可以用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),
                                      ),
                                ),
                              ],
                            ),
                          )
                        ],
                      ),

        
            )}

Answer 2

在容器顶部使用clipBehavior: Clip.hardEdge 。 默认剪辑行为是无。

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