flutter: how to get a rounded container in flutter?

Question

I'm new in flutter and I want to make a round container. I have done this but I don't know how to adjust the value to adapt it. Is there a better solution? Thanks in advance.

Widget Cube() {
  return Container(
    width: 70, height: 70,
    child: Container(
      width: 64, height: 64,
      decoration: BoxDecoration(
        color: CalendarColor.blue,
        borderRadius: BorderRadius.all(
          Radius.circular(32),
        )
      ),
    ),
  );
}

what I want is like this.

Try this : https://stackoverflow.com/questions/57777737/flutter-give-container-rounded-border — Manav, Sep 18 '20 at 07:45
can you make it clear what you mean by 'the value to adapt it' ? — Henok, Sep 18 '20 at 08:46
because I can only adjust the argument of Radius.circular() to make it looks like a circle. but I am not sure if it's exactly a circle.@Henok — byhuang1998, Sep 18 '20 at 09:23

score 1 · Answer 1 · answered Sep 18 '20 at 08:56

1

Container(
  decoration: BoxDecoration(
    shape: BoxShape.circle //This will make container round
  )
)

answered Sep 18 '20 at 08:56

camelCase1492

642
8
17

1

if i know the radius of the circle, how to set the height and width of the `container` then – byhuang1998 Sep 18 '20 at 09:22
Container(width: , height: ) – camelCase1492 Sep 18 '20 at 09:28

score 1 · Answer 2 · answered Sep 18 '20 at 08:58

Is there a better solution?

How about FoatingActionButton?

FloatingActionButton(
                backgroundColor: Colors.blue,
                elevation: 0.0,
                child: Text("15", style: TextStyle(color: Colors.white)),
                onPressed: () {})

score 1 · Answer 3 · answered Sep 18 '20 at 09:15

1

You can also use RawMaterialButton for more options like this:

RawMaterialButton(
      elevation: 2.0,
      fillColor:  Colors.black,
      shape: CircleBorder(),
      onPressed: () {});
      },
    )

answered Sep 18 '20 at 09:15

Bensal

3,316
1
23
35

flutter: how to get a rounded container in flutter?

3 Answers3