【Flutter】MaterialApp の使い方

前回は、VS Code でコードフォーマットする方法ついての解説を行いました。

あわせて読みたい

【Flutter】VS Codeでコードフォーマットする方法 ※本記事で使用している環境＜パソコン＞機種：MacBook Air（13inch）OS：macOS Sonoma（ver.14.5）チップ：Apple M3シェル：zsh ＜ソフトウェア＞・Flutter（ver.3.22.3…

今回は、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 に基づいたデザインが使用されています。

今回、アプリ開発を行なっていく際には、「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"),
      ),
    );
  }
}

STEP

return に MaterialApp を書く

STEP

「home」プロパティを書いて、そこに Scaffold Widget を設置する

STEP

「appBar」プロパティを書いて、そこに AppBar Widget を設置する

STEP

「title」プロパティを書いて、そこに Text Widget を設置する

Text Widget のなかに、

"Hello First App Bar"

と書きました。

STEP

「body」プロパティを書いて、そこにも Text Widget を設置する

この状態だと、appBar と body に設置した Text Widget に波線が引かれています。

これは、Text の中身は変更されない場合が多いので、「const」を記述してくださいという意味です。

STEP

Text Widget の前に「const」を記述する

STEP

シミュレーターで実行してみる

STEP

文字を大きくする

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 についての解説を行います。

あわせて読みたい

【Flutter】Image の使い方 ※本記事で使用している環境＜パソコン＞機種：MacBook Air（13inch）OS：macOS Sonoma（ver.14.5）チップ：Apple M3シェル：zsh ＜ソフトウェア＞・Flutter（ver.3.22.3…