BETA

Flutter + Vim の開発環境を整えた

投稿日:2020-04-26
最終更新:2020-04-26

Flutterの環境構築をしました。

Flutter

https://flutter.dev/

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.

FlutterはGoogleで開発されたOSSのUIフレームワークで、モバイルやweb、デスクトップなどマルチプラットフォームで動くアプリを作ることができます。


環境

  • macOS Catalina v10.15.2

基本的にはFlutter公式のget-startedを参照しました。

やったことはこんな感じです。

  • Flutter SDKのインストール+設定
  • Dartのインストール
  • Android Studio, Xcodeのセットアップ
  • エディタ(Vim) の設定
  • DevToolsのインストール

Flutter SDK のインストール+設定

https://flutter.dev/docs/get-started/install/macos#get-sdk からsdkを落としてくる

unzip

$ unzip /path/to/installed/zip/file  
パスの設定
# シェルの設定ファイル(.zshrc, .bash_profile 等)に追記  
# (unzipしたものをHOMEディレクトリに置いた)  
export PATH="$PATH:$HOME/flutter/bin"  
設定を読み込む
# シェルの設定ファイルを指定して読み込む  
$ source /path/to/shell/config  
flutter precacheする

The flutter tool downloads platform-specific development binaries as needed. For scenarios where pre-downloading these artifacts is preferable (for example, in hermetic build environments, or with intermittent network availability)

$ flutter precache`  

Dart のインストール

homebrewでDartをインストール

$ brew tap dart-lang/dart  
$ brew install dart  

Android Studio, Xcode のセットアップ

flutter doctor を実行すると足りていない設定をリストアップしてくれるので、それに従っていくつかインストールする。
自分の場合はAndroid Studioが入っていなかったので、

$ brew cask install android-studio  

とライセンス周りのwarningが出ていたので、

$ flutter doctor --android-licenses  

を実行しました。

エディタ(Vim) の設定

2つプラグインを入れました。

dart-vim-plugin

Dartのsyntax highlightやindentをいい感じにする公式のプラグイン

dein.vim でインストール

[[plugins]]  
repo = 'dart-lang/dart-vim-plugin'  
on_ft = ['dart']  

coc-flutter

coc.nvim のFlutter用プラグイン

:CocInstall coc-flutter  

coc-flutterには、ファイルのsave時にFlutterのhot reloadを実行する機能があるらしいのですがうまく動かなかったので、hot-reload.vimを参考に.vimrcへ設定を追加しました。

function! TriggerFlutterHotReload() abort  
  silent execute '!kill -SIGUSR1 $(pgrep -f "[f]lutter_tool.*run")'  
 endfunction  
 autocmd! BufWritePost *.dart call TriggerFlutterHotReload()  

DevTools のインストール

FlutterのDevTools (https://flutter.dev/docs/development/tools/devtools/cli) をいれると、Inspector, Performance, Loggingとか超便利な機能が使えます。

$ flutter pub global activate devtools  

起動は

$ flutter pub global run devtools  

で、127.0.0.1:9100をブラウザで開く

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@ebknの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう