Flutterの開発環境を準備してみた

 

夏休みということもあって、久々にアプリ開発でもやってみるかという気になったのですが、今さらC++とMFCっていう世の中でも無いだろうと思い、新しい開発プラットフォームにチャレンジすることにしました。どれにするか色々悩んだのですが最近勢いがあると評判のGoogleのFlutterをチョイスしました。

マルチプラットフォームという所が魅力ですが、とりあえずWindowsで開発してWindowsで実行するアプリを作成したいと思います。

初めての Flutter アプリ  |  Google Codelabs

このページを見ながら開発ツールを入れていきます。

まずはVisual Studio Codeを公式から普通にインストールします。

Git for Windowsも入っていなければ入れます。これを入れておかないとSDKのインストールでひっかかります。

そしてVisual Studio Codeに"Flutter"の拡張機能を入れてこの拡張機能経由でSDKをインストールします。

手順としてはCtrl+Shift+Pでコマンドパレットを開いて"Flutter: New Project"とするとSDKをインストールしていない場合、インストールが促されるのでインストールフォルダなどを指定してインストールします。

なおフォルダですが日本語やスペースが含まれるような所は避ける必要があります。プロジェクトフォルダをマイドキュメントに作ってコンパイルが通らなくて慌てました。

ここでデフォルトで作られるサンプルアプリを実行しようとしたらコンパイルでエラーが発生しました。なんとWindowsで実行するアプリをビルドする場合はCodeじゃないVisual Studioが必要でした！しょうがないのでVisual studio communityをC++のデスクトップ開発環境を選択してインストールしました。

これで一通り揃ったはずです。Power Shellから">flutter doctor"と打つと必要なものがインストールされているか確認できます。

これでようやく最初のスクリーンショットのようにサンプルが実行できるようになりました。

これで少し遊んでみたいと思います。

Visual Studio Codeの設定

 最近、Visual Studio Codeを積極的に使おうと努力しているのですがなかなか手に馴染みません。なんかヒントはないかなとGoogleで検索してみようかと「vs code 」と入力したところで検索候補に「日本語化」と出てきたので、そのまま検索してみたところトップに設定方法がそのまま表示されました。

Visual Studio Codeの日本語化設定

1. Visual Studio Codeを開く

2. メニューから［View］-［Command Palette］を選択

3. ［Configure Display Language］を選択

4. ［Install Additional Laugage］を選択サイドバーに拡張言語パックが表示されます。

簡単だけど、自分では絶対探し出せない自信がある。とりあえず日本語で表示できるようになりました。

日本語といえばソースコードのコメントが化ける場合があって文字コードの設定を合わせないとと思っていたのですが、実は自動認識の機能がありました、そしてなぜかデフォルトはオフ。どうかしています。

ファイル>基本設定>設定からfiles.autoGuessEncodingと入力しcheckをつけます。