Create a rounded button/button with border-radius in Flutter

Rahul Shukla
2 min readDec 1, 2019

--

There are many ways to create and use rounded buttons in Flutter, but I’m going to show you some ways that work great in my opinion.

Rounded button using RaisedButton

Padding(
padding: EdgeInsets.only(left: 150.0, right: 0.0),
child: RaisedButton(
textColor: Colors.white,
color: Colors.black,
child: Text("Search"),
onPressed: () {},
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
),
)

Rounded button using InkWell

new InkWell(
onTap: () => print('hello'),
child: new Container(
//width: 100.0,
height: 50.0,
decoration: new BoxDecoration(
color: Colors.blueAccent,
border: new Border.all(color: Colors.white, width: 2.0),
borderRadius: new BorderRadius.circular(10.0),
),
child: new Center(child: new Text('Click Me', style: new TextStyle(fontSize: 18.0, color: Colors.white),),),
),
),

Rounded button using GestureDetector

Container(
height: 50.0,
child: GestureDetector(
onTap: () {},
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Color(0xFFF05A22),
style: BorderStyle.solid,
width: 1.0,
),
color: Colors.transparent,
borderRadius: BorderRadius.circular(30.0),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Center(
child: Text(
"BUTTON",
style: TextStyle(
color: Color(0xFFF05A22),
fontFamily: 'Montserrat',
fontSize: 16,
fontWeight: FontWeight.w600,
letterSpacing: 1,
),
),
)
],
),
),
),
)

Rounded button using ClipRRect

ClipRRect(
borderRadius: BorderRadius.circular(40),
child: RaisedButton(
onPressed: () {},
child: Text("Button"),
),
)

Rounded button using ClipOval

ClipOval(
child: RaisedButton(
onPressed: () {},
child: Text("Button"),
),
)

Rounded button using ButtonTheme

ButtonTheme(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
child: RaisedButton(
onPressed: () {},
child: Text("Button"),
),
)

Rounded button using StadiumBorder

RaisedButton(
shape: StadiumBorder(),
onPressed: () {},
child: Text("Button"),
)

I hope this post makes it easy for you to use rounded buttons in Flutter.

More Info: http://www.rscoder.com/2019/12/create-rounded-buttonbutton-with-border.html

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

--

--

Rahul Shukla
Rahul Shukla

Written by Rahul Shukla

Back-End Developer & Hybrid App Developer

Responses (1)

Write a response