Dart/Flutterで開発してみる日記 Day.1-1 [環境構築]

こんにちは。白羽(shiroha_F14)です。
この度友人のアイデアによりFlutter/Dartの開発をやってみようと思い立ったので、備忘録ついでに開発内容を記事化します。
そしてあわよくばこれからFlutter/Dartをやろうという方の助けになったｒｳﾜﾅﾆｦｽﾙﾔﾒくぁｗせｄｒｆｔｇｙふじこｌｐ

#注意書き

• 本記事はあくまでFlutter/Dartの作業方法を(著者と同時に)知りたい人向けです。開発手順は滅茶苦茶に行ったり来たりする可能性もありますし、途中で挫折する可能性もあります。
• 本記事シリーズ(化するはず)には以下の要素が含まれます。
  • プログラミング2年目レベルのソースコード
  • そこら辺の学生並のソースコード
  • ホロライブ
  • 著者の好きな絵師
  • SiMやacor等レゲエパンクバンド及びロックバンドの話

#自分の開発経験
ここまでの記事が全部競プロであるところからお察しいただけた方もいるかと思われますが、モバイルアプリケーション開発は完璧な初心者です。
Android StudioでJava使ってアプリを作ろうとしたことはありますが、アイデアがなく頓挫しました。
純粋なプログラミングについてはC++ Java Python JavaScript(フロント/Node.js/deno)などを1年近く触っています。Dartは今回が初です。
開発そのものではありませんが作曲などもやっています。

#開発内容
学校でシャウトの練習をしまくっていたら、ペプシを飲んでいた友人が「それ録音してシンセ化できるアプリ作らん？」と言ってきたので、やることにしました。
そんな簡単に出来るのか？

#予定
恐らくDartだけだと難しい所が多いと思うので、Pythonでサーバを用意してそちらで録音データの周波数解析を行うことにしました。
詳しい計画などは行き当たりばったりでやろうと思います。

#環境

• OS
  • Windows 10 Home (20H1)
• エディタ
  • Intellij Android Studio 4.1.1

#今日やったこと
記念すべき一日目は環境構築から始まりました。
##環境構築
###SDKの導入
まずは何も考えず公式からSDKを落とします。

公式サイトは英語ですので、注意点や作業内容を以下に和訳しておきます。

• Windows7, 8についてはWindows PowerShellを有効にして、バージョンを5.0以降にする必要があります。
• Git for Windows 2.x～を入れておく必要があります。インストール時にUse Git from the Windows Command Promptを有効にしていない場合、あるいはまだインストールしていない方は、有効にしましょう。
• まさかとは思いますが、Flutterツール本体のみでも1.64GBのディスク容量が必要なので、無い場合はなんとかして確保してください。

以上の確認が終わり次第、Get the Flutter SDKの項にあるflutter_windows_..*-stable.zipのボタンを押してDLします。
(本記事の執筆時点ではver2.0.5でした。)

ここ。
どうでもいいけどflosは原曲も歌みたもいいぞ。

DLは割と容量あるので気長に待ちましょう。終了し次第それを解凍します。解凍して出てきたフォルダーを任意の場所に配置しましょう。

####注意点

• ファイルを配置した場所までの絶対パスをメモ帳にコピるなり何なりして保持しておいてください。
  • flutterという名前のフォルダを選んでalt+Enterを押し、場所:という部分が絶対パスです。
  • コピーしたら末端に flutter\bin と書き足してください。
• Program Filesなどアクセスに特権が必須である場所には配置しない方が非常に良いです。PCによっては動きません。

###pathを通す

次に、スタートメニューでpathと入力し「システム環境変数の編集」を呼び出します。

「環境変数(N)…」をクリックすると環境変数の一覧が表示されるので、ここでシステム環境変数(S)側の一覧からPATHを探します。

PATHがあればその行をダブルクリックで編集に入ります。
(先ほど保持しておいた絶対パスをctrl+Cし、)「新規(N)」を押すと新しい行が生み出されるので、ここで前述の絶対パスを貼り付けます。終端はbinまで含まれていることを確認しましょう。

PATHが無ければ「新規(W)…」をクリック。
変数名は PATH
変数値は 先ほどの絶対パス
としてOK。

以上、pathが通りました。

###関連ツールを導入する

Flutter SDKは導入できましたが、ここから更にAndroid Studioを導入する必要があります。
こちらにアクセスしてインストーラを入手、起動してこれまたしばらく待ちましょう。

###Flutter Doctorを実行する

ここまでくればFlutterコマンドをコマンドプロンプトから呼び出せるはずなので、手始めにバージョンを確認しましょう。
スタートメニューでcmdと入力し、何となくですが管理者として実行します。

flutter --version

以上を実行します。
Flutterはコマンドとしてナントカ～的なエラーが出たら、先ほどのPATHが正しくないので修正しましょう。
正しく実行された場合は

Flutter 2.0.5 • channel stable • https://github.com/flutter/flutter.git
Framework • revision adc687823a (6 days ago) • 2021-04-16 09:40:20 -0700
Engine • revision b09f014e96
Tools • Dart 2.12.3

と表示されると思われます。

次に

flutter doctor

を実行します。
上手くいくと

[√] Flutter (Channel stable, 2.0.5, on Microsoft Windows [Version 10.0.19042.928], locale ja-JP)
[√] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[√] Chrome - develop for the web
[√] Android Studio (version 4.1.0)
[√] IntelliJ IDEA Community Edition (version 2020.2)
[√] VS Code (version 1.55.2)
[√] Connected device (3 available)

などと表示されます。
全ての項目について[√]であれば問題ありません。

自分の場合はAndroidナントカで[X]が出現しました。

[X] Android license status unknown.

このような場合は

flutter doctor --android-licenses

を実行することで大抵は解決されるようですが、自分の場合はここで思いっきりJava風味のあるエラーが出現しました。コピーを忘れたので本文は割愛しますが、エラーが

Exception in thread "main" java.lang.NoClassDefFoundError

である場合は
こちらのissueに従って操作した結果本エラーが解消され先ほどのコマンドを実行できました。
内容としては

なんかわからんけどAndroid 10.0用のSDKが必要

みたいです。従って

これの「⚙構成▼」→「SDKマネージャー」→
左側タブのSystem Settingsを開きAndroid SDKをクリック。やや上の方にあるSDK Platformsを開いてAndroid 10.0 (Q)をチェックします。以上、OKボタンを押すとSDKのダウンロードが開始されるのでまたしばらく待ちましょう。

完了後あらためて flutter doctor --android-licenses を実行すると恐らくエラーが解消されて実行できると思います。
最後にflutter doctorを再度実行し、すべて[√]であることを確認しましょう。

###完了
これにてFlutterの動作環境がようやく整備されました。私の2021年4月22日午前が全部吹き飛びました。
これからようやくプログラミング開始です。

#あとがき
いや環境構築しかしてないだろって思ったそこの貴方、ええ大変その通りです。でもこの後に今日やった開発全部載せたら滅茶苦茶に長い記事になってしまうので、別々に分けることにしました。
Day.1-2は明日投稿いたします。

それでは次回もよろしくお願いします。