※本記事で使用している環境
<パソコン>
機種: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 についての解説を行いました。
今回は、ElevatedButton Widget についての解説を行います。
記事を執筆するにあたって、以下の書籍を参考にしました。
参考にした書籍
公式ドキュメントの該当箇所
公式ドキュメントの解説は、以下のページにあります。
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("何か表示されるエリア"),
],
),
),
);
}
}
1: analysis_options.yaml
をクリックします。
2: 10行目にカーソルを合わせ、
Mac command + K
Win Ctrl + K Ctrl + C
を押して、コメントアウトします。
Mac command + S
Win Ctrl + S
を押して、ファイルを保存します。
これで、準備完了です。
これからコードを書いていきます。
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"),
),
],
),
),
);
}
}
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"),
),
],
),
),
);
}
}
「onPress」プロパティの情報を見ていきましょう。
その際、
F12
を押します。
( ) は、名前のない関数を表しています。
そして { } を開き、その中に print 関数を記述しています。
1: メニューバーにある ターミナル をクリックします。
2: 新しいターミナル をクリックします。
ボタンを押すと、ターミナル上に「ボタンが押されました」という表示が出ました。
これは、アロー関数というものです。
このように書くことで、簡潔に処理を記述できます。
実際に、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("メソッドの中です。ボタンが押されました。");
}
}
_onClick にカーソルを合わせた状態で、以下のキーボードコマンドを押します。
Mac command + .
Win Ctrl + .
すると、様々な項目が表示されますので、「Create method ‘_onClick’」をクリックします。
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++}";
});
}
}
これでようやく、「ボタンを押したら、画面の表示が変わる」という処理をかけるようになります。
iOS シミュレーターの表示が変わりました。
またもや、表示が変わりました。
iOS シミュレーターの画面に表示されているボタンを押してみましょう。
残念ながら、何も変化がありません。
実は、このように画面表示を変化させたい場合は、「setState」というメソッドを記述し、その中に処理内容を記述しなければなりません。
画面上のボタンを押すと、「ボタンが押されたので変化しました」という表示に変わりました。
これで、ボタンを押したら画面の表示が変わるという処理を記述することができました。
今度は、ボタンを押した回数を記録して表示する、という処理内容を記述します。
変数の前に「$(ドルマーク)」をつけることで、変数の中身を表示することができます。
このように、ボタンを押すと「1」から始まります。
ボタンを押した回数に応じて、数字が増えていきます。
「$(ドルマーク)」の後に「{ } (中括弧)」を開き、変数と演算子を一緒に記述することで、先ほど2行使っていた記述を1行にまとめることができます。
この記述では、「0」から始まることに注意してください。
ボタンを押した回数に応じて、数字が増えていきます。
_counter++;
この記述を、変数 _header の上に書くか下に書くかで、0 から始まるのか 1から始まるのかが変わります。
これにて、ElevatedButton Widget についての解説を終わります。
次は、Center Widget についての解説を行います。
コメント