Flutter give container rounded border

Question

I'm making a Container(), I gave it a border, but it would be nice to have rounded borders.

This is what I have now:

Container(
      width: screenWidth / 7,
      decoration: BoxDecoration(
        border: Border.all(
          color: Colors.red[500],
        ),
      ),
      child: Padding(
        padding: EdgeInsets.all(5.0),
        child: Column(
          children: <Widget>[
            Text(
              '6',
              style: TextStyle(
                  color: Colors.red[500],
                  fontSize: 25),
            ),
            Text(
             'sep',
              style: TextStyle(
                  color: Colors.red[500]),
            )
          ],
        ),
      ),
    );

I tried putting ClipRRect on it, but that crops the border away. Is there a solution for this?

Evaldo Bratti · Accepted Answer · 2022-11-04T13:17:45.023

522

Try using the property borderRadius from BoxDecoration

Something like

Container(
  decoration: BoxDecoration(
    border: Border.all(
      color: Colors.red[500],
    ),
    borderRadius: BorderRadius.all(Radius.circular(20))
  ),
  child: ...
)

edited Nov 04 '22 at 13:17

answered Sep 03 '19 at 20:43

Evaldo Bratti

7,078
2
18
19

72

`BorderRadius.circular(20)` can be used as shorthand for `BorderRadius.all(Radius.circular(20))` – Exfridos Mar 26 '21 at 14:23

score 103 · Answer 2 · edited May 13 '21 at 06:09

To make it completely circle:

Container(
      decoration: BoxDecoration(
        shape: BoxShape.circle,
      ),
    )

To make it a circle at selected spots:

Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.only(
            topRight: Radius.circular(40.0),
            bottomRight: Radius.circular(40.0),
            topLeft: Radius.circular(40.0),
            bottomLeft: Radius.circular(40.0)),
      ),
      child: Text("hello"),
    ),

or

  Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(20)),
      ),
      child: ...
    )

krishnaacharyaa · Answer 3 · 2023-08-31T06:43:33.653

It can be done in several ways.

If you have a simple rounded corner to implement use ClipRRect, ClipOval
If you want to have more command over the rounded corneres use BoxDecoration inside the Container

ClipRRect

 ClipRRect(
    borderRadius: BorderRadius.circular(20),
    child: Container(height: 100, width: 100, color: Colors.orange)),

ClipOval

ClipOval(
    child: Container(height: 100, width: 100, color: Colors.orange)),

BoxDecoration

Border across all the corners

 Container(
   decoration: BoxDecoration(
   borderRadius: BorderRadius.circular(10),
   color: Colors.orange),
   height: 100,
   width: 100,
 );

Border in a particular corner

 Container(
    decoration: const BoxDecoration(
      borderRadius: BorderRadius.only(
       topLeft: Radius.circular(40),
       bottomRight: Radius.circular(40)),
      color: Colors.orange),
    height: 100,
    width: 100,
 ),

Border in a particular axis

  Container(
    decoration: const BoxDecoration(
      borderRadius: BorderRadius.horizontal(
        right: Radius.circular(60),
        ),
      color: Colors.orange),
    height: 100,
    width: 100,
  );

score 20 · Answer 4 · edited Oct 23 '21 at 10:36

You can use like this. If you want border for all the corners you can use like bellow.

Container(
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.all(
      Radius.circular(12.0),
    ),
  ),
),

If you want rounded borders for selected sides only you can use like below.

Container(
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(10),
      topRight: Radius.circular(10),
    ),
  ),
  child: Text('Text'),
),

score 13 · Answer 5 · edited Oct 21 '21 at 21:56

13

You can use ClipRRect Widget:

ClipRRect (
  borderRadius: BorderRadius.circular(5.0),
  child: Container(
                    height: 25,
                    width: 40,
                    color: const Color(0xffF8742C),
                    child: Align(
                        alignment: Alignment.center,
                        child: Text("Withdraw"))),
          )

edited Oct 21 '21 at 21:56

MendelG

14,885
4
25
52

answered Oct 06 '20 at 06:32

Adam Shelby

141
1
3

hsul4n · Answer 6 · 2020-08-11T09:45:13.470

10

Enhancement for the above answer.

Container(
  decoration: BoxDecoration(
    border: Border.all(
      color: Colors.red[500],
    ),
   borderRadius: BorderRadius.circular(20) // use instead of BorderRadius.all(Radius.circular(20))
  ),
  child: ...
)

edited Aug 11 '20 at 09:45

answered Aug 09 '20 at 17:15

hsul4n

491
7
15

7

Please don't post only code as answer, but also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes. – Mark Rotteveel Aug 10 '20 at 06:22
1

Sorry, I miss that. – hsul4n Aug 11 '20 at 09:47

score 6 · Answer 7 · answered Jun 04 '21 at 10:25

To make a complete circle just use shape property :

Container(
   padding: const EdgeInsets.all(4),
   decoration: BoxDecoration(
     shape: BoxShape.circle,
     color: Colors.black,
   ),                            
   child: Icon(
      Icons.add,
      size: 15.0,
      color: Colors.white,
     ),

SoftDev365 · Answer 8 · 2020-10-25T22:52:59.710

4

Container(
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(20.0),
      border: Border.all(
        color: HexColor('#C88A3D'),
        width: 3.0
      )
    ),
    child: Container(
      decoration: new BoxDecoration(borderRadius:
      BorderRadius.circular(20.0),
      color: Colors.white,),
    )
  ),

edited Oct 25 '20 at 22:52

answered Oct 25 '20 at 22:40

SoftDev365

71
3

score 2 · Answer 9 · edited Feb 10 '21 at 14:56

2

The key here is to add a BorderRadius:

Container(    
  decoration: BoxDecoration(
    border: Border.all(
      color: Colors.red[340],
     ),
     borderRadius: BorderRadius.all(Radius.circular(35),
   ),
   child: `enter code here`
),

edited Feb 10 '21 at 14:56

powerj1984

2,216
1
22
34

answered Feb 10 '21 at 09:37

Rohit Sharma

71
1
4

2

While this code may provide a solution to the question, it's better to add context as to why/how it works. This can help future users learn and eventually apply that knowledge to their own code. You are also likely to have positive-feedback/upvotes from users, when the code is explained. – Amit Verma Feb 10 '21 at 12:04

score 2 · Answer 10 · answered Apr 26 '21 at 20:55

2

just with put this at the Container

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.all(Radius.circular(30))
  ),
)

answered Apr 26 '21 at 20:55

Mohamed Reda

1,207
13
21

score 1 · Answer 11 · answered Jul 18 '22 at 11:06

1

Just simply use circle shape shape: BoxShape.circle in BoxDecoration. All code be like

Container(
  decoration: BoxDecoration(
    shape: BoxShape.circle
  ),
)

answered Jul 18 '22 at 11:06

Dinith

839
14
22

score 0 · Answer 12 · answered Apr 19 '22 at 14:33

Just to show another way to do the same thing.

Might be useful when needs to use InkWell around Container.

Material(
 shape: RoundedRectangleBorder(
   borderRadius: BorderRadius.circular(8),
 ),
 child: Container(
   height: 100,
   width: 150,
 ),
);

score 0 · Answer 13 · answered Oct 26 '22 at 07:17

SizedBox(
                            child: (Container(
                              decoration: BoxDecoration(
                                  color: Colors.grey,
                                  border: Border.all(
                                    color: Colors.grey,
                                  ),
                                  borderRadius:
                                      BorderRadius.all(Radius.circular(20))),
                              child: Column(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: [
                                  Row(
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceAround,
                                    crossAxisAlignment:
                                        CrossAxisAlignment.center,
                                    children: [
                                      Text('00'),

                                      Padding(
                                        padding: const EdgeInsets.fromLTRB(
                                            2.0, 0, 0, 0),
                                        child: Container(
                                          padding: const EdgeInsets.all(8),
                                          decoration: BoxDecoration(
                                            shape: BoxShape.circle,
                                            color: Colors.white,
                                          ),
                                          child: CustomText(
                                            "2",
                                            color: Colors.black,
                                          ),
                                        ),
                                      ), // text
                                    ],
                                  ),
                                ],
                              ),
                            )),
                            width: 60,
                          ),

score 0 · Answer 14 · answered Mar 29 '23 at 18:12

0

use decoration property to give radius in Container

 decoration: BoxDecoration(
        borderRadius: BorderRadius.only(
            topRight: Radius.circular(15),
            bottomLeft: Radius.circular(15)),
      ),

or 

Container(
  decoration: BoxDecoration(
    color: Colors.red,
    borderRadius: BorderRadius.all(
      Radius.circular(12.0),

    ),
  ),
),

answered Mar 29 '23 at 18:12

Rashmin Shingala

1
1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 04 '23 at 11:39

Flutter give container rounded border

14 Answers14

ClipRRect

ClipOval

BoxDecoration

Border across all the corners

Border in a particular corner

Border in a particular axis

Linked

Related