Flutter Question posted in
The official Flutter documentation can be found here.

How to remove border radius of an OutlinedButton in flutter?

I want to remove OutlinedButton border radius, It has a default border radius I want to have a rectangle shape not a rounded rectangle shape.

Here’s my code:

OutlinedButton(
            style: OutlinedButton.styleFrom(
              side: BorderSide(color: Color(0xffC5C5C5), width: 2.0),
            ),
            onPressed: () {},
            child: Text(
              "data",
              style: TextStyle(
                fontFamily: "GB",
                fontSize: 12,
                color: Color(0xffC5C5C5),
              ),
            ),
          ),
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    We should use shape property and give the value of BeveledRectangleBorder(), like this:

    OutlinedButton(
            style: OutlinedButton.styleFrom(
              shape: BeveledRectangleBorder(), //To have rectangle shape
              side: BorderSide(color: Color(0xffC5C5C5), width: 2.0),
            ),
            onPressed: () {},
            child: Text(
              "data",
              style: TextStyle(
                fontFamily: "GB",
                fontSize: 12,
                color: Color(0xffC5C5C5),
              ),
            ),
          ),

  2. 0

    Here you go:

    OutlinedButton(
  style: const ButtonStyle(
    side: WidgetStatePropertyAll(
      BorderSide(color: Color(0xffC5C5C5), width: 2.0),
    ),
    shape: WidgetStatePropertyAll(
      RoundedRectangleBorder(
        borderRadius: BorderRadius.zero,
      ),
    ),
  ),
  onPressed: () {},
  child: const Text(
    "data",
    style: TextStyle(
      fontFamily: "GB",
      fontSize: 12,
      color: Color(0xffC5C5C5),
    ),
  ),
),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search