put a border around a shape - flutter

Question

i made this code:

Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Container(
                          height: 40.0,
                          width: MediaQuery.of(context).size.width / 2 - 20,
                          decoration: BoxDecoration(
                            color: Colors.red,
                            borderRadius: BorderRadius.only(
                              topLeft: Radius.circular(15.0),
                              topRight: Radius.circular(15.0),
                            ),
                          ),
                        ),
                        Container(
                          height: 80.0,
                          width: MediaQuery.of(context).size.width - 40,
                          decoration: BoxDecoration(
                            color: Colors.red,
                            borderRadius: BorderRadius.only(
                              bottomLeft: Radius.circular(15.0),
                              bottomRight: Radius.circular(15.0),
                              topRight: Radius.circular(15.0),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ],
                ),

That is the result of the code:

How can I put a border, around the red shape?

I tried adding the code inside a container and putting a Border.all() but of course it doesn't work

I hope I have been clear, Thank you :)

score 1 · Accepted Answer · answered Jul 15 '22 at 10:24

One way could be to stack two of the same shapes on top of each other with one of them smaller than the other. Something like this:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: Padding(
            padding: const EdgeInsets.all(18.0),
            child: Stack(
              children: [
                Column(
                  mainAxisSize: MainAxisSize.min,
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Container(
                      height: 40.0,
                      width: MediaQuery.of(context).size.width / 2 - 20,
                      decoration: const BoxDecoration(
                        color: Colors.black,
                        borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(15.0),
                          topRight: Radius.circular(15.0),
                        ),
                      ),
                    ),
                    Container(
                      height: 80.0,
                      width: MediaQuery.of(context).size.width - 40,
                      decoration: const BoxDecoration(
                        color: Colors.black,
                        borderRadius: BorderRadius.only(
                          bottomLeft: Radius.circular(15.0),
                          bottomRight: Radius.circular(15.0),
                          topRight: Radius.circular(15.0),
                        ),
                      ),
                    ),
                  ],
                ),
                Padding(
                  padding: const EdgeInsets.all(2.0),
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Container(
                        height: 40.0,
                        width: MediaQuery.of(context).size.width / 2 - 24,
                        decoration: const BoxDecoration(
                          color: Colors.red,
                          borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(13.0),
                            topRight: Radius.circular(13.0),
                          ),
                        ),
                      ),
                      Container(
                        height: 76.0,
                        width: MediaQuery.of(context).size.width - 44,
                        decoration: const BoxDecoration(
                          color: Colors.red,
                          borderRadius: BorderRadius.only(
                            bottomLeft: Radius.circular(13.0),
                            bottomRight: Radius.circular(13.0),
                            topRight: Radius.circular(13.0),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

Result:

But it's not the ideal solution. And I see it actually then shows a black line between the containers depending on the screen size. There's actually also a small line visible in your screenshot.

Ideally you don't want to have it split in two containers. I'm guessing some custom Paint should be able to do it but I'm not that familiar with it.

score 1 · Answer 2 · answered Jul 15 '22 at 10:31

https://pub.dev/packages/dotted_border

Just use this flutter package and decorate your widget with border(dotted, linear)

   Container(
        height: _height * 0.56,
        width: _width * 0.87,
        decoration: DottedDecoration(
            shape: Shape.box,
            borderRadius: BorderRadius.circular(12.0),
          strokeWidth: 2.0,
          color: appColor,
          dash: [5,6],
        ),
        child: Your Wdiget(),
         
        )

score 0 · Answer 3 · answered Jul 15 '22 at 09:59

0

You need to add a decoration to all the containers you used to create that shape and create a border there (see How can I add a border to a widget in Flutter?).

Just don't user border.all but set only the sides where you want the border to appear (see https://api.flutter.dev/flutter/painting/Border-class.html).

answered Jul 15 '22 at 09:59

Axel

311
2
9

Can you include the code-snippet – Md. Yeasin Sheikh Jul 15 '22 at 09:59
if i add a border i have this error: "A borderRadius can only be given for a uniform Border." – CastoldiG Jul 15 '22 at 10:08
@CastoldiG I'm not sure what it could be, but take a look at this https://stackoverflow.com/questions/58812778/a-borderradius-can-only-be-given-for-uniform-borders try to remove border radius – Axel Jul 15 '22 at 10:13

score 0 · Answer 4 · answered Jul 15 '22 at 10:00

You can set border of Containers with specific sides like this:

decoration: const BoxDecoration(
                    color: Colors.red,
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(15.0),
                      topRight: Radius.circular(15.0),
                    ),
                    border: Border(
                      left: BorderSide(
                        //                   <--- left side
                        color: Colors.black,
                        width: 3.0,
                      ),
                      top: BorderSide(
                        //                    <--- top side
                        color: Colors.black,
                        width: 3.0,
                      ),
                    ),

i have got this error: "A borderRadius can only be given for a uniform Border." — CastoldiG, Jul 15 '22 at 10:06

put a border around a shape - flutter

4 Answers4