In flutter How to design rounded border side in container in a particular area?

Question

I need this kinds of output

I try this code but this not provide rounded corner,

Container(
        width: double.infinity,
        height: 100,
        decoration: const BoxDecoration(
         // borderRadius: BorderRadius.all(Radius.circular(8)),
            color: Colors.white,
            border: Border(
              left: BorderSide(width: 1, color: Colors.black),
              bottom: BorderSide(width: 1, color: Colors.black),
              right: BorderSide(width: 1, color: Colors.black),
            )
      
         ),
       
      )

how to solve this problem?

I also use borderRadious property

borderRadius: BorderRadius.all(Radius.circular(8)),

But this will generate an error "A borderRadius can only be given for a uniform Border."

Saad · Answer 1 · 2023-03-13T10:04:58.910

2

You have to use BorderRadius.all

Container(
        width: double.infinity,
        height: 100,
        decoration: const BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(8)),
            color: Colors.white,
         ),
       
      )

you are getting the error becuase you are using both border and borderRadius, remove border and the error will be gone

edited Mar 13 '23 at 10:04

answered Mar 13 '23 at 07:52

Saad

539
2
19

I try this very first time but it gives me this error "A borderRadius can only be given for a uniform Border." – Noyon Mar 13 '23 at 08:35
This is not working . @Saad – Noyon Mar 13 '23 at 08:38
you can use the ClipRRect widget to create rounded borders for your container – AL MAMUN Mar 13 '23 at 08:55
include `clipBehavior: Clip.hardEdge,` on container – Md. Yeasin Sheikh Mar 13 '23 at 09:01
I need border circular, if i remove border where i found border. and also need border except top border @Saad – Noyon Mar 14 '23 at 08:29
I did not got any solution for it, you can check these links : https://github.com/flutter/flutter/issues/110249, https://stackoverflow.com/questions/69633371/give-a-borderradius-for-non-uniform-borders , https://stackoverflow.com/questions/66481358/how-can-i-have-a-three-sided-border-with-border-radius-around-a-container-in-flu, https://stackoverflow.com/questions/72993462/container-with-3-borders-and-radiuses , these may help you – Saad Mar 14 '23 at 10:43

In flutter How to design rounded border side in container in a particular area?

1 Answers1