Flutterのボタン（ElevatedButton, TextButton, OutlinedButton）を円形に変更する方法を紹介します。
今回は「ElevatedButton」を円形にしていきますが、他のボタンでも同様に扱えます。
目次
ボタンを円形にする方法
「ElevatedButton」を円形するには「style」＞「ElevatedButton.styleFrom」の「shape」プロパティに「CircleBorder」を渡します。
円形にすることでボタン上で表示されるウィジェットが隠れてしまう場合は「padding」や「minimumSize」でボタン内部の余白やサイズを変更します。
ElevatedButton(
style: ElevatedButton.styleFrom(
shape: CircleBorder(),
padding: EdgeInsets.all(60),
),
child: Text(
'Click Me',
style: TextStyle(fontSize: 30),
),
onPressed: () {},
),サンプルコード
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Flutter')),
body: Center(
child: ElevatedButton(
style: ElevatedButton.styleFrom(
shape: CircleBorder(),
padding: EdgeInsets.all(60),
),
child: Text(
'Click Me',
style: TextStyle(fontSize: 30),
),
onPressed: () {},
),
),
),
);
}
}以上です。
合わせて読みたい
あわせて読みたい
【Flutter】CircleAvatarの使い方｜丸いプロフィールアイコンを作成
Flutterのウィジェット「CircleAvatar」の使い方を紹介します。 「CircleAvatar」では丸いアイコンを作成したり、画像を丸く切り抜いたりできます。 CircleAvatarの使い…