Question 242504 in Flutter Question posted in
The official Flutter documentation can be found here.

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

Tags:

2

Answers


  1. 0

    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.....


          ],
        )
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search