Flutter：如何在现有布局之上显示圆角布局

我们不一定需要ClipRRect，对于与您共享的图像类似的应用程序，我们可以使用Stack以及Animated Positioned和Container's BoxDecoration borderRadius属性.
Stack帮助我们一个接一个地布局小部件，最后一个小部件位于前一个小部件的顶部.然后我们可以使用动画定位小工具进行定位.
以下是我的main.dart文件的代码，它足以获得您想要的结果.
您还可以查看代码和结果here

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          SizedBox(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            child: Stack(children: <Widget>[
              Positioned(
                  child: Container(
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height * 0.4,
                color: const Color(0xff32394a),
                child: Center(
                    child: MaterialButton(
                        onPressed: () {},
                        child: const Text(
                          'Applogo',
                          style: TextStyle(fontSize: 32),
                        ))),
              )),
              Positioned(
                  top: MediaQuery.of(context).size.height * 0.4 - 64,
                  left: 32,
                  right: 32,
                  child: Column(
                    children: [
                      Container(
                        width: MediaQuery.of(context).size.width - 64,
                        decoration: BoxDecoration(
                          color: const Color(0xffF6F6F6),
                          borderRadius: BorderRadius.circular(16),
                        ),
                        padding: const EdgeInsets.all(32),
                        child: Column(
                          children: [
                            Container(
                              margin: const EdgeInsets.only(bottom: 32),
                              child: const Text(
                                'Sign In',
                                style: TextStyle(fontSize: 32),
                              ),
                            ),
                            Container(
                              margin: const EdgeInsets.only(bottom: 16),
                              child: TextField(
                                decoration: InputDecoration(
                                    border: OutlineInputBorder(
                                        borderRadius:
                                            BorderRadius.circular(16)),
                                    hintText: 'Email / User name',
                                    contentPadding: const EdgeInsets.only(
                                        left: 16,
                                        right: 16,
                                        top: 8,
                                        bottom: 8)),
                              ),
                            ),
                            Container(
                              margin: const EdgeInsets.only(bottom: 16),
                              child: TextField(
                                decoration: InputDecoration(
                                    border: OutlineInputBorder(
                                        borderRadius:
                                            BorderRadius.circular(16)),
                                    hintText: 'Password',
                                    contentPadding: const EdgeInsets.only(
                                        left: 16,
                                        right: 16,
                                        top: 8,
                                        bottom: 8)),
                              ),
                            ),
                            Row(
                              children: [
                                Checkbox(value: false, onChanged: (_) {}),
                                const Text("Remember Me")
                              ],
                            ),
                            Row(
                              mainAxisSize: MainAxisSize.max,
                              children: [
                                Expanded(
                                  child: ElevatedButton(
                                    onPressed: () {},
                                    style: ElevatedButton.styleFrom(
                                      backgroundColor: const Color(0x9932394a),
                                    ),
                                    child: const Text("Sign In",
                                        style: TextStyle(
                                          color: Colors.white,
                                        )),
                                  ),
                                ),
                              ],
                            ),
                            const SizedBox(
                              height: 16,
                            ),
                            const Row(
                              mainAxisSize: MainAxisSize.max,
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Text("Forgot Username?"),
                                Text("Forgot Password?"),
                              ],
                            )
                          ],
                        ),
                      ),
                      Container(
                        margin: const EdgeInsets.only(top: 32),
                        child: const Text(
                          "Don't have an account? Sign Up",
                          style: TextStyle(color: Colors.black),
                        ),
                      )
                    ],
                  )),
            ]),
          ),
        ],
      ),
    );
  }
}

Here is the screenshot个