Flutter: rounded corner container - flutter

Question

i am new to flutter. How can I indent the corners like in the picture? Thanks for answers.
exapmle

Answer 1

You should be checking if the problem you faced asked before. There are tons of sources related to this.
1- There are containers with one rounded border in the example video you provided. To achieve that, check the following code:
BoxDecoration(
color: color,
borderRadius: const BorderRadius.only(
bottomLeft: Radius.circular(100.0),
),
);
2- To have multiple containers on top of each other, you need to use the Stack widget like the following:
Stack(
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height * 0.90,
decoration: decoration(Colors.black),
),
Container(
height: MediaQuery.of(context).size.height * 0.70,
decoration: decoration(Colors.purple),
),
Container(
height: MediaQuery.of(context).size.height * 0.45,
decoration: decoration(Colors.pink),
),
Container(
height: MediaQuery.of(context).size.height * 0.20,
decoration: decoration(Colors.white),
),
],
),
Complete code main.dart:
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) => MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) => Scaffold(
backgroundColor: Colors.grey,
body: Stack(
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height * 0.90,
decoration: decoration(Colors.black),
),
Container(
height: MediaQuery.of(context).size.height * 0.70,
decoration: decoration(Colors.purple),
),
Container(
height: MediaQuery.of(context).size.height * 0.45,
decoration: decoration(Colors.pink),
),
Container(
height: MediaQuery.of(context).size.height * 0.20,
decoration: decoration(Colors.white),
),
],
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
tooltip: 'Add',
backgroundColor: Colors.white,
child: const Icon(
Icons.add,
color: Colors.black,
),
),
);
BoxDecoration decoration(Color color) => BoxDecoration(
color: color,
borderRadius: const BorderRadius.only(
bottomLeft: Radius.circular(100.0),
),
);
}
You can also access the complete source code through GitHub.
If you have further questions, please don't hesitate to write in the comments.