flutteruser-interfaceflutter-container

How to make part of circle at background color in Flutter

Like below

enter image description here

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

Solution

  • 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:

    Image