How to make double curve layout on Flutter

Question

How to achieve this dual-curved layout on Flutter? double.infinity for height and width. Never mind about the Text and color, any color will do. Thank you :)

Answer 1

You can use a Column with two Flexible widgets, both of them containing a Stack as a child, and two Container widgets in each. This way the containers will be on top of each other, and one of them can have a decoration with rounded corners:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(body: MyWidget()),
    );
  }
}

class MyWidget extends StatelessWidget {
  const MyWidget({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Column(children: [
      Flexible(
          flex: 1,
          child: Stack(children: [
            Container(
              color: Colors.blue,
            ),
            Container(
                decoration: const BoxDecoration(
              borderRadius:
                  BorderRadius.only(bottomRight: Radius.circular(100)),
              color: Colors.yellow,
            ))
          ])),
      Flexible(
        flex: 3,
        child: Stack(children: [
          Container(
            color: Colors.yellow,
          ),
          Container(
              decoration: const BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.only(topLeft: Radius.circular(100)),
          ))
        ]),
      )
    ]);
  }
}

The result will be like this: