Skip to content

Instantly share code, notes, and snippets.

@quangpd
Last active June 23, 2021 14:56
Show Gist options
  • Save quangpd/78ef5ad0db06fa2748ae8fb9feca3203 to your computer and use it in GitHub Desktop.
Save quangpd/78ef5ad0db06fa2748ae8fb9feca3203 to your computer and use it in GitHub Desktop.
https://stackoverflow.com/questions/49991444/create-a-rounded-button-button-with-border-radius-in-flutter?rq=1
Since, the left sides buttons are now deprecated, use the right sided ones.
Deprecated --> Recommended
RaisedButton --> ElevatedButton
OutlineButton --> OutlinedButton
FlatButton --> TextButton
ElevatedButton
Using StadiumBorder
enter image description here
ElevatedButton(
onPressed: () {},
child: Text('Button'),
style: ElevatedButton.styleFrom(shape: StadiumBorder()),
)
Using RoundedRectangleBorder
enter image description here
ElevatedButton(
onPressed: () {},
child: Text('Button'),
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12), // <-- Radius
),
),
)
Using CircleBorder
enter image description here
ElevatedButton(
onPressed: () {},
child: Text('Button'),
style: ElevatedButton.styleFrom(
shape: CircleBorder(),
padding: EdgeInsets.all(24),
),
)
Using BeveledRectangleBorder
enter image description here
ElevatedButton(
onPressed: () {},
child: Text('Button'),
style: ElevatedButton.styleFrom(
shape: BeveledRectangleBorder(
borderRadius: BorderRadius.circular(12)
),
),
)
OutlinedButton
Using StadiumBorder
enter image description here
OutlinedButton(
onPressed: () {},
child: Text('Button'),
style: OutlinedButton.styleFrom(
shape: StadiumBorder(),
),
)
Using RoundedRectangleBorder
enter image description here
OutlinedButton(
onPressed: () {},
child: Text('Button'),
style: OutlinedButton.styleFrom(
shape: BeveledRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
),
)
Using CircleBorder:
enter image description here
OutlinedButton(
onPressed: () {},
child: Text('Button'),
style: OutlinedButton.styleFrom(
shape: CircleBorder(),
padding: EdgeInsets.all(24),
),
)
Using BeveledRectangleBorder
enter image description here
OutlinedButton(
onPressed: () {},
child: Text('Button'),
style: OutlinedButton.styleFrom(
shape: BeveledRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
),
)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment