【Flutter】ElevatedButton の使い方

2024年8月22日2024年9月23日

※本記事で使用している環境

＜パソコン＞
機種：MacBook Air（13inch）
OS：macOS Sonoma（ver.14.5）
チップ：Apple M3
シェル：zsh

＜ソフトウェア＞
・Flutter（ver.3.22.3）
・Xcode（ver.15.4）
・CocoaPods（ver.1.15.2）
・Android Studio（ver.2024.1）
・Visual Studio Code（ver.1.92.0）

前回は、StatefulWidget についての解説を行いました。

公式ドキュメントの該当箇所

公式ドキュメントの解説は、以下のページにあります。

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

警告表示をオフにする

まずは、以下のコードを入力してください。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Hello Stateful Widget"),
        ),
        body: Column(
          children: [
            Text("何か表示されるエリア"),
            
          ],
        ),
      ),
    );
  }
}

STEP

青色の波線が表示されているのを確認

STEP

flutter_lints をオフにする

1:　analysis_options.yaml をクリックします。

2:　10行目にカーソルを合わせ、

Mac　command　＋　K　　command　＋　C
Win　Ctrl　＋　K　　Ctrl　＋　C

を押して、コメントアウトします。

STEP

ファイルを保存する

Mac　command　＋　S
Win　Ctrl　＋　S

を押して、ファイルを保存します。

STEP

main.dart ファイルをクリック

STEP

青い波線が消えていることを確認

これで、準備完了です。

これからコードを書いていきます。

ElevatedButton を設置する

以下のコードになるように書いていきます。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Hello Stateful Widget"),
        ),
        body: Column(
          children: [
            Text("何か表示されるエリア"),
            ElevatedButton(
              onPressed: null,
              child: Text("Button"),
            ),
          ],
        ),
      ),
    );
  }
}

STEP

Text Widget の下に書いていく

STEP

「children」プロパティに、ElevatedButton Widget を設置する

STEP

「onPressed」プロパティに null を、「child」プロパティに Text Widget を設置する

STEP

デバッグする

iOSシミュレーターの画面が変わりました。

ただし、「onPress」プロパティに、null を書いているため、ボタンを押すことができなくなっています。

次は、このボタンを押した時の処理内容を記述し、ボタンを押せるようにしていきます。

ボタンを押した時の処理を記述する

以下のコードになるように書いていきます。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Hello Stateful Widget"),
        ),
        body: Column(
          children: [
            Text("何か表示されるエリア"),
            ElevatedButton(
              onPressed: () => print("おされました"),
              child: Text("Button"),
            ),
          ],
        ),
      ),
    );
  }
}

STEP

「onPress」プロパティにカーソルを合わせ、F12 を押す

「onPress」プロパティの情報を見ていきましょう。

その際、

F12

を押します。

STEP

onPress にカーソルを合わせ、F12 を押す

STEP

onPress にカーソルを合わせ、F12 を押す

STEP

VoidCallback? にカーソルを合わせ、F12 を押す

STEP

onPress には、何らかの関数の処理を書くということを理解する

STEP

main.dart ファイルにもどり、「onPress」プロパティに何らかの処理を書く

( ) は、名前のない関数を表しています。

そして { } を開き、その中に print 関数を記述しています。

STEP

ターミナルを開く

1:　メニューバーにある ターミナル をクリックします。

2:　新しいターミナル をクリックします。

STEP

ターミナルが起動したことを確認する

STEP

iOS シミュレーターに表示されているボタンを押す

ボタンを押すと、ターミナル上に「ボタンが押されました」という表示が出ました。

STEP

処理内容を1行で記述する

これは、アロー関数というものです。

このように書くことで、簡潔に処理を記述できます。

実際に、iOS シミュレーターのボタンを押すと「おされました」と表示されます。

処理を分けて記述する

以下のコードになるように書いていきます。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Hello Stateful Widget"),
        ),
        body: Column(
          children: [
            Text("何か表示されるエリア"),
            ElevatedButton(
              onPressed: _onClick,
              child: Text("Button"),
            ),
          ],
        ),
      ),
    );
  }

  void _onClick() {
    print("メソッドの中です。ボタンが押されました。");
  }
}

STEP

「onPress」プロパティに、_onClick というメソッドを記述する

STEP

Create method ‘_onClick’ をクリック

_onClick にカーソルを合わせた状態で、以下のキーボードコマンドを押します。

Mac　command　＋　.
Win　Ctrl　＋　.

すると、様々な項目が表示されますので、「Create method ‘_onClick’」をクリックします。

STEP

_onClick method が作られたことを確認する

STEP

メソッドの中に処理内容を記述する

iOS シミュレーターに表示されているボタンを押してみましょう。

ターミナルに「メソッドの中です。ボタンが押されました。」と表示されているのがわかります。

よくある間違いを紹介します。

このように、_onClick( ) と ( ) を記述してしまうことがよくあります。

しかし、これは「関数（メソッド）を実行する」という意味になってしまいます。

ただし、今回作った _onClick は void 型ですので、引数を返しません。

よって、エラーが起きてしまいます。

スマホの画面表示が変わる処理を記述する

最後に、以下のコードになるように書いていきます。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _header = "何か表示されるエリア_プロパティ";
  int _counter = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Hello Stateful Widget"),
        ),
        body: Column(
          children: [
            Text(_header),
            ElevatedButton(
              onPressed: _onClick,
              child: Text("Button"),
            ),
          ],
        ),
      ),
    );
  }

  void _onClick() {
    print("メソッドの中です。ボタンが押されました。");
    setState(() {
      _header = "ボタンが押されたので変化しました ${_counter++}";
    });
  }
}

これでようやく、「ボタンを押したら、画面の表示が変わる」という処理をかけるようになります。

STEP

Text Widget の中身が変化するようにする