CODEWITHSUNDEEP
flutterflutter-layout
mike hennessy
mike hennessy

Reputation: 1679

flutter How to change one border on container and maintain borderRadius?

I'm trying to create a container which has a yellow border on the left, but grey around the remainder and which keeps the borderRadius. I'm trying to use this as container for drop-down menu, as I can't create a border directly on that control.

This is what it should look like: enter image description here

On the BoxDecoraction, I use the Border() method to specify the left border color.

                     Container(
                        width: 400,
                        margin: EdgeInsets.only(top: 20),
                        padding: EdgeInsets.only(left: 10),
                        decoration: BoxDecoration(
                          border: Border(
                            left: BorderSide(
                                color: Color.fromRGBO(255, 167, 38, 1),
                                width: 5),
                            right: BorderSide(
                                width: .5,
                                color: Color.fromRGBO(116, 102, 102, .5)),
                            top: BorderSide(
                                width: .5,
                                color: Color.fromRGBO(116, 102, 102, .5)),
                            bottom: BorderSide(
                                width: .5,
                                color: Color.fromRGBO(116, 102, 102, .5)),
                          ),
                           borderRadius: BorderRadius.all(Radius.circular(10))
                        ),

But if I then try to use borderRadius, it throws an error and doesn't render. It seems if I use the Border() and specify sides directly it break, but if I use border.all() it works. How can I set borderRadius and still have left border different width/color?

How to solve?

Upvotes: 3

Views: 6056

Answers (2)

Abdallah A. Odeh
Abdallah A. Odeh

Reputation: 1792

It might be a late, but dropping this answer it might help someone,

ClipRRect(
          borderRadius: const BorderRadius.all(Radius.circular(12.0)),
          child: Container(
            decoration: BoxDecoration(
                borderRadius: const BorderRadius.all(Radius.circular(12.0)),
                border: Border.all(color: Colors.grey, width: 1)),
            child: Row(
              children: [
                Container(
                  height: 75,
                  width: 8,
                  color: Colors.grey,
                ),
                const Expanded(
                  child: Padding(
                    padding: EdgeInsets.all(16.0),
                    child: Text('What do you plan to do?'),
                  ),
                )
              ],
            ),
          ),
        ),

This code shows the result:

enter image description here

Upvotes: 1

Sahandevs
Sahandevs

Reputation: 1160

you can use ClipRRect

your code with this solution:


             ClipRRect(
               borderRadius: BorderRadius.all(Radius.circular(10)),
               child: Container(
                        width: 400,
                        margin: EdgeInsets.only(top: 20),
                        padding: EdgeInsets.only(left: 10),
                        decoration: BoxDecoration(
                          border: Border(
                            left: BorderSide(
                                color: Color.fromRGBO(255, 167, 38, 1),
                                width: 5),
                            right: BorderSide(
                                width: .5,
                                color: Color.fromRGBO(116, 102, 102, .5)),
                            top: BorderSide(
                                width: .5,
                                color: Color.fromRGBO(116, 102, 102, .5)),
                            bottom: BorderSide(
                                width: .5,
                                color: Color.fromRGBO(116, 102, 102, .5)),
                          ),
                        ),

            )

also these may be useful:

https://api.flutter.dev/flutter/widgets/ClipRRect-class.html

https://www.youtube.com/watch?v=eI43jkQkrvs

Upvotes: 3

Related Questions