FlutterをインストールしてVisual Studio Codeにセットアップするまで
ここ最近になってモバイルアプリ(iOS/Android)の開発フレームワークであるFlutterが注目を浴びはじめています。
プログラミング言語はDartで、もともと死に体だった言語ですが今後モバイルアプリ開発で息を吹き返すのでしょうか。個人的に注目しておきたいので少し触れようと思いセットアップしました。
個人的にはAndroid Studioは重いので好きではなく、Visual Studio Codeにセットアップしました。
[ad#top-1]
Flutterのダウンロードとインストール
Flutterは以下のサイトからダウンロードできます。
Webサイトの「GET STARTED」ボタンを押します。
すると、以下のようにOSごとにボタンがあります。今回はLinuxにインストールしたので「INSTALL ON LINUX」のボタンを押してLinux版をインストールしました。
「Get the Flutter SDK」という項目があるのでそこまで行き、「flutter_linux_v0.5.1-beta.tar.xz」というリンクをクリックするとダウンロードできます。
あとはダウンロードしたフォルダーまで行って、そこから以下のコマンドで解凍します。
tar xf flutter_linux_v0.5.1-beta.tar.xz
解凍が終わったらパスを通します。
export PATH=`pwd`/flutter/bin:$PATH
ここまで終わったら以下のコマンドで依存関係を確認します。
flutter doctor
以下の通り依存関係の確認ができました。VS Codeで[!]となっています。
Visual Studio Code側のセットアップ
Visual Studio Codeの左メニューボタンから一番下の拡張機能をクリックし、検索ボックスから「Flutter」と打ちます。するとFlutterプラグインが現れるのでそれをクリックすると、右のメイン画面にFlutterプラグインの説明画面が表示されるので「インストール」ボタンをクリックしてインストールします。
ダウンロードが終わると画面右下に「Dart-Code.flutterのVSIXを手動でインストールしてください」とメッセージが現れるので、「VSIXからのインストール」ボタンをクリックします。
以下のようにファイルのダウンロード先を指定してダウンロードします。
ダウンロードが終わったら、VSCodeの拡張機能画面から上部の「・・・」をクリックし、「VSIXからのインストール」を選択します。
先ほどダウンロードした「Dart-Code.flutter-2.17.1.vsix」を選択し「インストール」ボタンを押します。これでVSCodeにインストールできます。
以下のようなメッセージが現れるので「今すぐ再度読み込む」ボタンをクリックします。
改めて flutter doctor
コマンドで依存関係を確認すると、VS Codeで[レ]となりました。
プロジェクトの起動
VSCodeを立ち上げて、「表示」−「コマンドパレット」を選択します。
出てきたコマンドボックスに、「Flutter: New Project」を打ってEnterキーを押します。
以下のように怒られました。そういや最初にインストールしたFlutter SDKの場所をVSCode側で設定していませんでした。「Locate SDK」をクリックします。
Flutter SDKの場所を指定します。
再度「Flutter: New Project」を打つと今度はプロジェクト名を聞かれるので任意のプロジェクト名を指定します。
プロジェクトの保存先を聞かれるので指定します。「Select a folder to create the project in」ボタンを押します。
コンソール出力にいろいろ出てきました。
プロジェクト作成が終わると以下のような画面になります。「main.dart」のソースコードが現れました。
とりあえずここまでがFlutterをインストールしてVSCodeにセットアップするところまでです。
次回はソースをビルドして実機確認まで書きたいと思います。
[ad#ad-1]
スポンサーリンク