[Flutter] 플러터 웹 프로젝트 생성

지난 2일동안 flutter web을 이용해 웹 사이트 1.0을 만들었는데

앱 개발하듯이 만들다보니 웹이 너무 앱 스럽다는 생각이 들었다.

쉬는 동안 flutter web에 대한 기본을 쌓아야겠다는 생각이 들어서 하나씩 정리해보려 한다.

 

---

1. Flutter web 프로젝트 생성

 

 

1) 채널을 마스터로 변경한다.

flutter channel master

플러터는 stable, beta, dev, master 4개의 릴리즈 채널(release channel)들을 가지고 있는데
가장 최신 버전을 원하는 것이 아니라면 stable을 사용하기를 추천한다.

 

2) 마스터로부터 가장 최근 버전으로 업데이트한다.

flutter upgrade

 

3) web 지원이 가능하도록 환경설정 한다. 

flutter config --enable-web

 

4) 사용자 환경이 설정되어 있는지를 확인한다.

 

flutter devices

 

5) 프로젝트 생성 

flutter create [프로젝트 이름]

 

6) chrome 환경에서 웹 실행 

 flutter run -d chrome

혹은 디바이스 선택에서 web을 선택하면 된다.

 

 

 

2. Flutter Web UI 생성

 

 

아주 간단하게 UI를 만들어보았는데 기존의 flutter 앱 만드는 것과 동일하다.

 

 

 

3. Flutter Web site 생성

 

 

1) 호스팅 환경 설정 

 

나는 firebase를 사용할 생각이다.

 

2) 배포할 파일 빌드 

flutter build web

3) 웹 사이트 배포 (링크 생성)

firebase deploy --only hosting

 

---

flutter.dev/docs/development/tools/sdk/upgrading

Upgrading Flutter

flutter.dev/docs/get-started/web

Building a web application with Flutter

www.filledstacks.com/post/create-and-deploy-a-flutter-web-app/

Create and Deploy a Flutter Web App