【Flutter】ElevatedButtonを角丸にする

2023年2月9日

マテリアルボタン（ElevatedButton, OutlinedButton, TextButton）を角丸にする方法を紹介します。

今回は「ElevatedButton」で解説していきますが、他のマテリアルボタンも同様です。

マテリアルボタンを角丸にする方法

ElevatedButtonを角丸にするには「style」＞「ElevatedButton.styleFrom」＞「shape」＞「RoundedRectangleBorder」の「borderRadius」で指定できます。

「borderRadius」に「BorderRadius.circular」を渡して角丸を調整します。

ElevatedButton(
  child: Text('Click Me'),
  style: ElevatedButton.styleFrom(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(20),
    ),
  ),
  onPressed: () {},
),

サンプルコード

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter')),
        body: Center(
          child: ElevatedButton(
            child: Text('Click Me'),
            style: ElevatedButton.styleFrom(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20),
              ),
            ),
            onPressed: () {},
          ),
        ),
      ),
    );
  }
}

以上です。

合わせて読みたい

参考サイト

https://api.flutter.dev/flutter/material/ElevatedButton-class.html