【5分でわかる】ボタンを実装する方法( ElevatedButton)

本記事では、Flutterでボタンを実装する方法を解説していきます。

Flutterでボタンを実装する方法

基本的な書き方

ElevatedButtonの実装例

基本的なボタン
ボタンの有効化/無効化をする
ボタンにスタイルを適応する
ボタンの大きさを変更する
ボタンに枠線を設定する&角丸にする

まとめ

Flutterでボタンを実装する方法

Flutterでボタンを実装するには、「ElevatedButton」を使用します。

ElevatedButton class - material library - Dart API

API docs for the ElevatedButton class from the material library, for the Dart programming language.

基本的な書き方

以下のようにウィジェット追加します。

ElevatedButton(
    style: ElevatedButton.styleFrom(textStyle: const TextStyle(fontSize: 20)),
    onPressed: () {print("ボタンを押下しました");},
    child: const Text('ボタン'),
 ),

ElevatedButtonには、上記で記載されているスタイルや、ボタン押下後の処理などの他にもたくさんのプロパティが用意されています。

ElevatedButtonの主要プロパティ

child	ボタンの子要素を設定する(Textウィジェットを設定すればボタンの上に表示する文字列を設定できる)
onLongPress	ボタンを長押しした際の処理
onPressed	ボタンを押下した際の処理
style	ボタンのスタイル設定

ElevatedButtonの実装例

基本的なボタン

ElevatedButton(
    onPressed: () {print("ボタンを押下しました");},
    child: const Text('+1 いいね!'),
 ),

ボタンの有効化/無効化をする

onPressedをnullにすると非活性化されます。

ElevatedButton(
    onPressed: null, // onPressedをnullにすると非活性化される
    child: const Text('+1 いいね!'),
 ),

ボタンにスタイルを適応する

ボタンのスタイルを変更したい場合はstyleプロパティにButtonStyleを追加します。

以下の例では背景と、文字とオブジェクトの余白、文字の大きさを設定しています。

ElevatedButton(
   style: ButtonStyle(
      backgroundColor: MaterialStateProperty.all(Colors.orange), //背景の色
      padding: MaterialStateProperty.all(const EdgeInsets.all(25)), //余白
      textStyle: MaterialStateProperty.all(const TextStyle(fontSize: 30))), //文字の大きさ
   onPressed: () {print("ボタンを押下しました");},
   child: const Text('+1 いいね!'),
),

ボタンの大きさを変更する

ボタンの大きさを変更したい場合は、styleプロパティにElevatedButtonのstyleFromメソッドを追加します。

ElevatedButton(
   style: ElevatedButton.styleFrom(
      fixedSize: const Size(100, 100), primary: Colors.orange),
   onPressed: () {print("ボタンを押下しました");},
   child: const Text('+1 いいね!'),
),