Zenn
🛠️

【2023最新】Flutterのvscode環境構築 Mac編

2023/06/16に公開
Flutter
VS Code
macOS
環境構築
lisras
tech

今回は、MacOSでflutterの開発環境を０から構築します。

プログラミング学習をする上で一番最初の鬼門である「環境構築」を0から一緒に行うので、
最短最速でflutterの学習に入る事ができます。
また、今回は「vscode」というエディターを使用してflutterの開発環境を構築します。
汎用性が高く、便利な拡張機能が豊富なので開発がグイグイ進むようになります。

✅今回の内容

  1. FlutterSDKのダウンロード
  2. FlutterのPathを通す
  3. 必要なツール等をダウンロード・設定
  4. vscodeのダウンロードとセットアップ
  5. 実際に動かしてみる

✅メイン内容

🛠　FlutterSDKのダウンロード

1. flutterのSDKをMacにダウンロード

flutter公式サイトからダウンロードしましょう。

チップが『intel』の人はIntelのzipをダウンロード。
『Apple M1』『Apple M2』の人はApple Siliconのzipをダウンロードしてください。

チップの確認方法

  1. 画面の左上にあるをクリック。

  2. 『このMacについて』をクリック。

『チップ』と記載されている所の右側の文字がお使いのMacのチップです。

2. ファイルの解凍とフォルダの移動

ダウンロードが完了したら、zipファイルを解凍します。

すると、『flutter』というフォルダが作られます。

ユーザフォルダ直下に『dev』フォルダを作成し、先ほどの『flutter』フォルダをdevフォルダの中に移動させます。

フォルダの作り方と移動の仕方
  1. Finderをクリックしてユーザフォルダ直下に移動。
  2. 下記の場所をクリック。
  3. 『新規フォルダ』とあるのでクリックし、『dev』と入力。

すると、『dev』フォルダが出来上がります。🍎

🛠　FlutterのPathを通す

1. シェルの確認

『⌘command』＋『スペース』を押して、Spotlight検索を開きます。

『ターミナル』と入力すると、ターミナルが起動します。

そしたら、下記コマンドを入力します。

echo $SHELL

『/bin/bash』と表示された場合、お使いのMacのシェルはbashで、
『/bin/zsh』と表示された場合、お使いのMacのシェルはzshです。

2. パスを通す

ターミナルで下記コマンドを入力します。

// bashの場合
vim .bash_profile

// zshの場合
vim .zshrc

すると以下のような画面になります。

そしたら、iキーを押して『INSERT』モードに切り替えます。
下記コマンドを入力し、Pathを入れます。

export PATH="$PATH:<ここにflutterのpath>"

Pathを入れ終わったらescキーを押してINSERTモードを終了し、下記コマンドを入力します。

:wq

その後、下記コマンドを入力し、Pathが表示されていれば無事Pathが通ったことになります。🍎

which flutter

#実行後　（表示例）
/Users/shinta/dev/flutter/bin/flutter

🛠　必要なツール等をダウンロード・設定

1. AndroidStudioダウンロード

AndroidStudio公式サイトからダウンロードしましょう。
チップは先ほど『FlutterSDKのダウンロード』で確認したチップを選択します。

案内通りにインストールを進めていきます。
一通りインストールが終わったら、Android Studioの画面の中から『⋮』を押して
『SDK Manager』をクリックします。

その後、タブから『SDK Tools』をクリックします。

その中から『Android SDK Command-line Tools』にチェックを入れて、
画面下部の『Apply』をクリックしインストールを進めます。

これでAndroid Studioのセットアップは完了です。🍎

2. GoogleChromeダウンロード

GoogleChrome公式サイトからダウンロードしましょう。

案内通りにインストールを完了したらGoogleChromeのセットアップも完了です。🍎

3. Xcodeダウンロード

『⌘command』＋『スペース』を押して、Spotlight検索を開きます。
『App store』と入力します。

起動したApp storeの検索欄で『Xcode』と入力し、Xcodeをダウンロードします。

案内通りにインストールを完了したらXcodeのセットアップも完了です。🍎

3. Flutter doctorで確認

『⌘command』＋『スペース』を押して、Spotlight検索を開きます。
『ターミナル』と入力します。

下記コマンドを入力します。

flutter doctor

上記のように全てに✅がついていればOKです。🍎

🛠　vscodeのダウンロードとセットアップ

1. vscodeをダウンロード

Visual Studio Code公式サイトからダウンロードしましょう。

『Mac』を押してダウンロードします。

ダウンロード後、zipファイルを解凍してアプリを起動します。
すると、エディターが立ち上がります。

2. vscodeにflutterの拡張機能を追加

実際にこのvscodeでflutterを使用できるようにするために拡張機能を入れていきます。

画面の下記の場所をクリックします。

そしたら、検索欄のところに下記の文字を入力し、それぞれの拡張機能を入れましょう。

  • Flutter
  • Dart
  • （任意） Flutter Tree
  • （任意） Japanese Language Pack for Visual Studio Code

念のため、それぞれの拡張機能の簡単な説明を添えておきます。

Flutter

vscodeでflutterというフレームワークを使用するためにインストールします。

Dart

flutterはフレームワークであって、プログラミング言語ではありません。
実際に使用するのは『Dart』というプログラミング言語で、
vscodeで使用するためにインストールします。

Flutter Tree

flutterはUIに特化したSDKなので、画面を作るWidgetという要素の種類が豊富です。
HTMLのようにさまざまなWidgetを組み合わせてUIを構築していくのですが、
コード入力がめんどくさい時が多いです。
この『Flutter Tree』を使用することで簡単にWidgetのコードを書くことができるようになります。

ただ、最初から使用してしまうとイマイチ理解しないまま書いてしまう可能性があるので、
最初からの使用はあまりオススメはしません。

Japanese Language Pack for Visual Studio Code

vscodeはデフォルトが英語設定です。
英語が苦手な方や、日本語の方が開発しやすい。といった方はインストールすると便利かもしれないです。

これでvscodeのセットアップも完了です。🍎

🛠　実際に動かしてみる

1. プロジェクトを作成

vscodeを起動して、
『⬆︎ Shift』＋『⌘command』＋『P』を押し、入力欄に『flutter』と入力します。

『New Project』を押し、『Application』をクリックします。

今から作成するプロジェクトをFinderのどこに配置するか聞かれるので、
好きな場所を選択して『Select a folder to create the project in』ボタンを押します。

『Project Name』にプロジェクトフォルダの名前を入力します。

これでプロジェクトの作成は完了です。🍎

2. アプリビルド

作成すると下記のような画面になります。

今回は、Emulatorを使用してアプリをビルドしようと思います。
下記の場所をクリックします。　（文言が違う可能性があります。）

『Create iOS emulator』 または『Create Android emulator』をクリックして、
Emulatorを立ち上げます。

その後、下記の場所をクリックしてアプリをビルドします。

flutterの新プロジェクトを作成すると、デフォルトでカウンターアプリのコードが記入されています。
アプリがビルドされ、デフォルトのカウンターアプリが立ち上がります。

右下のボタンを押すと真ん中の数字がインクリメントされるアプリです。

これで、vscodeを使用してflutter開発を行うための開発環境の構築が完了しました。🍎

✅まとめ

今回はvscode上でFlutterの開発環境を構築しました。
Android StudioでもFlutterを使用したアプリの開発はできますが、拡張機能やコードの見やすさ、
汎用性の高さなどの観点からvscodeで開発する方が良いと思います。
コードを書く速さは断然vscodeの方が早いです。

実機ビルドについてはまた今度記事を出します。

今回はここまで

Discussion