[Flutter] 플러터로 Web하기

 

Flutter

1) 각 플랫폼 별로 build시 개별적인 툴 사용

- Android: Android Studio, IntelliJ

- iOS: Xcode

- Web: IntelliJ, VSCode

 

2) web의 경우

- 2020년 기준, flutter web은 beta channel로 사용해야함.

- intelliJ가 더 익숙하여 해당 IDE를 사용하여 개발 환경을 구축해 봄.

(1)  Plugin -> Flutter SDK 설치 (Dart도 함께 설치됨)

     Flutter SDK 폴더 안에 dart sdk 폴더가 있으므로 필요시에는 path를 해당 부분으로 연결하면 됨

(2) 앞서 받은 Flutter SDK 폴더를  환경변수에 추가하고, 다음의 명령어 설정

flutter channel beta
flutter upgrade

flutter config --enable-web //web개발기능 활성화

(3) web 개발 기능을 활성화하면 chrome 브라우저 검출이 가능해짐(=안드로이드 앱실행과 같이 Chrome 디버깅 가능)

(4) IntelliJ IDE에서 Flutter New Project 진행 (기존에 생기던 Android, iOS와 더불어 web 폴더가 생김)

(5) 최종적으로 프로젝트 빌드시에는 flutter build web 혹은 flutter run --release 사용

(6) build 후, 프로젝트 내부 build폴더에 web 폴더가 생성됨.

    프로젝트경로/build/web 폴더 내에 있는 파일들을 서버에 올리면 됨.

 

 

 

 

Reference

flutter.dev/docs/get-started/web

zerogyun.dev/2020/02/07/Flutter%EC%97%90%EC%84%9C%20web%EC%9D%84%20%EC%B6%94%EA%B5%AC%ED%95%98%EB%A9%B4%20%EC%95%88%EB%90%98%EB%8A%94%EA%B1%B8%EA%B9%8C/

www.youtube.com/watch?v=htuHNO9JeRU&feature=youtu.be

www.youtube.com/watch?v=E6fLm5XlJDY

www.youtube.com/watch?v=rpkKYQCioW0