[Flutter] 始まり

2021-04-05 hit count image

Flutterを使ってアプリを開発してみようかと思います。このブログポストではFlutterのプロジェクトを生成して、主なファイルやフォルダを調べてみます。

概要

Flutterを使ってアプリを開発してみようかと思います。今回のブログポストではFlutterのプロジェクトを生成してみて、主なファイルやフォルダについて説明します。また、生成したプロジェクトを実行してFlutterのアプリをエミュレーターに表示してみます。

このブログポストで紹介するソースコードは下記のリンクで確認できます。

開発環境

Flutterでアプリを開発するためにはFlutter SDKをインストールする必要があります。Flutterの開発環境の設定については以前のブログポストを参考してください。

プロジェクト生成

Flutterの新しいプロジェクトを生成してみましょう。次のコマンドを使ってFlutterの新しいプロジェクトを生成します。

# flutter create [Project Name]
flutter create first_app

プロジェクト名は小文字と_を使うスネークケース(Snake case)を使います。

主なフォルダやファイル

Fluuterプロジェクトの主なフォルダやファイルを確認してみましょう。

pubspec.yaml

Flutterの新しいプロジェクトをみてみると、pubspec.yamlと言うファイルがあります。このファリルはFlutterプロジェクトのメタデータの定義や管理をするファイルで、Nodeのpackage.jsonと似たような役割をします。

Flutterではこのファイルを使ってプロジェクトのバーゾンを管理したり、サードパーティライブラリやディペンダントを管理します。

iOS/Android/Webフォルダ

Flutterはクロスプラットフォーム開発プラットフォームで、色んなプラットフォームを一つのコードベースで開発することを目指してます。Flutterを使うとReact NativeようにiOSAndroidアプリを同時に開発することができます。各プラットフォームと関連があるプロジェクトやファイルがiOSフォルダとAndroidフォルダに保存されております。

私たちはFlutterでアプリを開発する時には、このフォルダ中の内容を修正することはありませんが、アプリどデプロイする時にはこのフォルダ中の内容を修正しなきゃならないです。

最近はFlutterがWebプラットフォームも対応して、Webプラットフォームに関するファイル、フォルダはWebと言うフォルダに保存されております。

libフォルダ

Flutterは一つのコードベースでiOSAndroidアプリを同時に開発することができます。ここで一つのFlutterコードベースを保存するフォルダがlibフォルダです。

私たちは今度このフォルダ中にDartを使ってコーディングをしてアプリを開発する予定です。このフォルダ中にあるmain.dartファイルがFlutterプロジェクトのスタートポイントファイルになります。Flutterはこのファイルを使ってアプリをビルドして実行します。

testフォルダ

testフォルダはlibフォルダにあるDartで作ったFlutterアプリをテストするためのコードを保存してるフォルダです。

これで新しくで生成したFlutterプロジェクトの主なフォルダとファイルを説明しました。

プロジェクトの始まり

そしたらこのように生成されたFlutterプロジェクトを実行して、エミュレーターに表示してみます。

エミュレーターを開く

Flutterプロジェクトを実行するためには、まずiOSのシミュレーターまたはアンドロイドのエミュレーターを実行する必要があります。次のコマンドを実行してVSCodeを開きます。

cd first_app
code .

VSCodeが実行されたら、iOSのシミュレーターまたはアンドロイドのエミュレーターを実行するためVSCodeでcommand + shift + pを押します。

Flutter - Open emulator

そしてflutterを入力して検索すると、Flutter: Launch Emulatorと言う項目を見つけることができます。キーボードの矢印を使ってその項目に移動してEnterキーを押します。そしたら下記のようにエミュレーターを選択する画面がでます。

Flutter - select emulator

基本的にiOSのシミュレーターとアンドロイドで生成したエミュレーターが確認できます。実行したいエミュレーターに移動してEnterキーを押してエミュレーターを実行します。私はここでiOSのシミュレーターを選択しました。

VSCodeではなくターミナルでもエミュレーターを実行することができます。iOSシミュレーターは下記のコマンドで実行できます。

open -a Simulator

下記のコマンドでアンドロイドエミュレーターを実行することができます。

emulator -list-avds
emulator -avd @name-of-your-emulator

そしたら次のようにシミュレーターがうまく実行されることが確認できます。

Flutter - ios simulator

プロジェクトの実行

次は実行されたシミュレーターにFlutterアプリを実行してみましょう。VSCodeでlib/main.dartファイルを選択してDartファイルを開きます。

Flutter - select main.dart

そしてもう一度command + shift + pキーを押して、debugを検索します。次のようにDebug: Start Debuggingに移動して選択します。

Flutter - select main.dart

そしたらビルドが実行された後、次のように画面にFlutterが基本的提供してるアプリがシミュレーターへ表示されることが確認できます。

Flutter - start first app

VSCodeではなくターミナルでも実行することができます。次のコマンドを実行してFlutterプロジェクトを実行します。

flutter run

私はflutter runを使うとFlutterのHot Reloadingの機能が正しく動いてなかったので、VSCodeのDebugging機能を使ってプトジェクトを実行しています。

Hot Reloading

ウェブのプロントを開発したことがある方はHot Reloadingと言う用語を聞いたことがあると思います。ウェブのプロントで使ってるHot Reloadingと同じ概念がFlutterにもあります。

Hot Reloadingとはアプリのソースコードを修正するとアプリを新しくビルドしなくても、リアルタイムで画面に反映される機能を意味します。

そしたらこの機能がうまく動作したるか確認するためlib/main.dartで次のような部分を探して修正してみます。

...
home: MyHomePage(title: 'Flutter Demo Home Page'),
...

当該内容を下記のように修正します。

...
home: MyHomePage(title: 'Test'),
...

そしてファイルを保存すると、次のように画面にすぐに反映されることが確認できます。

Flutter - hot reloading

flutter clean

Flutterでアプリを開発する時、アプリがうまくビルドできない場合があります。この時、次のコマンドを実行してサードパーティライブラリとアプリのビルドファイルなどを全て消します。

flutter clean

このようにFlutterのビルドファイルなどを削除すると、問題が解決される場合が多いです。

flutter pub get

上で紹介したflutter cleanコマンドを実行するとダウンロードしたサードパーティライブラリが削除されます。または既存のプロジェクトをgit cloneで持ってくるとサードパーティライブラリはcommitしないので、新しくインストールする必要があります。

このようにFlutterプロジェクトでライブラリをインストールする時、下記のコマンドを使います。

flutter pub get

完了

これでFlutterを使って新しいプロジェクトを生成して、生成されたプロジェクトの主なファイルやフォルドをみてみました。また、VSCodeとターミナルを使ってエミュレーターを開いてFlutterのプロジェクトを実行する方法についてもみてみました。

私のブログが役に立ちましたか?下にコメントを残してください。それは私にとって大きな大きな力になります!

Posts