1. この記事で行うこと

初めての Flutter アプリを作成して、Hello World を表示してみましょう。
この記事に取り掛かる前に、Flutter の環境構築をしておく必要があります

2. アプリを作成してみよう

2.1. アプリの作成

まずは VS Code を起動して、「Command + Shift + P」を押して、「Flutter: New Project」を選んで Enter キーを押してください。
次に、 「Application」を選んで Enter キーを押してください。

すると、どこにファイルを保存するか尋ねられるため、「書類」ディレクトリなどを選んで「Select a folder to create the project in」を押してください。

次に「hello_world」という名前を入力して、Enter キーを押してください。 しばらく待つと、プロジェクトが開かれます。

2.2. アプリの実行

左サイドメニューの「Run and Debug」アイコンをクリックし、「create a launch.json file」を押して、「Dart & Flutter」を選んで Enter キーを押してください。

すると、以下のような画面が表示されます。

このファイルは、アプリを起動する設定が記載されています。
最後に左上の緑色の矢印アイコンを押してアプリを実行してください。

起動するデバイスの選択

右下に「No Device」または「macOS (darwin)」などが表示されているエリアをクリックすると、どのデバイスでアプリを起動するか選択できます。
「Start iOS Simulator」を選択すると、iOS シミュレーターでアプリを起動できます。

好きなシミュレーターを選ぶと「ビルド」が始まります。
ビルドはプログラムをアプリとして実行できるようにするための作業で、数分かかることがあります。

しばらく待ち、無事にアプリが起動して以下のような画面が表示されれば成功です！

2.3. Hello World を表示してみよう

それでは、実際にコードを書いて画面に Hello World と表示してみましょう。
lib/main.dart ファイルを開くとコードがたくさん書かれていますが、一旦全て削除して、以下の内容で書き換えてください。

dart
1import 'package:flutter/material.dart';
2
3void main() {
4  runApp(const MyApp());
5}
6
7class MyApp extends StatelessWidget {
8  const MyApp({super.key});
9
10  @override
11  Widget build(BuildContext context) {
12    return MaterialApp(
13      title: 'Flutter Demo',
14      theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple)),
15      home: const HomePage(),
16    );
17  }
18}
19
20class HomePage extends StatelessWidget {
21  const HomePage({super.key});
22
23  @override
24  Widget build(BuildContext context) {
25    return Scaffold(
26      appBar: AppBar(title: Text('Hello World Demo')),
27      body: Text('Hello World!'),
28    );
29  }
30}

「Command + S」を押して保存してください。
すると、アプリが自動で更新されて、「Hello World!」と表示されます

詳細なコードの解説

先ほど書いたコードには、どんな意味があるのでしょうか？
プログラミングへの理解を深めるためにも、少し詳しく見ていきましょう。

1 行目

dart
1import 'package:flutter/material.dart';

ここでは、 アプリを作るために必要な機能群（パッケージ）をインポートしています。
この行があることで、Flutter の機能を使うことができます。

3 行目 ~ 5 行目

dart
1void main() {
2  runApp(const MyApp());
3}

ここでは、アプリを起動すると最初に実行される main 関数を定義しています。(エントリーポイントと呼ばれます)
この関数の中で runApp 関数を呼び出すことで、 Flutter アプリが起動します。
MyApp Widget を引数に指定しているため、最初の画面に MyApp Widget が表示されます。

ちなみにこの runApp 関数を呼ばないと、アプリが起動しても何も表示されません。

7 行目 ~ 18 行目

dart
1class MyApp extends StatelessWidget {
2  const MyApp({super.key});
3
4  @override
5  Widget build(BuildContext context) {
6    return MaterialApp(
7      title: 'Flutter Demo',
8      theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple)),
9      home: const HomePage(),
10    );
11  }
12}

この部分では、アプリのテーマや、アプリの起動時に表示される最初の画面を指定しています。
home: 引数に指定した Widget がアプリの起動時に表示される最初の画面になります。

20 行目 ~ 30 行目

dart
1class HomePage extends StatelessWidget {
2  const HomePage({super.key});
3
4  @override
5  Widget build(BuildContext context) {
6    return Scaffold(
7      appBar: AppBar(title: Text('Hello World Demo')),
8      body: Text('Hello World!'),
9    );
10  }
11}

この部分で、先ほど home 引数に指定した HomePage Widget を作成しています。
Scaffold クラスは、アプリの画面を作成するためのクラスで、appBar 引数を用いるとアプリの上部に表示されるバーを作成できます。

body 引数や AppBar クラスの title 引数には Text Widget を指定しています。
この Widget は、画面にテキストを表示するための Widget です。

コードを自由に変更してみる

Hello World を表示するだけではつまらないので、コードを自由に変更してみましょう。
例えば、以下のように変更してみます。

dart
1body: Text('これは{あなたの名前}が作った初めてのFlutterアプリです'),

「Command + S」を押して保存すると、先ほどまで Hello World と表示されていた部分が、以下のように変わります。

他にも、 AppBar の title を変えてみたりして、自由にアプリを作ってみましょう。

以上で今回の記事は終わりです。お疲れ様でした！