久々更新ですが、上記のことをやろうと思ってほぼ独学なので少し手間取っていました。
少し前にkivyを使ってアプリを作っていましたが、いろいろ調べているとUIがダサくていやだな～と思い、Flutterを使えばUIの自由度が高そうだし、公開されている情報も多いし、アプリでもweb版でも作れちゃうみたいなのでこっちに乗り換えようと考えてやり方調べていました。
自分が使用しているPCをビルドできる環境にするまではプログラミング学習において結構難所だと思うのですが、皆さんはいかがですか。
プログラム構文の勉強をするよりも、意味の分からないエラーと格闘する時間の方が長いですよね。
前振りはこの辺で、やり方をまとめていきます。
■結論
よくわからないエラーが出ると思いますが、１つずつ対処しながらやるのが正解※最後に遭遇したエラーの対処法を記載したページのリンクがあります。
エラー対処はGPT、Google先生に任せて、大まかな流れはFlutterの公式チュートリアルが一番安定。
Flutter公式のチュートリアル：https://docs.flutter.dev/get-started/test-drive?tab=androidstudio
chatGPT3.5は無料で制限なく利用できるので、基本GPT3.5に質問
詰まったらGoogle先生から検索、ブログやstackoverflowで対処法を探す。
それでも無理ならGPT4.0に質問する。無料で使用できるサービスもあるので必要なら以下記事を参照
■必要なもの
- PCやインターネット環境みたいな、当たり前のものは割愛 ※環境はWin11です
- Android Studio
- Flutter
- Java
- Gradle
- やる気
■Flutterをインストール
①自分が使用しているOS（環境）を選択
②”System requirements”(システム要件)を確認しましょう。gitを入れるようにかかれているので、入れていない人はリンクからDLしてインストール
※インストールウィザードが表示されますが、すべてデフォルトでも問題ありませんでした。要するに”次へ”を連打
使用環境(PC)の条件も見るようにします、要件に満たない場合先にまともなパソコンを手に入れるところから始めましょう。
※新規で購入するならHDD/SSDなどの必要な空き容量は10倍 RAM(メモリ)容量は１.５倍程度余裕がある方が良いです。長く使うものですし、最終判断はご自身で。最悪、要件に満たなくてもゆっくり動くことがあるので、その場合は、覚悟すればよいだけかと。
③”Get the Flutter SDK”という項目を探して、圧縮ファイルなどをDL
インストール先のpathはC:/programfilesのような特別なアクセス権が必要なところにはおかないようにします。例えばC:/developmentなどのファイルを作りその中に入れましょう。
要するにC:/development/flutterのようなpathを指定します。
④flutter_console.batを実行
上記③で指定したファイルの中を探すと入っているので、そいつを実行
“flutter –version”と入力し、Enter、ver情報が表示されることを確認します。
※この状態はFlutter Consoleからしか実行できない状態です。WindowsならCMD(コマンドプロンプト)などでも使えるようにしてあげる必要があります。
⑤環境変数を設定する
ユーザ環境変数のPathを編集、新規でflutterの場所を教えてあげます。
※追記2023/5/1 ユーザ環境変数でなく、システム環境変数のPathを更新することをお勧めします。ユーザ環境変数は特定のユーザ限定で使用する変数のため。
C:/development/flutter/binを追加しておきます。
⑥コマンドプロンプトからVer確認
“flutter –version”と入力し、ver情報が表示されることを確認
この状態が、Flutter Console以外で使える状況
■Android Studioをインストール
①とりあえずDL
目立つところに”download android studio”などと書いてあるので、そこをクリックします。
後は実行してPCにインストールされたことを確認。
②Flutterのプラグインを入れる
[File]→[setting]をクリックで以下のような画面が表示され
[Plugins]→検索窓から”flutter”と入力→上記画像のようにFlutterとだけ記載されたものをインストールする。
その後、Android Studioを再起動します。
そうすると[File]→[New]→[New Flutter Project]という項目が出てくるので、そこからやっとコードが書けるようになります。
③Dartのプラグインを入れる
上記と手順は一緒です”Dart”もインストールします。
■必要な環境がそろったか確認
“flutter doctor”と入力し、状態を確認します。
上の画像はFlutterを入れた直後の画像で、android studioを入れた後ならもう少し✅が多いと思います。
この結果はおそらく皆さん違うと思います。必須で対応が必要なのは[X]と書かれているものだと思いますが、基本的にすべて✅になるようにしましょう。ただし、今回はAndroid Studioを使用するのでVisual Studio～に関しては無視です。
■Flutterでコードを書いていく
①新規作成（サンプルコードを使用）
File→New→New Flutter Project…を選択
Add sample codeを選択して
左の項目Flutterを選択、Flutter SDK ppathという項目があるのでflutterが入っている場所は確認し、間違っていれば修正しまし、Nextを押します。
■エミュレータを準備する
Tools→Device Managerを起動
Create deviceを選択 ※↑画面のように既にエミュレータ用のデバイスがある場合はスキップ
適当にエミュレート用のデバイスを選択し、
適当にandroidのOSを選択し、Next
AVD Nameは任意で変更、わかりやすいdevice名にしましょう、Graphicsに関してはhardwareを選択したほうがエミュレータの動作が早くなると聞いたことがありますが、私はまだ実感したことが無いので、Automaticとしています。最後にFinishでエミュレート用のデバイスができます。
■エミュレートする
画面左上の方に何でエミュレートするのか選択できるドロップダウンリストがあるので、そこから実行するものを選びます。Chromeで実行も出来たりするので、最終目標がChromeでのローンチならそちらを選んでもらってもいいです。
今回はandroid appを想定しているので、”sdk~”という表示のエミュレートデバイスを選択します。
※”sdk~”の表示がないなら少し下に出ている”Open Android Emulator～”を選んで少し待てば起動します。
次はすぐ隣にあるドロップダウンリストから実行するソースコードを選択。
この時dartのアイコンのmain.dartではなく、Flutterのアイコンのmain.dartであることに注意
そのあと”▶”アイコンのRunボタンをクリック ※本来はデバッグを先に実行したりするのが良いのですが、サンプルコードのため省略。
このようにサンプルアプリがエミュレートでき、動作も確認できます。
■遭遇したエラーたちまとめ
■まとめ
詰まったらchatGPTを使って質問すれば大体答えてくれるので、独学でもなんとか行けます。
ただし、chatGPT3.5だけだと、同じことの繰り返し（エラーについて質問↔さっきと同じ対処法提示）になることがあるので、エラー文章の中の問題の概要文を見つけ、google先生から解決策を探ることも必要です。
chatGPT3.5↔Googleを行き来してもわからないならGPT4の力を借りましょう。GPT4は通常有料ですが、Bingで検索してもよいのですが、私が試したときは、端的で単発で済むような、気の利いた回答はくれない状態でしたので。個人的には以下のMerlinがおすすめ、１日５回までなら質問できます。chat形式じゃなく、一問一答という感じなので、連続した質問でなく、必要な情報はすべて書いて質問するようにしましょう。サンプルコード等も出してくれるし、私が理解していなかった前提条件の問題も指摘してくれるので、GPT3.5よりも圧倒的に賢いです。
コメント