※本記事で使用している環境
＜パソコン＞
機種：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）
前回は、新規プロジェクトの作成方法の解説を行いました。
今回は、StatelessWidget について解説します。
記事を執筆するにあたって、以下の書籍を参考にしました。
おすすめ書籍
公式ドキュメントの該当箇所
様々ある Widget のなかで、今回は StatelessWidget を扱います。
https://api.flutter.dev/flutter/widgets/StatelessWidget-class.html
StatelessWidget とは
まず、Flutter では、Widget（ウィジェット）というものを並べてアプリ開発を行います。
Widget は、StatelessWidget と StatefulWidget に分けられます。
今回扱う StatelessWidget は、静的な Widget です。
つまり、StatelessWidget は一度画面に描画すると、再び描画することがないときに使用されます。
コードを書き換える手順
以下のコードになるように書いていきます。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return Container(
child: const Text(
"Hello Flutter",
textDirection: TextDirection.ltr,
),
);
}
}まず、インポート文を書きますが、
import 'paflda';のように、頭文字だけを入力すると補完候補を出してくれます。
適当な場所にカーソルを合わせて
tab
を押します。
今後は、この補完機能をどんどん使っていきましょう。
プログラミングは、いかに時間を短縮できるかが勝負です。
ちなみに、runApp 関数はプログラムを画面に表示させる関数です。
ここでは、先ほど記述した MyApp クラスの具体的な中身を記述していきます。
その際、StatelessWidget を継承する形にします。
stlessと記述しましょう。
すると、自動で型が表示されます。
MyWidget と書かれた部分がマルチカーソルになっています。
なので、そこに「MyApp」と書きます。
ちなみに、クラス名は、キャメルケースで書かれることが多いです。
CamelCase のように、単語の最初を大文字にして連結して書く方法。
ラクダの背中のようにボコボコしているのが由来。
キャメルケースは、2種類に分けられる。
lowerCamelCase のように、先頭が小文字のもの
UpperCamelCase のように、先頭が大文字のもの
もし、Widget の詳細情報を知りたくなったら、対象の Widget にカーソルを合わせて、
F12
を押します。
すると、以下のようにページが遷移し、詳細な情報を見ることができます。
StatelessWidget の場合は、Widget というクラスから継承されているのが分かります。
次に、
return const Placeholder();と書かれている部分を、
return Container();に変更し、iOS シミュレーターでプログラムを実行してみましょう。
真っ黒の画面が表示され、何もないのが分かります。
では、Container のなかに色々書き込んでみましょう。
以下のように書いてみます。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return Container(
child: const Text(
"Hello Flutter",
textDirection: TextDirection.ltr,
),
);
}
}すると、以下のように iOS シミュレーターに、Hello Flutter と表示されました。
これにて、StatelessWidget についての解説を終わります。
次は、VS Code でコードフォマットする方法の解説を行います。
コメント