世界最大級のオンライン学習サービス「Udemy(ユーデミー)」とは?

【Flutter】ボタンを円形にする|ElevatedButtonを丸くする

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: () {},
          ),
        ),
      ),
    );
  }
}

以上です。

合わせて読みたい

参考サイト

目次