【Flutter】ElevatedButtonの背景色・前景色を変更

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

マテリアルボタン（ElevatedButton, OutlinedButton, TextButton）の背景色・前景色を変更する方法を紹介します。

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

マテリアルボタンの背景色・前景色を変更する方法

ボタンの色を変更するには「style」で「ElevatedButton.styleFrom」を使用します。

背景色は「backgroundColor」、前景色は「foregroundColor」で指定できます。

ElevatedButton(
  child: Text('Click Me'),
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.purple,
    foregroundColor: Colors.yellow,
  ),
  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(
              backgroundColor: Colors.purple,
              foregroundColor: Colors.yellow,
            ),
            onPressed: () {},
          ),
        ),
      ),
    );
  }
}

以上です。

合わせて読みたい

参考サイト

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