Flutter: How to show a rounded corner layout on top the existing layout?

Question

I am trying to create a UI like below in flutter:

Using Expanded widget and it's flex property I have created the background layout. But I don't know how to create the rounded corner layout on top of that.

My Code:

@override
Widget build(BuildContext context) {
return Column(
    children: <Widget>[
      Expanded(
        flex: 1,
          child: Container(
            color: const Color(0xff32394a),
            child: Image.asset('assets/ic_logo_xx.png'),
          )
      ),
      Expanded(
        flex: 2,
          child: Container(
            color: Colors.white,
          )
      ),
    ]
);
}

I tried to show the rounded corner layout using ClipRRect but it is not showing on top of the existing layout.

Updated code with ClipRRect

@override
  Widget build(BuildContext context) {
    return Column(
        children: <Widget>[
          Expanded(
            flex: 1,
              child: Container(
                color: const Color(0xff32394a),
                child: Image.asset('assets/ic_logo_xx.png'),
              )
          ),
          Expanded(
            flex: 1,
            child: ClipRRect( //<---here
              borderRadius :BorderRadius.circular(10),
              child: Container(
                height: MediaQuery.of(context).size.height,
                width: 600,
                decoration: BoxDecoration(
                  color: Color(0xffF6F6F6),
                ),
              ),
            ),
          ),
          Expanded(
            flex: 2,
              child: Container(
                color: Colors.white,
              )
          ),
        ]
    );
  }

Result:

If you are just referring to the border, you can check [this](https://stackoverflow.com/q/47423297/10157127) — Md. Yeasin Sheikh, Jun 23 '23 at 15:27
@MDYeasinSheikh I am looking for rounded layout on top of existing layout — Sreejith Sree, Jun 23 '23 at 15:44
@MDYeasinSheikh I tried `ClipRRect`! A rounded corner layout is showing on the UI, but it is on the center, I need it on the top of the existing UI. I have updated the question with that information. — Sreejith Sree, Jun 23 '23 at 16:00

Mearaj · Accepted Answer · 2023-06-24T19:42:01.823

We don't necessarily need ClipRRect, we can use Stack, along with Animated Positioned and Container's BoxDecoration borderRadius property, for the app similar to the image you have shared.
Stack helps us laying out widget on top of one another, the last widget sits on top of previous widget. We can then use Animated Positioned widget for positioning.
Here is the code of my main.dart file, it's enough to get the result you want.
You can also view the code and result 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

Can you clear one of my doubt? How you are giving the background color of the below layout? https://i.stack.imgur.com/LOnmm.png The black marked region color I mean? — Sreejith Sree, Jul 19 '23 at 05:45
I am little confused. If you are speaking about the background shadow area then it's a BoxShadow property of [BoxDecoration](https://www.geeksforgeeks.org/flutter-boxdecoration-widget/). — Mearaj, Jul 19 '23 at 08:39
no, the outside region color. The main background is divided into 2, back on top and white on bottom. I need to know how you have given color for the below white section. Because it is not white now, I need to add white for that — Sreejith Sree, Jul 19 '23 at 09:28
You can re look at the code or try some ideas like, set the entire page background to white color from the root widget, then top widget with black-background and bottom widget with white background. You will figure it out if you play a little bit with it. In case if it's not solved, please do let me know. I will post the updated part here. — Mearaj, Jul 19 '23 at 09:45
I have an issue with the same UI in sign up Page. I tried a lot to fix, but no luck. Could you please have a look on the below question: https://stackoverflow.com/questions/76727156/flutter-ui-issues-with-sign-up-ui-lift-the-sign-up-box-to-top-and-add-a-box-to — Sreejith Sree, Jul 20 '23 at 06:19
@SreejithSree, thank you for informing and sharing it. I will have a look and most probably will come up with a solution. Either way, I will let you know :) — Mearaj, Jul 20 '23 at 06:22

Flutter: How to show a rounded corner layout on top the existing layout?

1 Answers1