【Flutter】ElevatedButtonにボーダーを表示する

2023年2月9日2023年2月16日

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

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

マテリアルボタンにボーダーを表示する方法

ボーダーは「style」＞「ElevatedButton.styleFrom」＞「side」＞「BorderSide」で実装できます。

「BorderSide」の「color」でボーダー色、「width」でボーダーの幅を指定できます。

ElevatedButton(
  child: Text('Click Me'),
  style: ElevatedButton.styleFrom(
    side: BorderSide(
      color: Colors.greenAccent,
      width: 5,
    ),
  ),
  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(
              side: BorderSide(
                color: Colors.greenAccent,
                width: 5,
              ),
            ),
            onPressed: () {},
          ),
        ),
      ),
    );
  }
}

以上です。

合わせて読みたい

参考サイト

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