※本記事で使用している環境
<パソコン>
機種: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)
前回は、VS Code でコードフォーマットする方法ついての解説を行いました。
今回は、MaterialApp Widget について解説します。
記事を執筆するにあたって、以下の書籍を参考にしました。
おすすめ書籍
公式ドキュメントの該当箇所
公式ドキュメントの解説は、以下のページにあります。
https://api.flutter.dev/flutter/material/MaterialApp-class.html
MaterialApp とは
Flutter では、Widget を主に2つのデザインに大別することができます。
「Material」系統の Widget と「Cupertino」系統の Widget です。
「Material」系統の Widget には、Material Design が使われており、「Cupertino」系統の Widget には、 Human Interface Guidelines に基づいたデザインが使用されています。
2014年に、Google が提唱したデザイン。
Apple が提唱したデザイン。
今回、アプリ開発を行なっていく際には、「Material」系統の Widget を使用します。
そのためには、MaterialApp という Widget を置き、その下にプログラムを書いていきます。
プロパティには、home などがあります。
それでは、実際に書いていきましょう。
MaterialApp Widget の使い方
以下のコードになるように書いていきます。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("Hello First App Bar"),
),
body: const Text("Hello body"),
),
);
}
}
Text Widget のなかに、
"Hello First App Bar"
と書きました。
この状態だと、appBar と body に設置した Text Widget に波線が引かれています。
これは、Text の中身は変更されない場合が多いので、「const」を記述してくださいという意味です。
Text Widget の中にある文字を大きくしたい場合は、Text Widget の中に、「style」プロパティを書いて、そこに TextStyle Widget を設置します。
そして、さらにその中に「fontSize」プロパティを書いて、具体的な値を記述します。
実際に以下のコードのように、書き直してみましょう。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("Hello First App Bar"),
),
body: const Text(
"Hello body",
style: TextStyle(
fontSize: 40,
),
),
),
);
}
}
これにて、MaterialApp Widget についての解説を終わります。
次は、Image Widget についての解説を行います。
コメント