flutter環境構築(Windows編)
1. Windows の環境構築をしよう
ダウンロードしたファイルを Zip 形式になっているので解凍した上で、Local Disk 直下の開発用フォルダに配置してください
ここでは sdk という名前でフォルダを作成し、その直下に解凍した flutter フォルダを配置しています
- PATH を通す コマンドラインから flutter フォルダにアクセス出来るように PATH を通します
まず検索欄からenvと検索して、コントロールパネルを開きます
次にAdvancedのタブを開き、ウィンドウ下部にあるEnvironment Variablesをクリックします
次にPathを選択し、Editをクリックします
Newをクリックし、先ほど作成した flutter フォルダ内の「binフォルダ」のパスを入力します
ファイルのパスを確認する 最後に下記コマンドを実行し、パスが表示されれば設定成功です
$ which flutter
3.Android Studio のセットアップ こちらの公式サイトからAndroid Studioをダウンロードします
利用規約文末の同意にチェックを入れ、ダウンロードを押します
ダウンロードが完了したら、ダウンロードしたファイルをダブルクリックしてインストールを開始します
Android Studio の設定とインストール 次に Flutter を使う為のプラグインを Android Studio にインストールしましょう
Flutter プラグインをインストール 最後にコマンドラインから Android を実行する為のAndroid SDK Command-line Toolsをインストールします
Android SDK CLI をインストール これで Android Studio のセットアップは完了です
- flutter doctor Android Studio と Xcode の設定が完了したら以下コマンドを実行してみましょう
$ flutter doctor
flutter doctorコマンドでは Flutter SDK、 Dart、Android Studio、Xcode など Flutter 開発で必要とされるツールの設定状況を確認する事が出来ます
末尾に-vを付ける事で詳細な情報を表示してくれるので、エラーが発生しているような場合はflutter doctor -vで詳細を確認してください
! この時点で各々の PC 環境によって様々なエラーが発生する事があります。いくつか代表的なエラーを記述しますが、ここにないものがあればコメントいただければ、可能な限り追記します。
エラー：Java が実行できない ここまで来ればもう一息です。
最後にこの android license を設定しましょう
メッセージの指示通り、ターミナルから下記コマンドを実行しましょう
$ flutter doctor --android-licenses
すると下記の通り、いくつかのライセンス契約書を確認する様に求められるので y を入力した後 Enter を押して進みます
Review licenses that have not been accepted (y/N)? y
すると５枚ほどライセンスの確認書類が表示されるので全て y を入力して Enter で承認します
通常のターミナルに戻ったら設定完了です
- 必要な項目が Green になれば終了！🎉 最後にもう一度flutter doctorを実行し、Flutter、Android toolchain、Android Studioなどの項目に緑色のチェックが入っていれば 完了です。
ChromeとVisual Studioについては必要になった際に適宜インストールしてください。
2.dartプログラムの作成とテスト
2-1. Dartのプログラムを試す:
1.1. DartPadを使う:
DartPadはWebブラウザで動作するDartのオンラインエディタで、インストールが不要です。 DartPadにアクセスして、プログラムを入力し、実行してみましょう。
1.2. Flutterの環境を利用する: ターミナルやコマンドプロンプトを開き、新しいフォルダを作成して移動します。
mkdir dart_sample cd dart_sample
その後、以下のようにDartのファイルを作成します。
echo 'void main() { print("Hello, Dart!"); }' > main.dart
そして、以下のコマンドでDartのプログラムを実行します。
dart main.dart
"Hello, Dart!"と表示されれば成功です！
2-2. Android Studioでのテスティング
2.1. Android Studioを起動します。
2.2. "Start a new Flutter project"を選択します。
2.3. "Flutter Application"を選択して"Next"をクリックします。
2.4. プロジェクトの名前や場所を設定します。例: 名前を"my_simple_app"として"Next"をクリックします。
2.5. いくつかのオプションが表示されるので、デフォルトのままで"Finish"をクリックします。
2.6. しばらくすると、新しいプロジェクトが開始されます。中心にはmain.dartというファイルが自動的に開かれるはずです。これがアプリのメインファイルです。
