블로그

[Flutter] 플루터 웹 지원 설정하기

플루터에서 웹을 지원하도록 설정하는 방법입니다.

먼저 플루터가 설치된 디렉토리로 이동을 합니다. (c:\flutter 에 설치되었다고 가정)

플루터의 웹 지원은 아직 베타에서만 가능합니다.

c:\flutter> flutter channel beta

Switching to flutter channel 'beta'...
git: From https://github.com/flutter/flutter
git:    e6b34c2b5..8af6b2f03  stable                 -> origin/stable
git:  + 7c2b25856...353faa211 Hixie-patch-1          -> origin/Hixie-patch-1  (forced update)
git:  + e6b34c2b5...8fe7655ed beta                   -> origin/beta  (forced update)
git:  * [new branch]          dds_integration_take_2 -> origin/dds_integration_take_2
git:    c2b7342ca..0af027f80  dev                    -> origin/dev
git:  * [new branch]          experimental_skshaper  -> origin/experimental_skshaper
git:    28c00980a..8af6b2f03  flutter-1.17-candidate.3 -> origin/flutter-1.17-candidate.3
git:    c2b7342ca..2738a1148  flutter-1.18-candidate.11 -> origin/flutter-1.18-candidate.11
git:  * [new branch]          flutter-1.18-candidate.12 -> origin/flutter-1.18-candidate.12
git:  * [new branch]          flutter-1.18-candidate.13 -> origin/flutter-1.18-candidate.13
git:  * [new branch]          flutter-1.19-candidate.0 -> origin/flutter-1.19-candidate.0
git:  * [new branch]          flutter-1.19-candidate.1 -> origin/flutter-1.19-candidate.1
git:  * [new branch]          flutter-1.19-candidate.2 -> origin/flutter-1.19-candidate.2
git:  * [new branch]          flutter-1.19-candidate.3 -> origin/flutter-1.19-candidate.3
git:  * [new branch]          flutter-1.19-candidate.4 -> origin/flutter-1.19-candidate.4
git:  * [new branch]          flutter-1.19-candidate.5 -> origin/flutter-1.19-candidate.5
git:  * [new branch]          flutter-1.20-candidate.0 -> origin/flutter-1.20-candidate.0
git:  * [new branch]          flutter-1.20-candidate.1 -> origin/flutter-1.20-candidate.1
git:  * [new branch]          flutter-1.20-candidate.2 -> origin/flutter-1.20-candidate.2
git:  * [new branch]          flutter-1.20-candidate.3 -> origin/flutter-1.20-candidate.3
git:  * [new branch]          flutter-1.20-candidate.3.renyou_experiment -> origin/flutter-1.20-candidate.3.renyou_experiment
git:  * [new branch]          flutter-1.20-candidate.4 -> origin/flutter-1.20-candidate.4
git:    8fbfe1cfb..cfc0082db  master                 -> origin/master
git:  * [new branch]          revert-60916-revert-60478-pixeltoast-patch-3 -> origin/revert-60916-revert-60478-pixeltoast-patch-3
git:  * [new tag]             1.17.1                 -> 1.17.1
git:  * [new tag]             1.17.2                 -> 1.17.2
git:  * [new tag]             1.17.3                 -> 1.17.3  
git:  * [new tag]             1.17.4                 -> 1.17.4
git:  * [new tag]             1.17.5                 -> 1.17.5
git:  * [new tag]             1.18.0-11.1.pre        -> 1.18.0-11.1.pre
git:  * [new tag]             1.18.0-13.0.pre        -> 1.18.0-13.0.pre
git:  * [new tag]             1.19.0-0.0.pre         -> 1.19.0-0.0.pre
git:  * [new tag]             1.19.0-1.0.pre         -> 1.19.0-1.0.pre
git:  * [new tag]             1.19.0-2.0.pre         -> 1.19.0-2.0.pre
git:  * [new tag]             1.19.0-3.0.pre         -> 1.19.0-3.0.pre
git:  * [new tag]             1.19.0-4.3.pre         -> 1.19.0-4.3.pre
git:  * [new tag]             1.19.0-5.0.pre         -> 1.19.0-5.0.pre
git:  * [new tag]             1.20.0-0.0.pre         -> 1.20.0-0.0.pre
git:  * [new tag]             1.20.0-1.0.pre         -> 1.20.0-1.0.pre
git:  * [new tag]             1.20.0-2.0.pre         -> 1.20.0-2.0.pre
git:  * [new tag]             1.20.0-3.0.pre         -> 1.20.0-3.0.pre
git:  * [new tag]             1.19.0-4.0.pre         -> 1.19.0-4.0.pre
git:  * [new tag]             1.19.0-4.1.pre         -> 1.19.0-4.1.pre
git:  * [new tag]             1.19.0-4.2.pre         -> 1.19.0-4.2.pre
git: Branch 'beta' set up to track remote branch 'beta' from 'origin'.
git: Switched to a new branch 'beta'
Successfully switched to flutter channel 'beta'.
To ensure that you're on the latest build from this channel, run 'flutter upgrade'

c:\flutter> flutter upgrade

Checking Dart SDK version...
Downloading Dart SDK from Flutter engine 9a28c3bcf40ce64fee61e807ee3e1395fd6bd954...
Unzipping Dart SDK...
Building flutter tool...
Running pub upgrade...
Flutter is already up to date on channel beta
Flutter 1.19.0-4.3.pre • channel beta • https://github.com/flutter/flutter.git
Framework • revision 8fe7655ed2 (6 days ago) • 2020-07-01 14:31:18 -0700
Engine • revision 9a28c3bcf4
Tools • Dart 2.9.0 (build 2.9.0-14.1.beta)

c:\flutter> flutter config --enable-web

Setting "enable-web" value to "true".

You may need to restart any open editors for them to read new settings.

c:\flutter> flutter devices

Downloading package sky_engine...                                   0.3s
Downloading flutter_patched_sdk tools...                            1.2s
Downloading flutter_patched_sdk_product tools...                    1.2s
Downloading windows-x64 tools...                                    2.5s
Downloading windows-x64/font-subset tools...                        0.5s
2 connected devices:

Web Server • web-server • web-javascript • Flutter Tools
Chrome     • chrome     • web-javascript • Google Chrome 83.0.4103.116

위와 같이 하면 플루터에서 웹을 사용할 준비가 된 상태입니다.

기존 프로그램에 웹 지원을 추가할려면 해당 프로그램 디렉토리로 이동 후

c:\flutter_example> flutter create .

Recreating project ....
  web\favicon.png (created)
  web\icons\Icon-192.png (created)
  web\icons\Icon-512.png (created)
  web\index.html (created)
  web\manifest.json (created)
Wrote 8 files.

All done!
[√] Flutter: is fully installed. (Channel beta, 1.19.0-4.3.pre, on Microsoft Windows [Version 10.0.18362.900], locale ko-KR)
[√] Android toolchain - develop for Android devices: is fully installed. (Android SDK version 30.0.0)
[√] Chrome - develop for the web: is fully installed.
[√] Android Studio: is fully installed. (version 4.0)
[!] IntelliJ IDEA Community Edition: is partially installed; more components are available. (version 2018.3)
[!] IntelliJ IDEA Ultimate Edition: is partially installed; more components are available. (version 2019.3)
[!] VS Code: is partially installed; more components are available. (version 1.46.1)
[√] Connected device: is fully installed. (2 available)

Run "flutter doctor" for information about installing additional components.

In order to run your application, type:

  $ cd .
  $ flutter run

Your application code is in .\lib\main.dart.

명령을 실행해 주면 됩니다.