LoginSignup
4
2

More than 3 years have passed since last update.

【2019年5月】無理やり flutter web を動かしたメモ

Last updated at Posted at 2019-05-10

本家サイトをあんまり見ないで適当にやってみた。

良い子はまねしちゃダメなパターンの Flutter の動かし方です。
FlutterやDartの一切入っていない環境に、Flutterを新規インストールしてみます。

対象環境

OS: Windows 10 Pro

Flutter のインストール

以下のサイトからFlutter一式のzipをまずダウンロードしてきます。

適当なフォルダに解答します。"スペースはやめてね" とあるので案内に従って "C:\apps\flutter" に解凍いたしました。

続いて C:\apps\flutter\flutter_console.bat をダブルクリックで起動します。

よくわかりませんが、準備OKとのことです。(いや、全然OKじゃないけどね・・・)

PATH の設定

以下の PATH を追加します。長いのでまず、flutterのインストールフォルダを FLTR_HOME とかにしてしまいます。

  • FLTR_HOME = C:\apps\flutter

続いて以下の3か所をパスに追加します。

  • %FLTR_HOME%\bin
  • %FLTR_HOME%\bin\cache\dart-sdk\bin
  • %FLTR_HOME%.pub-cache\bin

ついでに MINGW64 を使っている人はお好みで MSYS2_PATH_TYPE=inherit もつけちゃいましょう。

doctor に怒られてみる。

コマンドプロンプトで以下のように診断ツールを起動します。

> flutter doctor

Android の開発環境がないと issue がいろいろ出てきますが、Webなのでガン無視でOKです。

Visual Studio のプラグインは表示されたURLコピペでインストールしておきましょう。

新規プロジェクトの作成

Visual Studio でコマンドパレット shift+Ctrl+P を開き、

Flutter: New Web Project

を実行します。適当なフォルダにプロジェクトを作成してください。
たぶん、エラーが出ます。(ぉ
エラーメッセージでどうもローカルに clone したリポジトリが見れないと騒いでいるので手動でやってみます。
VS Code のターミナルから、flutter_webをcloneします。

git clone --mirror https://github.com/flutter/flutter_web.git

webdev のインストール

以下のコマンドでwebdevをインストールします。

flutter packages pub global activate webdev

パッケージのインストール

続いて依存パッケージをインストールします。

flutter packages pub get

試しに webdev を叩いてみる。

以下のコマンドで webdev を叩いてみます。

webdev serve
webdev could not run for this project.
Could not find a file named "pubspec.yaml" in "C:\Users\xxxxx\AppData\Roaming\Pub\Cache\hosted\pub.dartlang.org\protobuf-0.13.11".

なんだか Protobuf がないと怒られましたね。。。
インストール方法は以下のページにありました。

案内に従って pubspec.yaml に protobuf-0.13.11 を追加します。

pubspec.yaml
...
dependencies:
  flutter_web: any
  flutter_web_ui: any
  protobuf: ^0.13.11
...

そして再度、依存パッケージのインストールを行います。

flutter package pub get

再チャレンジ

今度はどうでしょう?

webdev serve
[INFO] Serving `web` on http://localhost:8080
[INFO] Running build completed, took 37.5s
[INFO] Caching finalized dependency graph completed, took 283ms
[INFO] Succeeded after 37.8s with 548 outputs (3169 actions)

動いたようです。
めちゃくちゃな手順でしたが動いてしまったのでメモしておきます。

引き続き lib/main.dart いじってみますか。

間もなくリモートでVS Codeが動かせるようになる(VSCode公式の機能で、リモートサーバにSSHして編集する【Insiders Preview】)]ということなのでローカル環境をまじめに作る気力もなくなってしまいました。
早くリモートで動かしたい~!

4
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
2