How to make part of circle at background color in Flutter

Question

Like below

I used BoxDecoration in Container Widget. But I have not created

Container(
  height: 100,
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: const BorderRadius.vertical(
      bottom: Radius.circular(100),
    ),
  ),
),

I can't imagine UI in Flutter. Hope your advice. Thanks

Answer 1

Did you mean this? Part of the circle in the background and a widget in the foreground?

Source code:

Container(
  height: 50,
  width: 100,
  decoration: const BoxDecoration(
    color: Colors.deepOrangeAccent,
    borderRadius: BorderRadius.vertical(bottom: Radius.circular(100)),
  ),
  child: const Center(child: Text("Hey!")),
),

Output:

Answer 2

Option 1 : You can use Custom Painter. For example, you can check this article on it by Flutter Developers https://api.flutter.dev/flutter/rendering/CustomPainter-class.html

Option 2 : You can use Stack to add an Image in the Background as below

Stack(
          children: <Widget>[
            Image.asset(Res.background), // Your background goes here
            .... Other Widgets.....


          ],
        )