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

Flutter – How Do I Change The Border Color And Text Color Of An Outline Button

I am trying to change the border color and also the text label color of an Outline button but I am getting errors. What is the best way to achieve this?

                   OutlinedButton(
                    onPressed: null,
                    color: Colors.orange,
                    style: ButtonStyle(
                      shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0))),
                      side: BorderSide(width: 5.0, color: Colors.blue),
                    ),
                    child: const Text("Crime"),
                  ),
Tags:

3

Answers


  1. 0

    This is answered here https://stackoverflow.com/a/57874637/15598475

    For some reason, my answer needs to be at least 30 characters so I am writing some nonsense 🙂

    Login or Signup to reply.
  2. 0

    Set the style of the button as:

    style: OutlinedButton.styleFrom(
        side: const BorderSide(color: Colors.red),
        foregroundColor: Colors.blue,
      ),
    • Set the border color by specifying the side parameter in OutlinedButton.styleFrom.
    • Set the text color by specifying the foregroundColor in OutlinedButton.styleFrom.

    In the above example, the red is the border color, and the blue is the text color.

    enter image description here

    Login or Signup to reply.
  3. 0

    To change the border color and text label color of an OutlinedButton, you can adjust the style property of the button. Here’s how you can achieve this:

    OutlinedButton(
          onPressed: null,
          style: ButtonStyle(
            side: MaterialStateProperty.all(
                const BorderSide(width: 5.0, color: Colors.blue)),
            foregroundColor: MaterialStateProperty.all(Colors.red),
            shape: MaterialStateProperty.all(RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(30.0))),
          ),
          child: const Text("Crime"),
        ),

    In this code:

    side property of ButtonStyle allows you to specify the border side, where you can set the color to change the border color.

    foregroundColor property allows you to specify the color of the text label.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search