Reduce the width of only one border of OutlinedButton. Flutter

user_12642891 0
Viewed 584

How can I reduce the width of only one border of OutlinedButton? I need this so that the 2 buttons that are next to each other look like one. Now there is a thick border between the two buttons. I want it to be like this
enter image description here

Code:

ButtonBar(  
  buttonPadding: EdgeInsets.zero,  
  children: [  
    OutlinedButton(  
      style: OutlinedButton.styleFrom(  
      side: BorderSide(color: theme.primaryColor),  
      shape: RoundedRectangleBorder(  
        borderRadius: BorderRadius.only(  
          topLeft: Radius.circular(5),
          bottomLeft: Radius.circular(5))),  
        ),  
      onPressed: () => {},  
      child: IconSvg.asset('assets/icons/add.svg'),  
    ),  
    OutlinedButton(  
      style: OutlinedButton.styleFrom(  
      side: BorderSide(color: theme.primaryColor),  
      shape: RoundedRectangleBorder(  
        borderRadius: BorderRadius.only(  
          topLeft: Radius.circular(5),  
          bottomLeft: Radius.circular(5))),  
        ),  
      onPressed: () => {},  
      child: IconSvg.asset('assets/icons/add.svg'),  
    ),  
  ],  
),
dart flutter
3 Answers

Flutter two buttons

I created a Container and then assigned the 2 OutlinedButton buttons in children of the Row widget inside the Container. Using BoxDecoration, we can set custom widths and colours to each side too.

I didn't have images for + and - so I used a Text widget for both of them.

        ButtonBar(
          alignment: MainAxisAlignment.start,
          buttonPadding: EdgeInsets.zero,
          children: [
            // container
            Container(
              decoration: BoxDecoration(
                // ---- can also set border widths
                border: Border.all(
                  color: Colors.red,
                ),
                // ---- set border radius
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(5.0),
                  topRight: Radius.circular(5.0),
                  bottomLeft: Radius.circular(5.0),
                  bottomRight: Radius.circular(5.0),
                ),
              ),
              // ---- Row with the 2 buttons
              child: Row(
                children: [
                  // ---- 1st Button '+'
                  OutlinedButton(
                    style: OutlinedButton.styleFrom(
                      side: BorderSide(color: Colors.red),
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.only(
                              topLeft: Radius.circular(4),
                              bottomLeft: Radius.circular(4))),
                    ),
                    onPressed: () => {},
                    child: Text('+',
                        style: TextStyle(
                          fontSize: 20,
                          fontWeight: FontWeight.w600,
                          color: Colors.black,
                        )),
                  ),
                  // ---- 2nd Button '-'
                  OutlinedButton(
                    style: OutlinedButton.styleFrom(
                      side: BorderSide(color: Colors.red),
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.only(
                              topRight: Radius.circular(4),
                              bottomRight: Radius.circular(4))),
                    ),
                    onPressed: () => {},
                    child: Text('-',
                        style: TextStyle(
                          fontSize: 20,
                          fontWeight: FontWeight.w600,
                          color: Colors.black,
                        )),
                  ),
                ],
              ),
            ),
          ],
        )
user_101793010

Wrap the button inside a container, you can add border to only specified side.

Container(
           decoration: BoxDecoration(
            border: Border(
             top: BorderSide(
              width: 7.0, color: statusColor),
               ),
             left: BorderSide(
              width: 7.0, color: statusColor),
               ),
                   ),
user_149213630

it works for me

Container(  
  decoration: BoxDecoration(  
    border: Border.all(  
    color: theme.primaryColor  
    ),  
    borderRadius: BorderRadius.all(  
      Radius.circular(5),  
    ),  
  ),  
  child: ButtonBar(  
    buttonPadding: EdgeInsets.zero,  
    children: [  
      Container(  
        padding: EdgeInsets.symmetric(vertical: 4, horizontal: 8),  
        decoration: BoxDecoration(  
        border: Border(  
          right: BorderSide(  
            color: theme.primaryColor,  
            ),  
          ),  
        ),  
        child: IconSvg.asset('assets/icons/widgets/plus.svg'),  
      ),  
      Container(  
        padding: EdgeInsets.symmetric(vertical: 4, horizontal: 8),  
        child: IconSvg.asset('assets/icons/widgets/plus.svg'),  
      ),  
    ],  
  ),  
),
user_126428910
Related