Flutter: rounded corner container-CodePudding

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

CodePudding user response：

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.