はじめに
私はプログラミングをしたことがない初心者ですがFlutterを導入しました。その導入方法とアプリ開発環境のオススメを記載致します。
以下の公式ページにある、セットアップ方法、テストランまでのガイドラインに沿って説明していきます。尚、当方のPC環境は【Windows10_64bit】で実行したため【Windows10_64bit】のみの説明で進めていきます。
導入から難しかったですが、その内容を記載していきたいと思います。
私は理系でもありませんし仕事でもプログラミングを使いませんので、専門家の方からみると少しおかしなところがあるかもしれませんがご容赦ください。
今後はアプリ開発した経験が活かされる時代になるかなと思い勉強のためアプリ開発をしようと考え調べた結果「Flutter」なるものが良いということで導入をしてみました。しかしGoogleが用意してくれている導入方法サイトをみても英語ですし、各種サイトを見ても専門用語ばかりで意味が分かりませんでしたが開発できる環境までたどり着きました。なぜ、ちゃんと起動しているのが完璧な説明ができませんが備忘録を兼ねて公開いたします。
OSの選択
導入したいOSを選びます。
ここでは「Windows」を選びます。
スペック確認
必要なスペックを確認してください。
Zipファイルインストール
以下の場所からファイルをインストールしてください。
インストールしたフォルダは、任意の場所に回答してください。私は「Cドライブ」にしました。
（２．に書いてある内容は、『C：\ src \flutter。C：\ Program Files \などの昇格された権限が必要なディレクトリにFlutterをインストールしないでください』です。）
パスの設定
パスってなに？という感じでしたが、Windowsで使うにはパス設定しましょう、ということなので、まぁ認識してもらえるように許可を出すことなんでしょう。（無責任）
エクスプローラーを開いて”PC”を右クリックしプロパティを開きます。
”システムの詳細設定”を開きます。
詳細設定タブにある”環境変数”を開きます。
Path（パス）を「編集」で開きます。
解凍したflutterフォルダ内にある「bin」フォルダを指定します。
「新規」ボタンで”C:\flutter\bin”を新しく入力して「OK」をクリックします。
これでパス設定は完了です。
※下図の場合はすでに入力しています。
flutterを起動
コマンドプロンプトを開き「flutter doctor」を入力します。
Android Studioインストール
Android Studioをインストールします。
公式ページはこちら
任意のフォルダにインストールしてください。
私は設定を変えることなくこのまま進んでインストールしました。
デバイス追加
実機デバイス
Android端末実機を持っている方はUSBでPCと繋ぐことで、実機で動作確認をできます。
１にあるAndroid documentationページを参考に端末の開発向けオプションの許可設定をしてください。
次にUSBドライバーを取得します。
２のGoogle USB DriverからドライバーをPCにインストールします。
ドライバーファイルの取得方法は２種類あり、私はクリックしてzipファイルを取得しました。
記載されている内容が難しいですが、書いてある順番通りに進めていきます。
１．Android デバイスをパソコンの USB ポートに接続します。
２．Windows エクスプローラーで、[コンピューターの管理] を開きます。
３．[コンピューターの管理] の左ペインで、[デバイス マネージャー] を選択します。
→私の場合は［コンピュータの管理］を開くところが見当たらなかったので、PC内検索で［デバイスマネージャー］と入力したら出てくるのでそこから起動しましょう。
４．[デバイス マネージャー] の右ペインで、[ポータブル デバイス] や [ほかのデバイス] のような表示項目を見つけて展開します。
→私の場合は「X2-HT」ですね。
５．接続したデバイスの名前を右クリックして、[ドライバー ソフトウェアの更新] を選択します。
６．ハードウェアの更新ウィザードで、[コンピューターを参照してドライバー ソフトウェアを検索] を選択し、[次へ] をクリックします。
７．[参照] をクリックして、USB ドライバのフォルダを探します。たとえば、Google USB ドライバは、android_sdk\extras\google\usb_driver\ にあります。
[次へ] をクリックして、ドライバをインストールします。
→android_sdkってなにという感じでしたので、USBドライバーを解凍したところを選択しました。
仮想デバイス
Android Studioで仮想デバイスのセッティングをします。
Android Studioを起動し、Tool＞AVD Managerを開きます。
「Create Visual Device」をクリックします。
機種は・・・なんでも良いと思います。
私は始めから選択されていたもので進めました。Nextで次へ進みます。
次に、言語を選びます。正直よくわからないので最新のものをダウンロードしました。
ダウンロードが完了したらNextで次に行きます。
ちなみに、Googleの開発言語は、開発順にAからアルファベット順になっていてお菓子の名前が付けられているそうです。
まぁ・・・大丈夫でしょう。
「Finish」で完了です。
デバイス確認
コマンドプロンプトで「flutter devices」と入力したら、起動しているデバイスが確認できます。
Android Studioを起動したら、仮想端末の画面が出てくるはずです。
テストアプリの動作確認で使用するため、電源をオンにしておきましょう。
エディターの設定
VS Codeのインストール
私はエディターはVS Codeを使用します。
公式ページからインストールします。
Flutter & Dartプラグイン導入
VS Codeにプラグインを導入していきます。
つまり、FlutterとDart(言語)を使えるようにするんですね。
順番に見ていきましょう。
ViewにあるCommand Paletteを開いて「Extensions」を入力し「Install Extensions」を選択します。
左の入力欄に「flutter」を入力し「install」します。
恐らく一緒に「Dart」もインストールされていると思いますが検索して、歯車マークになっていればインストールされています。
同じ要領で、View＞Command Paletteを開いて「doctor」を検索し「Flutter: Run Flutter Doctor.」を選択すると何かが起動します。Flutterを起動したのでしょう。下図のような感じになるはずです。
テストアプリ起動
Visual Studio Codeで進めていきますね。
アプリフォルダ作成
Viewで「flutter new project」を入力して選択します。
ここに入力した名前のフォルダが作成されます。
どこに保存するか聞かれるので好きなところに保存して下さい。
ちなみに、主にプログラムするファイルは、「lib」フォルダ内の「main.dart」になります。
テストプログラム起動
いろいろ記載されていますが、先程設定したAndroid Studioの仮想デバイスが認識されているかどうかの確認です。実機の場合はそちらの機種名が表示れます。
変更したい場合は、機種名をクリックすると選択できます。
Setting buttonをクリックしましょうと書いていますが、亀マーク＞歯車マークをクリックします。そうすると、launchが開きます。
次に、実行していきますが「F5」キーで大丈夫です。
少し時間がかかりますが、仮想デバイスにアプリが表示されるはずです。
ホットリロード機能の有効化
flutterの目玉機能であるホットリロード機能の有効化の方法です。
main.dartファイルにある「’You have pushed the button this many times’」の記載を変更するのですが、サンプルアプリでは95行目にあります。
コチラを変更して保存して再起動すると有効になるはずです。
以上です。
コメント