LoginSignup
7
4

More than 3 years have passed since last update.

Flutter環境もない状況からFlutter Webの環境を構築

Last updated at Posted at 2019-07-06

Flutterの準備

https://flutter.dev/docs/get-started/install に従ってFlutterの準備をする

パッケージインストール

https://flutter.dev/docs/get-started/install から該当のOSの手順でインストール

Mac

Flutter SDK をダウンロード

解凍と配置

$ mkdir development
$ cd development/
$ unzip ~/Downloads/flutter_macos_v1.5.4-hotfix.2-stable.zip
Archive:  /Users/XXXX/Downloads/flutter_macos_v1.5.4-hotfix.2-stable.zip
   creating: flutter/
  inflating: flutter/CODE_OF_CONDUCT.md  
  inflating: flutter/LICENSE         
  inflating: flutter/PATENTS         
   creating: flutter/bin/
  【略】

PATHを通す

PATHを通す先を確認
$ pwd | echo $(cat)/flutter/bin
/User/XXXX/development/flutter/bin
PATH追加
$ vi ~/.bash_profile
# flutter
export PATH="/Users/XXXX/development/flutter/bin:$PATH"
反映
$ source ~/.bash_profile

必要なライブラリの準備

通常であればやらなくて問題なし

$ flutter precache

  ╔════════════════════════════════════════════════════════════════════════════╗
  ║                 Welcome to Flutter! - https://flutter.dev                  ║
  ║                                                                            ║
  ║ The Flutter tool anonymously reports feature usage statistics and crash    ║
  ║ reports to Google in order to help Google contribute improvements to       ║
  ║ Flutter over time.                                                         ║
  ║                                                                            ║
  ║ Read about data we send with crash reports:                                ║
  ║ https://github.com/flutter/flutter/wiki/Flutter-CLI-crash-reporting        ║
  ║                                                                            ║
  ║ See Google's privacy policy:                                               ║
  ║ https://www.google.com/intl/en/policies/privacy/                           ║
  ║                                                                            ║
  ║ Use "flutter config --no-analytics" to disable analytics and crash         ║
  ║ reporting.                                                                 ║
  ╚════════════════════════════════════════════════════════════════════════════╝

Googleへの統計データ・クラッシュレポートの送信を止める

$ flutter config --no-analytics
Analytics reporting disabled.

確認

$ flutter --version
Flutter 1.5.4-hotfix.2 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 7a4c33425d (5 weeks ago) • 2019-04-29 11:05:24 -0700
Engine • revision 52c7a1e849
Tools • Dart 2.3.0 (build 2.3.0-dev.0.5 a1668566e5)

Android SDKが必要なのでAndroid Studioをインストール

https://developer.android.com/studio/ からダウンロードしてインストールし、起動

Android のライセンス同意(途中の質問で問題なければ毎度 y)

$ flutter doctor --android-licenses
Warning: File /Users/XXXX/.android/repositories.cfg could not be loaded. 
6 of 6 SDK package licenses not accepted. 100% Computing updates...             
Review licenses that have not been accepted (y/N)? y

1/6: License android-googletv-license:
---------------------------------------
Terms and Conditions

This is the Google TV Add-on for the Android Software Development Kit License Agreement.

1. Introduction
 【略】

Accept? (y/N): y
All SDK package licenses accepted

Xcodeをインストール

https://developer.apple.com/xcode/download/ もしくはApp Storeからダウンロード・インストールし起動

brewで必要なライブラリをインストール

$ brew update
Updated 1 tap (homebrew/core).
【略】


$ brew install --HEAD usbmuxd
==> Installing dependencies for usbmuxd: autoconf, automake, libtool, pkg-config, libplist and libusb
==> Installing usbmuxd dependency: autoconf
【略】


$ brew link usbmuxd
Warning: Already linked: /usr/local/Cellar/usbmuxd/HEAD-60109fd_1
To relink: brew unlink usbmuxd && brew link usbmuxd


$ brew install --HEAD libimobiledevice
Updating Homebrew...
==> Installing dependencies for libimobiledevice: gdbm, openssl, readline, sqlite, xz, python, libxml2 and libtasn1
【略】


$ brew install ideviceinstaller
==> Installing dependencies for ideviceinstaller: libzip
【略】

$ brew install ios-deploy
==> Downloading https://homebrew.bintray.com/bottles/ios-deploy-1.9.4.mojave.bottle.tar.gz
######################################################################## 100.0%
==> Pouring ios-deploy-1.9.4.mojave.bottle.tar.gz
🍺  /usr/local/Cellar/ios-deploy/1.9.4: 7 files, 157.2KB


$ brew install cocoapods
==> Downloading https://homebrew.bintray.com/bottles/cocoapods-1.7.1.mojave.bottle.tar.gz
==> Downloading from https://akamai.bintray.com/fb/fbfdae2a8c69806bf1875751771d99fa0efb0675c5d748771f71d323cf724b93?__gda__=exp=1559641196~hmac=750d781ccae10375316e90d4694783d4c2b2932ad211e55
######################################################################## 100.0%
==> Pouring cocoapods-1.7.1.mojave.bottle.tar.gz
🍺  /usr/local/Cellar/cocoapods/1.7.1: 9,774 files, 14.8MB

$ pod setup
Setting up CocoaPods master repo
  $ /usr/bin/git clone https://github.com/CocoaPods/Specs.git --progress -- master
  Cloning into 'master'...
  remote: Enumerating objects: 12627, done.        
  remote: Counting objects: 100% (12627/12627), done.        
  remote: Compressing objects: 100% (8565/8565), done.        
  remote: Total 3195132 (delta 6261), reused 8753 (delta 3512), pack-reused 3182505        
  Receiving objects: 100% (3195132/3195132), 656.24 MiB | 5.79 MiB/s, done.
  Resolving deltas: 100% (1906737/1906737), done.
  Checking out files: 100% (333762/333762), done.
Setup completed

確認

問題あるとこうなるので、1つずつ確認して対応

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.5.4-hotfix.2, on Mac OS X 10.14.5 18F132, locale ja-JP)
[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/setup/#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, set ANDROID_HOME to that location.
      You may also want to add it to your PATH environment variable.

[!] iOS toolchain - develop for iOS devices (Xcode 10.2.1)
    ✗ libimobiledevice and ideviceinstaller are not installed. To install with Brew, run:
        brew update
        brew install --HEAD usbmuxd
        brew link usbmuxd
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
    ✗ ios-deploy not installed. To install:
        brew install ios-deploy
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS.
        For more info, see https://flutter.dev/platform-plugins
      To install:
        brew install cocoapods
        pod setup
[!] Android Studio (not installed)
[!] VS Code (version 1.33.1)
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
    ! No devices available

! Doctor found issues in 5 categories.

すべて解決するとこうなる

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.5.4-hotfix.2, on Mac OS X 10.14.5 18F132, locale ja-JP)

[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] iOS toolchain - develop for iOS devices (Xcode 10.2.1)
[!] Android Studio (version 3.4)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.33.1)
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
    ! No devices available

次にFlutter Webのセットアップ

https://github.com/flutter/flutter_web.git クローンする

$ git clone https://github.com/flutter/flutter_web.git
Cloning into 'flutter_web'...
remote: Enumerating objects: 391, done.
remote: Counting objects: 100% (391/391), done.
remote: Compressing objects: 100% (346/346), done.
remote: Total 3631 (delta 61), reused 151 (delta 44), pack-reused 3240
Receiving objects: 100% (3631/3631), 25.31 MiB | 2.38 MiB/s, done.
Resolving deltas: 100% (1574/1574), done.

flutter_webのビルドツールをインストール

$ flutter pub global activate webdev
Resolving dependencies...
+ args 1.5.2
+ async 2.2.0
+ browser_launcher 0.1.2
+ build_daemon 1.0.0
+ built_collection 4.2.2
+ built_value 6.6.0
+ charcode 1.1.2
+ codemirror 0.5.6+5.47.0
+ collection 1.14.11
+ convert 2.1.1
+ crypto 2.0.6
+ devtools 0.0.19 (0.1.1 available)
+ devtools_server 0.1.2
+ dwds 0.3.2
+ fixnum 0.10.9
+ http 0.12.0+2
+ http_multi_server 2.1.0
+ http_parser 3.1.3
+ intl 0.15.8
+ io 0.3.3
+ js 0.6.1+1
+ json_annotation 2.4.0
+ logging 0.11.3+2
+ matcher 0.12.5
+ meta 1.1.7
+ mime 0.9.6+3
+ octicons_css 0.0.1
+ package_config 1.0.5
+ package_resolver 1.0.10
+ path 1.6.2
+ pedantic 1.7.0
+ platform_detect 1.3.5
+ plotly_js 0.0.1
+ polymer_css 0.0.1
+ pool 1.4.0
+ primer_css 0.0.2
+ pub_semver 1.4.2
+ pubspec_parse 0.1.4
+ quiver 2.0.3
+ rxdart 0.21.0 (0.22.0 available)
+ shelf 0.7.5
+ shelf_proxy 0.1.0+6
+ shelf_static 0.2.8
+ shelf_web_socket 0.2.3
+ source_maps 0.10.8
+ source_span 1.5.5
+ split 0.0.2
+ sse 2.0.2
+ stack_trace 1.9.3
+ stream_channel 2.0.0
+ stream_transform 0.0.19
+ string_scanner 1.0.4
+ term_glyph 1.1.0
+ typed_data 1.1.6
+ uuid 2.0.1
+ vm_service_lib 3.15.1+1 (3.17.0+1 available)
+ watcher 0.9.7+10
+ web_socket_channel 1.0.13
+ webdev 2.0.7
+ webkit_inspection_protocol 0.4.0
+ yaml 2.1.15
Downloading webdev 2.0.7...
Downloading webkit_inspection_protocol 0.4.0...
Downloading build_daemon 1.0.0...
Downloading async 2.2.0...
Downloading shelf_proxy 0.1.0+6...
Downloading sse 2.0.2...
Downloading http 0.12.0+2...
Downloading uuid 2.0.1...
Downloading shelf 0.7.5...
Downloading pedantic 1.7.0...
Downloading dwds 0.3.2...
Downloading vm_service_lib 3.15.1+1...
Downloading args 1.5.2...
Downloading shelf_web_socket 0.2.3...
Downloading meta 1.1.7...
Downloading built_collection 4.2.2...
Downloading web_socket_channel 1.0.13...
Downloading built_value 6.6.0...
Downloading stream_transform 0.0.19...
Downloading http_multi_server 2.1.0...
Downloading json_annotation 2.4.0...
Downloading devtools 0.0.19...
Downloading split 0.0.2...
Downloading rxdart 0.21.0...
Downloading primer_css 0.0.2...
Downloading polymer_css 0.0.1...
Downloading plotly_js 0.0.1...
Downloading platform_detect 1.3.5...
Downloading octicons_css 0.0.1...
Downloading devtools_server 0.1.2...
Downloading browser_launcher 0.1.2...
Downloading codemirror 0.5.6+5.47.0...
Downloading mime 0.9.6+3...
Downloading quiver 2.0.3...
Precompiling executables...
Precompiled webdev:webdev.
Installed executable webdev.
Warning: Pub installs executables into $HOME/development/flutter/.pub-cache/bin, which is not on your path.
You can fix that by adding this to your shell's config file (.bashrc, .bash_profile, etc.):

  export PATH="$PATH":"$HOME/development/flutter/.pub-cache/bin"

Activated webdev 2.0.7.

PATHを追加する

$ vi ~/.bash_profile
# flutter_web&dart
export PATH="/Users/XXXX/development/flutter/.pub-cache/bin:/Users/XXXX/development/flutter/bin/cache/dart-sdk/bin:$PATH”

反映

$ source ~/.bash_profile

サンプルexamples/hello_worldを動かしてみる

$ cd flutter_web/examples/hello_world/

パッケージのアップデート

$ cd flutter_web/examples/hello_world/
$ flutter pub upgrade
! flutter_web 0.0.0 from path ../../packages/flutter_web                
! flutter_web_ui 0.0.0 from path ../../packages/flutter_web_ui          
Running "flutter packages upgrade" in hello_world...               18.0s

ビルド・実行

$ pub get
Resolving dependencies... (18.5s)
Warning: You are using these overridden dependencies:
! flutter_web 0.0.0 from path ../../packages/flutter_web
! flutter_web_ui 0.0.0 from path ../../packages/flutter_web_ui
Downloading build_web_compilers 2.1.0...
Downloading build_runner 1.5.1...
Downloading meta 1.1.7...
Downloading typed_data 1.1.6...
Downloading collection 1.14.11...
Downloading vector_math 2.0.8...
Downloading intl 0.15.8...
Downloading build_modules 2.3.0...
Downloading analyzer 0.36.3...
Downloading source_maps 0.10.8...
Downloading js 0.6.1+1...
Downloading source_span 1.5.5...
Downloading logging 0.11.3+2...
Downloading build 1.1.4...
Downloading path 1.6.2...
Downloading bazel_worker 0.1.21...
Downloading archive 2.0.9...
Downloading stack_trace 1.9.3...
Downloading glob 1.1.7...
Downloading pool 1.4.0...
Downloading crypto 2.0.6...
Downloading build_config 0.4.0...
Downloading scratch_space 0.0.3+2...
Downloading http_multi_server 2.1.0...
Downloading yaml 2.1.15...
Downloading timing 0.1.1+1...
Downloading graphs 0.2.0...
Downloading stream_transform 0.0.19...
Downloading pub_semver 1.4.2...
Downloading pubspec_parse 0.1.4...
Downloading build_resolvers 1.0.5...
Downloading build_daemon 1.0.0...
Downloading args 1.5.2...
Downloading watcher 0.9.7+10...
Downloading code_builder 3.2.0...
Downloading mime 0.9.6+3...
Downloading shelf 0.7.5...
Downloading shelf_web_socket 0.2.3...
Downloading build_runner_core 3.0.6...
Downloading pedantic 1.7.0...
Downloading io 0.3.3...
Downloading web_socket_channel 1.0.13...
Downloading async 2.2.0...
Downloading dart_style 1.2.7...
Downloading json_annotation 2.4.0...
Downloading front_end 0.1.18...
Downloading convert 2.1.1...
Downloading kernel 0.3.18...
Downloading html 0.14.0+2...
Downloading charcode 1.1.2...
Downloading package_config 1.0.5...
Downloading term_glyph 1.1.0...
Downloading protobuf 0.13.12...
Downloading string_scanner 1.0.4...
Downloading built_collection 4.2.2...
Downloading built_value 6.6.0...
Downloading package_resolver 1.0.10...
Downloading matcher 0.12.5...
Downloading stream_channel 2.0.0...
Downloading http_parser 3.1.3...
Downloading csslib 0.16.0...
Downloading fixnum 0.10.9...
Downloading quiver 2.0.3...
Downloading http 0.12.0+2...
Got dependencies!
Precompiling executables... (13.9s)
Precompiled build_runner:graph_inspector.
Precompiled build_runner:build_runner.
$ webdev serve
[INFO] Building new asset graph completed, took 1.4s
[INFO] Checking for unexpected pre-existing outputs. completed, took 1ms
[INFO] Serving `web` on http://127.0.0.1:8080
[INFO] Running build completed, took 16.8s
[INFO] Caching finalized dependency graph completed, took 146ms
[INFO] Succeeded after 17.0s with 556 outputs (3217 actions)
[INFO] -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

http://127.0.0.1:8080 にアクセスすると以下の表示
image.png

Ctrl + C で終了

7
4
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
7
4