How do you add a border to a container with border radius?

Question

I want to add a bottom border to a container that has border radius along the top only. I can see that I cannot add borderRadius and border together in BoxDecoration property. How could I achieve the below look and feel using containers?

So far I can only achieve either rounded corners or have a bottom border, but not both. I want rounded corners across the top and a border across the bottom. Thank you very much!

                              Container(
                                padding: const EdgeInsets.all(20),
                                decoration: const BoxDecoration(
                                  color: Color(0xFFE9F6EB),
                                  // boxShadow: [BoxShadow(color: Colors.green, spreadRadius: 3)],
                                  borderRadius: BorderRadius.only(
                                      topLeft: Radius.circular(6), topRight: Radius.circular(6)),
                                  // border:
                                  //     Border(bottom: BorderSide(width: 3.0, color: Colors.green)),
                                ),
                                child: Row(children: [
                                  const Icon(Icons.check_circle,
                                      color: Color(0xFF69A258), size: 40),
                                  const SizedBox(width: 15),
                                  Column(
                                      mainAxisAlignment: MainAxisAlignment.start,
                                      crossAxisAlignment: CrossAxisAlignment.start,
                                      children: const [
                                        Text("Valid",
                                            style: TextStyle(color: Colors.green, fontSize: 18)),
                                        Text("Document successfully validated.")
                                      ])
                                ]),
                              ),

score 0 · Answer 1 · answered Mar 17 '22 at 00:24

0

By adding a boxshadow instead of a border with a spreadRadius of 0. Basically BoxShadow property followed the same concepts as css so this generator helped alot https://cssgenerator.org/box-shadow-css-generator.html

  boxShadow: [
     BoxShadow(
        color: Colors.green, spreadRadius: 0, offset: Offset(0, 3))
     ],

answered Mar 17 '22 at 00:24

Rach

63
6

I share you code https://stackoverflow.com/questions/58350235/add-border-to-a-container-with-borderradius-in-flutter in this link hope this will work for you Thanks – Vishal_VE Mar 17 '22 at 10:23

How do you add a border to a container with border radius?

1 Answers1