5
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

flutter webでexampleを動かすまで(flutterインストール済みを想定)

Last updated at Posted at 2019-05-08

flutterのバージョンを(1.5.4以上に)あげる

Flutter 1.5 and above enable support for targeting the web with Flutter, including Dart compilation to JavaScript. To use the Flutter SDK with the flutter_web preview make sure you have upgraded Flutter to at least v1.5.4 by running flutter upgrade from your machine.

とあるので下記コマンドでバージョンを上げる

flutter upgrade

flutter_webをcloneしてくる

Clone this repository locally.

とのことなので下記でcloneしてくる

git clone git@github.com:flutter/flutter_web.git

hello_worldディレクトリへ移動(hello_worldのexampleを実行してみる場合)

cd examples/hello_world/

別のexampleでも同じようにディレクトリ内に移動しておく

webdevをインストール

To install the webdev package, which provides the build tools for Flutter for web

とのことなので下記でwebdevをインストール

bash_profileの部分は適宜変更した形で下記の一連のコマンドを実行

flutter packages pub global activate webdev
echo 'export PATH="$PATH":"$HOME/.pub-cache/bin"' >> ~/.bash_profile
exec $SHELL -l
# or
source ~/.bash_profile

上記方法でインストールしてwebdevが実行できない場合はwebdev実行時に[command]の部分を適宜変更して下記の形で実行

flutter packages pub global run webdev [command]

(当初公式に代替コマンドが乗っていなかったため)自分が試した方法

自分の環境だと公式の方法で動かすことができなかったため下記コマンドでインストールした。(前提としてdartが必要。pubが使えれば何でも良い)

pub global activate webdev

パッケージを更新

flutter packages upgrade

ローカル実行

webdev serve

表示されたportにアクセスすればhello worldが表示される。

flutter_webをはじめて触った際に書いたものはこちら
ただ触ったって話だけですw

後でfirebase hostingとかにあげるところまでやってみようかと思います。
flutter webのアプリをfirebase hostingで公開してみました

参考

flutter_web
Flutter Webを動かしたときにつまづいたこと

関連

flutter webのアプリをfirebase hostingで公開するを書きました。
Flutter Web で Firestore を使うも書きました。

追記

公式ドキュメントに下記の部分が追記されました。

Note: if you have problems configuring webdev to run directly, try:
flutter packages pub global run webdev [command].

5
6
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
5
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?