[Flutter] ElevatedButton Widget の作成

Flutter のButton Widgetはいくつかありますが、立体的ないわゆるボタン的なものを使いたい時はElevatedButtonがいいでしょう

ElevatedButton

ボタンとして立体的に表示されるタイプのButton Widgetです
タップすると色が変わる挙動をします
　

目次
1. styleの変更
2. サンプルコード

styleの変更

これがシンプルなElevateButtonになります

<pre class="lang:default decode:true">ElevatedButton(
  //style: style, // ボタンの色や形などのスタイルを設定
  onPressed: (){}, // ボタンをPressされた時の挙動
  child: Text('ElevatedButton'),// ボタンに表示される文字
),

<pre class="lang:default decode:true">ElevatedButton(

//style: style, // ボタンの色や形などのスタイルを設定

onPressed: (){}, // ボタンをPressされた時の挙動

child: Text('ElevatedButton'),// ボタンに表示される文字

これを色々と装飾してみたいと思います

ElevatedButton(
  style: ElevatedButton.styleFrom(
    // フォントサイズ
    textStyle: const TextStyle(fontSize: 20),
    // 背景色
    backgroundColor: Colors.blue.shade50,
    // 前景色
    foregroundColor: Colors.blue,
    // ボタン角丸形状
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(20),
    ),
    // 影の深み
    elevation: 20,
    // バタンの外枠
    side: const BorderSide(
      color: Colors.blue,
      width: 2,
    ),
    // ボタンの内側の余白
    padding: const EdgeInsets.symmetric(
      horizontal: 50.0, 
      vertical: 20.0
      ), 
  ),
  onPressed: (){},
  child: const Text('ElevatedButton'),
),

ElevatedButton(

style: ElevatedButton.styleFrom(

// フォントサイズ

textStyle: const TextStyle(fontSize: 20),

// 背景色

backgroundColor: Colors.blue.shade50,

// 前景色

foregroundColor: Colors.blue,

// ボタン角丸形状

shape: RoundedRectangleBorder(

borderRadius: BorderRadius.circular(20),

// 影の深み

elevation: 20,

// バタンの外枠

side: const BorderSide(

color: Colors.blue,

width: 2,

// ボタンの内側の余白

padding: const EdgeInsets.symmetric(

horizontal: 50.0,

vertical: 20.0

onPressed: (){},

child: const Text('ElevatedButton'),

このようになります

サンプルコード

onPressed の例として
一般的なボタンをタップすると文字が変わるというシンプルなコードです

main.dart

import 'package:flutter/material.dart';
 
void main() => runApp(const ElevatedButtonApp());
 
class ElevatedButtonApp extends StatelessWidget {
  const ElevatedButtonApp({super.key});
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('ElevatedButton')),
        body: const ElevatedButtonExample(),
      ),
    );
  }
}
 
class ElevatedButtonExample extends StatefulWidget {
  const ElevatedButtonExample({super.key});
 
  @override
  State<ElevatedButtonExample> createState() => _ElevatedButtonExampleState();
}
 
class _ElevatedButtonExampleState extends State<ElevatedButtonExample> {
  
  String _displayText = "Text";
  // bool buttonflg = false;

  void changeText(){
    setState((){
      if(_displayText == "Text"){
        _displayText = "Changed !";
      }
      else{
        _displayText = "Text";
      }
    });
  }
 
  @override
  Widget build(BuildContext context) {
    final ButtonStyle style =
        ElevatedButton.styleFrom(textStyle: const TextStyle(fontSize: 20));
 
    return Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Text(
            _displayText,
            style: const TextStyle(fontSize: 24),          
          ),
          const SizedBox(height: 30),
          ElevatedButton(
            // style: style,
            style: ElevatedButton.styleFrom(
              // フォントサイズ
              textStyle: const TextStyle(fontSize: 20),
              // 背景色
              backgroundColor: Colors.blue.shade50,
              // 前景色
              foregroundColor: Colors.blue,
              // ボタン角丸形状
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20),
              ),
              // 影の深み
              elevation: 20,
              // バタンの外枠
              side: const BorderSide(
                color: Colors.blue,
                width: 2,
              ),
              // ボタンの内側の余白
              padding: const EdgeInsets.symmetric(
                horizontal: 50.0, 
                vertical: 20.0
                ), 
              ),
              // onPressed: (){},
              // child: const Text('ElevatedButton'),
            // ),
            onPressed: changeText,
            child: const Text('ElevatedButton'),
          ),
        ],
      ),
    );
  }
}

import 'package:flutter/material.dart';

void main() => runApp(const ElevatedButtonApp());

class ElevatedButtonApp extends StatelessWidget {

const ElevatedButtonApp({super.key});

@override

Widget build(BuildContext context) {

return MaterialApp(

home: Scaffold(

appBar: AppBar(title: const Text('ElevatedButton')),

body: const ElevatedButtonExample(),

);

}

class ElevatedButtonExample extends StatefulWidget {

const ElevatedButtonExample({super.key});

@override

State<ElevatedButtonExample> createState() => _ElevatedButtonExampleState();

}

class _ElevatedButtonExampleState extends State<ElevatedButtonExample> {

String _displayText = "Text";

// bool buttonflg = false;

void changeText(){

setState((){

if(_displayText == "Text"){

_displayText = "Changed !";

}

else{

_displayText = "Text";

}

});

}

@override

Widget build(BuildContext context) {

final ButtonStyle style =

ElevatedButton.styleFrom(textStyle: const TextStyle(fontSize: 20));

return Center(

child: Column(

mainAxisSize: MainAxisSize.min,

children: <Widget>[

Text(

_displayText,

style: const TextStyle(fontSize: 24),

const SizedBox(height: 30),

ElevatedButton(

// style: style,

style: ElevatedButton.styleFrom(

// フォントサイズ

textStyle: const TextStyle(fontSize: 20),

// 背景色

backgroundColor: Colors.blue.shade50,

// 前景色

foregroundColor: Colors.blue,

// ボタン角丸形状

shape: RoundedRectangleBorder(

borderRadius: BorderRadius.circular(20),

// 影の深み

elevation: 20,

// バタンの外枠

side: const BorderSide(

color: Colors.blue,

width: 2,

// ボタンの内側の余白

padding: const EdgeInsets.symmetric(

horizontal: 50.0,

vertical: 20.0

// onPressed: (){},

// child: const Text('ElevatedButton'),

// ),

onPressed: changeText,

child: const Text('ElevatedButton'),

);

}

　
タップすると

onPressedの機能を確認できました
　
　
　
Reference:
ElevatedButton Class
Widget catalog