[Flutter] 플러터 웹 서포트 / 웹앱 만들기

[ Flutter Web Support ]

 

Flutter 2.0 릴리즈 노트 > Flutter web support hits the stable milestone  을 보면 

Flutter 2.0 부터 stable channel 에 web support가 가능해졌습니다! (2021년 3월에 Flutter 2.0 나왔어요)

 

https://medium.com/flutter/flutter-web-support-hits-the-stable-milestone-d6b84e83b425

 

same codebase로 앱(iOS, 안드로이드) 뿐만 아니라 웹도 배포할 수 있습니다! 

 

web support를 지원하는 초기 릴리즈는 세가지 시나리오에 포커스를 맞추고 있습니다. 

 

1. Progressive web apps (PWAs) : 웹의 범위를 데스크톱 앱의 기능과 결합하는 점진적 웹 앱

2. Single page apps (SPAs) : 한 번 로드되고 인터넷 서비스와 데이터를 주고받는 단일 페이지 앱

3. 기존 Flutter 모바일 앱을 웹으로 확장 하여 두 경험 모두에 대해 공유 코드 (shared code)를 활성화
(기존 Flutter 앱을 웹으로 가져와야 하는 많은 이유 중 하나는 앱스토어 외부의 사용자에게 도달하기 위함입니다)

 

 

Flutter는 JavaScript 컴파일을 제공하는 언어인 Dart 로 작성되었기 때문에 

웹을 타켓으로 하는 것은 자연스러운 다음 단계였습니다.

모든 플랫폼에서 작동하는 일관된 툴킷을 구축하는 것이 플러터 팀의 접근 방식? 목표? 라고 합니다. (왕멋짐,,) 

 

아키텍쳐 레벨에서 Flutter 는 multilayer system 입니다. 

 

 

 

- 프레임 워크 (framework) : widgets, animation, and gestures 등 추상화된 일반적인 것들(abstractions for common idioms)을 제공한다. 
- 엔진 (engine) :  노출되는 시스템 api를 사용해서 target device에 렌더링 해준다. (renders to the target device using the system APIs it exposes.)

 

 

프레임워크 코드 (Dart) 는 모바일, 데스크톱, 이제 웹 까지 모든 플랫폼에서 동일합니다.

하지만 엔진은 플랫폼 별로 다릅니다.

우선 모바일 앱에서는 low-level C++ rendering engine 을 사용합니다.

웹 엔진은 두가지 렌더링 모드를 지원합니다. 

 

- HTML renderer : 사이즈와 광범위한 호환성에 최적화 되어있음

- CanvasKit renderer:  WebAssembly 및 WebGL 을 사용하여  Skia 페인트 명령 (Skia paint commands) 을 브라우저 캔버스에 렌더링함.  

 

각 장치의 특성에 맞게 Flutter 웹 앱을 최적화하기 위해 렌더링 모드는 기본적으로 자동으로 설정되며,

--web-renderer html 또는 --web-renderer canvaskit 를 해주면 원하는 모드로 직접 설정도 가능합니다.  (참고: Web renderers)

 

위의 글에 플러터로 만든 웹들도 소개하고 있으니 읽어보시길 추천드립니다! 

 

[ Building a web application with Flutter ] 

 

문서 보고 플러터로 웹앱을 새로 만들어보겠습니다. 

 

1) Requirements 

 

웹 서포트 하려면 우선 아래의 요구사항이 필요합니다. 

- Flutter SDK

- 크롬 (웹 앱을 디버깅하려면 크롬 브라우저가 필요함)

IDE 로는 플러터를 서포트 하는 것들을 쓸 수 있습니다.  Android Studio, IntelliJ IDEA, Visual Studio Code 

 

 

2) 기존 프로젝트에 웹 지원 추가하기 

 

이전 버전의 Flutter를 사용하여 만든 기존 프로젝트에 웹 지원을 추가하려면 프로젝트 디렉터리에서 다음 명령을 실행하세요.

 

 

3) 새로운 프로젝트 만들기 with 웹 지원 

 

# IDE 

 

IDE에서 새 앱을 만들면 iOS, Android 및 웹 버전이 자동으로 생성됩니다. (desktop support 를 활성화한 경우 macOS도 생김)

디바이스 목록에서 Chrome (web) 을 선택하고 앱을 돌리면 됩니다.

 

 # Command line

 

커맨드 라인에서도 새 앱을 만들고 크롬으로 앱을 돌려볼 수 있는데, 아래의 명령어를 실행시켜주면 됩니다. 

 

 

 

저는 IDE를 통해 해볼게요! 

 resume라는 이름으로 새 앱을 만들어줬는데,  이렇게 웹 폴더가 생기고

 

 

디바이스에서 크롬을 선택해서 돌리면 

 

 

웹으로 빌드 성공! 

 

 

 

그리고 

릴리즈 모드로 돌리면 localhost를 복붙하여 사파리에서도 돌려볼 수 있습니다

flutter run -d chrome --release

 

 

 

[ 더보면 좋을 것 ]

 

https://muhly.tistory.com/26

[플러터] 웹을 깃허브로 배포 및 호스팅 하기