新しいFlutterアプリを作って実行する

この章で学ぶこと

• 新しいFlutterプロジェクトを作る方法
• アプリを実行する方法
• 画面の文字を書き換えて、変更を確認する方法

事前準備

先に「Flutterの環境構築」の章を終わらせておきます。

ターミナルで次のコマンドを実行し、Flutterが使えることを確認してください。

flutter doctor

エラーが表示された場合は、内容に従って環境設定を見直します。

プロジェクトを作る

まず、プロジェクトを保存したいフォルダに移動します。次に、以下のコマンドを実行します。

flutter create hello_app

hello_app という名前のフォルダが作られ、その中にFlutterアプリに必要なファイルが生成されます。

作成したプロジェクトのフォルダへ移動します。

cd hello_app

VS Codeで開く場合は、次のコマンドを実行します。

code .

主に編集するファイルは lib/main.dart です。パッケージの設定は pubspec.yaml に記載されています。

実行できる端末を確認する

次のコマンドで、Flutterから利用できる端末を確認します。

flutter devices

Chromeが表示されていれば、ブラウザ上でアプリを実行できます。Androidで確認したい場合は、Androidエミュレーターを起動するか、開発者向け設定を有効にした端末を接続してください。

アプリを実行する

Chromeで実行する場合は、次のコマンドを使います。

flutter run -d chrome

しばらく待つとブラウザが開き、Flutterの初期画面が表示されます。

Androidなど別の端末で実行する場合は、flutter devices に表示された端末IDを指定します。

flutter run -d 端末ID

簡単な画面を作る

lib/main.dart の内容を、次のコードに書き換えます。

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('はじめてのFlutter'),
        ),
        body: const Center(
          child: Text('Hello, Flutter!'),
        ),
      ),
    );
  }
}

ファイルを保存すると、実行中のアプリに変更が反映されます。反映されない場合は、アプリを実行しているターミナルで r を入力すると、ホットリロードできます。

アプリを終了するときは、同じターミナルで q を入力します。

うまく実行できないとき

• flutter doctor を実行し、エラーがないか確認する
• flutter devices を実行し、利用する端末が表示されているか確認する
• コマンドを hello_app フォルダ内で実行しているか確認する
• エラーを修正したあと、もう一度 flutter run -d chrome を実行する

まとめ

これで、新しいFlutterプロジェクトを作成し、簡単な画面を表示できました。以降は lib/main.dart を中心に編集しながら、アプリに必要な画面や機能を追加していきます。