CODEWITHSUNDEEP
flutterdart
editix
editix

Reputation: 578

Change TextButton border colour - flutter

I have added a border to my TextButton.

TextButton(
  style: ButtonStyle(
      shape: MaterialStateProperty.all(RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(0)))),
  onPressed: () {
    replacePoints();
  },
  child: Text(
    "${AppLocalizations.of(context)!.replacePoints} +",
    style: TextStyle(color: Colors.white),
  ))

How can I change its colour (only outline colour not background)?

Upvotes: 3

Views: 4415

Answers (2)

Ravindra S. Patil
Ravindra S. Patil

Reputation: 14885

Try below code you will change Border color in two ways

  1. Using TextButton.styleFrom refer styleFrom

    TextButton(
      style: TextButton.styleFrom(
        side: BorderSide(
          color: Colors.green,
        ),
      ),
      onPressed: () {
        //write your onPressed function here
        print('Button Press');
      },
      child: Text(
        'Hello, World!',
        style: Theme.of(context).textTheme.headline4,
      ),
    ),

Result-> image

  1. Using ButtonStyle Class refer ButtonStyle

    TextButton(
  style: ButtonStyle(
    shape: MaterialStateProperty.all(
      RoundedRectangleBorder(
        side: BorderSide(
          color: Colors.blue,
        ),
        borderRadius: BorderRadius.circular(5),
      ),
    ),
  ),
  onPressed: () {
    //write your onPressed function here
    print('Button Press');
  },
  child: Text(
    'Hello, World!',
    style: Theme.of(context).textTheme.headline4,
  ),
),

Result-> image

Upvotes: 2

manhtuan21
manhtuan21

Reputation: 3475

Try this:

TextButton(
    style: ButtonStyle(
        shape: MaterialStateProperty.all(RoundedRectangleBorder(
            side: BorderSide(
              color: Colors.red, // your color here
              width: 1,
            ),
            borderRadius: BorderRadius.circular(0)))),
    onPressed: () {
      replacePoints();
    },
    child: Text(
      "${AppLocalizations.of(context)!.replacePoints} +",
      style: TextStyle(color: Colors.white),
    ))

Upvotes: 7

Related Questions