How to create Rounded button in flutter

idiot
2 min readJun 2, 2023

--

Using StadiumBorder

import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}

class MyHomePage extends StatelessWidget {
MyHomePage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Button'),
),
body: Center(
child: ElevatedButton(
onPressed: () {},
child: const Text(
'Elevated Button',
style: TextStyle(
fontSize: 20,
),
),
style: ElevatedButton.styleFrom(
shape: StadiumBorder(),
),
),
),
);
}
}

Using RoundedRectangleBorder

ElevatedButton(
onPressed: () {},
child: const Text(
'Elevated Button',
style: TextStyle(
fontSize: 20,
),
),
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
),
),

Using CircleBorder

ElevatedButton(
onPressed: () {},
child: const Text(
'Elevated Button',
style: TextStyle(
fontSize: 20,
),
),
style: ElevatedButton.styleFrom(
shape: CircleBorder(),
padding: EdgeInsets.all(70),
),
),

Using BeveledRectangleBorder

ElevatedButton(
onPressed: () {},
child: const Text(
'Elevated Button',
style: TextStyle(
fontSize: 20,
),
),
style: ElevatedButton.styleFrom(
shape: BeveledRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
),
),

--

--