Dani
Dani

Reputation: 4177

Flutter: change border color for OutlinedButton

Old version:

 OutlineButton.icon(
                        textColor: Theme.of(context).primaryColorDark,
                        icon: Icon(Icons.person_add),
                        label: Text(translate('contacts_list.import')),
                        shape: new RoundedRectangleBorder(
                        borderSide: BorderSide(
                          color: Colors.red,
                          style: BorderStyle.solid,
                          width: 1,
                        ),
);

New version:

OutlinedButton.icon(
                    onPressed: () async {},
                    icon: Icon(Icons.person_add),
                    label: Text("Import"),
                    style: OutlinedButton.styleFrom(
                      backgroundColor: Colors.white,
                      primary: Theme.of(context).primaryColorDark,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.all(
                          Radius.circular(2),
                        ),
                      ),
                    ),
                  )

I can't figure out how to change the border color. Here there is an example but nothing related to this effect: https://docs.google.com/document/d/1yohSuYrvyya5V1hB6j9pJskavCdVq9sVeTqSoEPsWH0/edit

Upvotes: 1

Views: 1288

Answers (2)

Penny Liu
Penny Liu

Reputation: 17418

To change the border color of an OutlinedButton in Flutter, you can use the side property within the OutlinedButton.styleFrom method.

OutlinedButton

OutlinedButton.icon(
  onPressed: () {},
  style: OutlinedButton.styleFrom(
    foregroundColor: Colors.white,
    side: const BorderSide(
      color: Colors.blue,
      width: 2,
    ), // Border color and width
  ),
  icon: const Icon(
    Icons.arrow_right_alt,
  ),
  label: const Text('Los geht\'s'),
)

Upvotes: 0

Marcel Dz
Marcel Dz

Reputation: 2714

You can do it with side: BorderSide()

Example:

OutlinedButton.icon(
                    onPressed: () async {},
                    icon: Icon(Icons.person_add),
                    label: Text("Import"),
                    style: OutlinedButton.styleFrom(
                      side: BorderSide(width: 2, color: Colors.green),
                      backgroundColor: Colors.white,
                      primary: Theme.of(context).primaryColorDark,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.all(
                          Radius.circular(2),
                        ),
                      ),
                    ),
                  )

Upvotes: 3

Related Questions