無能がFlutterを独学し始める話【5/5：実際にFlutterを触ってみる】5/5-1：新規でFlutterプロジェクトを作成する
本記事をご覧いただき、誠に有難うございます。
投稿主の無能と申します。
前回はflutter doctorの診断結果で未完了だった項目を全てクリアし、Flutterが開発できる環境を整えました。
今回は、実際にFlutterの新規プロジェクトを作成し、エミュレータで動かしてみたいと思います。
プロジェクトを新規作成する
New Flutter Projectから新規作成する
では早速、Android StudioでFlutterの新規プロジェクトを作成してみたいと思います。
Android Studioを起動し、New Flutter Projectを選択します。
Android Studioを起動しNew Flutter Projectを選択
するとNew Projectという別画面が表示されます。
New Project画面
Flutterを選択
画面の中をよく見てみます。
Flutter SDKのPathを指定する
中央上部にはFlutter SDK Pathとあるので、右側の「…」ボタンを押下し以前Pathを通した場所（任意フォルダ\flutter\bin）を入力します。
PatHを指定するとNew Projectの画面に戻りますが、下部にメッセージが表れています。
中央には何も表示されていない
上部にFlutter SDK Pathとあるので、右側の「…」ボタンを押下し以前Pathを通した場所（任意フォルダ\flutter\bin）を入力
するとFlutter SDKの選択画面になるので、該当の場所を選択します。
Flutter SDKの選択画面
該当の場所を指定
New Projectの画面に戻るが、下部にメッセージが表示されている
どうやら「指定された場所ではFlutter SDKは見付かりませんでした。」というメッセージのようです。
環境変数で追加したPathとAndroid Studioで指定するFlutter SDKのPathの違い
正しく指定したのにどうして？となりますが、実はAndroid Studioで指定しなければならないFlutter SDKのPathは、環境構築の際に指定した任意フォルダ\flutter\binの一つ上の階層である任意フォルダ\flutterを指定する必要があります。
どういう事かと言うと、環境変数で指定した任意フォルダ\flutter\binは、コンソールで使用する必要最小限のグループを指定したことになります。
環境構築の際に、環境変数に追加したPathの概要
環境構築の際にFlutter SDKをDLした時は、flutter\bin以外にも沢山のフォルダやファイル群がありました。
Android Studioでは、bin以外の以外のファイル・フォルダも使用するため、Flutter SDKをDLして解凍したflutterフォルダそのものを、Flutter SDKとして指定する必要があります。
故に任意フォルダ\flutter\binでは無く、一つ上の階層の任意フォルダ\flutterを指定すれば良い、という事になります。
Android Studioで指定するFlutter SDKの概要
それでは先程と同様にFlutter SDK Path右側の「…」ボタンを押下し、一つ上の階層のflutterフォルダを指定し直してOKを押下します。
一つ上の階層のflutterフォルダを指定
これでメッセージは消えて、上部のFlutter SDK Pathには先程指定したPathが入りました。
Nextで次に進みます。
メッセージが消えFlutter SDK Pathに指定したPathが入力された
無能はAndroid Studio起動後にメニューからの操作（File > New > New Flutter Project）から作成した手順となることを、予めご承知おき下さい。
New Project画面が変化しました。
New Project画面が変化した
プロジェクトの詳細を決めていく
プロジェクト名：Project Name
先ずはプロジェクト名（Project Name）です。
これは開発する自分（本記事では無能）と、開発に関わる方が分かるような名前にしておきます。
今回は開発者は自分のみですので、任意に決めてしまいましょう。
但し命名にはルールがあって
- すべて半角英数小文字
- 単語を最小単位として、単語ごとにアンダーバー「_」で繋げる
というものがあります。
ということで、ルールを踏まえて今回は初回なので「sample_flutter_app1」とします。
プロジェクト名
開発者及び関係者に分かる名前が好ましい
命名規則に従い、今回は自分のみなので「sample_flutter_app1」とする
プロジェクトの場所：Project Location
2項目めはプロジェクトの場所（Project Location）です。
作成したプロジェクトが一式含まれる場所、言い換えるとプロジェクトの親のフォルダを示していますので、この情報を基に保存や開くなどの作業が可能になります。
今回はデフォルトのままとします。
デフォルトではなく決まった保存場所への指定が必要な場合は、右側の「…」ボタン押下で目的の場所を任意で指定できます。
プロジェクトの場所
今回はデフォルト
右側「…」ボタンより任意で場所を指定可能
アプリの説明：Description
3項目めはアプリの説明（Description）です。
こちらは任意でOKです。
今回はデフォルトのままとします。
アプリの説明
今回はデフォルト
プロジェクトの種類：Project Type
4項目めはプロジェクトの種類（Project Type）です。
これは、これから作成するプロジェクトはどのような役割を果たすのか、というものを種類分けしているものです。
今回はデフォルトの「Application」とします。
プロジェクトの種類
今回はデフォルトの「Application」
組織名：Organization
5項目めは組織名（Organization）です。
これは、これから作成するプロジェクトがどの組織・団体などに付随するのか、を示すものとなります。
簡単に言い換えると「このプロジェクトは誰のモノ？」の「誰」に当たるのがこの項目です。
ですので、例え個人開発であっても、デフォルトの「com.example」は極力避けましょう。
更に記載のルールとしては
- 左から右へ、小さい項目から大きい項目になるように
- 単語区切りとして、間をドット「.」で繋ぐ
- 半角英数ですべて小文字
- 必ず2つ以上の単語をドットで繋ぐ必要がある
となります。
因みに、example.comではなくcom.exampleになっているのは、習慣の違いのようなものです。
日本国内では、住所を記載する際に大きい項目から書くのが普通です。
例：東京都新宿区■■123-4 など
逆に、米国をはじめとする諸外国では、小さい項目から書くのが一般的です。
例：123-4,■■,Shinjuku,Toyko など
この習慣に倣って、左から小さい単位で入力していきます。
逆に言えば、右から左に読めば日本の住所の記載方法と同じか近しいものであれば良いと思います。
例：無能スタジオとした場合→studio.munou
今回は開発者は個人、無能なので仮に組織名を「無能スタジオ」とするとし、入力する組織名は「studio.munou」にします。
組織・団体名
極力「com.example」のデフォルトを避ける
今回は「studio.munou」
Androidの言語：Android Language
iOSの言語：iOS Language
6・7項目めはAndroidの言語（Android Language）とiOSの言語（iOS Language）です。
ここは、Android/iOSで開発に使用されるプログラミング言語を指定する項目になっています。
今回は必要ないのでデフォルトとします。
Android/iOSの言語
今回はデフォルト
プラットフォーム：Platforms
8項目めはプラットフォーム（Platforms）です。
これから作成するプロジェクトで、対象となるプラットフォームを選択します。
一つ留意点として、直下の文言があります。
これをGoogle翻訳で見てみます。
Platforms直下に記載の文章を翻訳する
プラットフォームの可用性は、Flutter SDKチャネル、および有効になっているデスクトッププラットフォームによって異なる場合があります
という記載があります。
これはざっくりもざっくりですが、可用性は使っているFlutter SDKや環境によって異なる、ということになります。
以下で簡単に可用性の話をします。
既に理解されている方は読み飛ばしていただいて問題ありません。
例えば、スマホが1台あったとします。
このスマホは
- 電源OFF状態で3時間の充電でバッテリーはフルになる
- 21時間で残量0%となるが、その間電源が切れるまで継続して動作する
というものです。
この場合、一日24時間で考えると3時間は休息時間となり、21時間が稼働時間となります。
この稼働時間の21時間、即ち87.5%が可用性に当たります。
このFinish押下の時点で入力項目に不備があった場合は、プロジェクトの作成が中断されエラーとなり、該当項目の解決策が記載されたメッセージダイアログが表示されます。
このスマホを購入して2台で使っていたとします。
1台は常温で暑くも寒くもない場所で、アプリによる負荷もほとんど無く使用。
もう1台は真夏日のような高温で、アプリによる負荷が常に高い状態で使用。
すると後者のスマホ（高温・高負荷のスマホ）は、明らかにバッテリーの消費が早くなり、21時間の稼働時間を待たずバッテリーが切れてしまいます。
このように、例のスマホの可用性をプラットフォームの可用性、スマホの使用環境をFlutter SDKチャネルやデスクトッププラットフォームに置き換えると、その可用性が使っている環境で異なる、という留意点です。
これで一通り設定したので、Finishを押下します。
今回はデフォルトのAndroid・iOSにチェックのままとします。
プラットフォーム
今回はデフォルト
一通り設定が完了したのでFinishを押下
エラーになった場合は、指示に従い項目を入力して再度Finishを押下します。
問題が無ければ、プロジェクトが作成されます。
プロジェクト作成中の画面
無能は画像の設定になります。
ウィンドウについて
好みで設定
すると、Android Studioに新しいプロジェクトが表示されました。
新しいプロジェクトが表示された
お疲れさまでした。
まとめ
本記事では
- Flutterの新規プロジェクトを作成した
という事を行いました。
次は、作成したFlutterプロジェクトをエミュレータで動かしてみたいと思います。
本記事もご覧頂き、誠に有難うございます。
ではまた。
コメント
コメントを投稿