[ flutter web ] 플러터 프로젝트를 웹과 애뮬레이터로 돌려보자~! / vscode 세팅법

 

안녕하세요 개발하는 남자 개남입니다.

flutter 2.0버전이 릴리즈 되었고 2.0에서 가장 큰 변화는 web을 지원하는 것이라고 생각합니다.

그렇기 때문에 이번 포스팅에서 플러터를 웹으로 돌려보는 방법에 대해서 다뤄 보도록 하겠습니다.

 

혹시 아직 flutter 2.0 업데이트를 주저하고 계신 분이 있다면 아래 링크를 통해 프로젝트별로 flutter 버전을 관리해보세요.

[ flutter 2.0 ] fvm을 이용해서 충돌없이 플러터 2.0 세팅하기 / VSCode

 

우선 작업에 들어가기 앞서 다음 명령어를 실행해 보겠습니다.

flutter devices

이 명령은 플러터를 돌릴 수 있는 디바이스들을 보여줍니다.

 

여기서 만일 위 이미지처럼 Chrome (web) 이 리스트에서 보인다면 

설정할 필요가 없이 바로 이용이 가능한 상태입니다.

Web 디바이스가 없다라면 계속 이어서 설정해주시면 됩니다.

 

플러터 디바이스에 web을 추가하기 위해서는 web 설정을 활성화시켜줘야 합니다.

flutter config

명령어를 사용해보시면 

다양한 설정에 대해서 설명하고 있습니다 그중에 enable-web을 볼 수가 있습니다.

flutter config --enable-web

flutter config --enable-web 

 

명령을 통해 설정을 활성화시켜줍시다.

혹시 이렇게 해도 flutter devices 로 web이 활성화 되지 않는다면?

flutter upgrade 를 실행해주셔야 합니다. web지원은 flutter 2.0 버전 부터 되기때문입니다. (stable 기준) 

 

몇몇 분들이 질문 주시는 것이 있는데 '

"아무리 노력해도 플러터 프로젝트를 애뮬레이터로 돌아가지 않고 항상 웹으로 앱이 실행된다 어떻게 해야 하는 것인가요??"

 

그런 분들은 아마도 enable-web이 설정되어있는 상태라서 그렇습니다.

만일 웹으로 돌리지 않고 안드로이드/ios 애뮬로 돌리기 원하시는 분들은 

flutter config —no-enable-web

flutter config —no-enable-web 

명령어를 실행하시면 그때부터 애뮬레이터로만 동작시킬 수 있게 됩니다.

 

자 그렇다면 웹과 애뮬레이터를 자유자재로 변경하면서 앱을 실행해볼 수 있는 방법에 대해서 알아보겠습니다.

원하는 flutter 프로젝트를 vscode로 실행해줍니다.

 

디버그 런 아이콘을 좌측 메뉴바에서 선택해줍니다.

그럼 customize Run and Debug create a launch.json file이라는 문구를 보실 수 있습니다.

즉, 앱 실행에 대해 커스터마이징을 할 수 있도록 해주는 파일을 만들 수 있다는 것입니다.

create a launch.json file. 클릭해줍니다.

 

그럼 다음과 같은 창이 상단에 보이게 되는데 여기서 Dart&Flutter를 선택해서 launch.json 파일을 만들어줍니다.

 

만들어진 파일에 다음과 같이 입력해줍니다.

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "web",
            "request": "launch",
            "type": "dart",
            "args": ["-d","chrome"]
        },
        {
            "name": "device",
            "request": "launch",
            "type": "dart",
        }
    ]
}

그럼 이제 실행 버튼에 두 가지 추가한 "web"과 "device"를 선택할 수 있고 각각 실행할 수 있게 됩니다.

이제 웹 선택하고 돌리면 웹 브라우저 (크롬)으로 앱 실행이 되는 것을 볼 수 있으며 

device로 선택하고 돌리면 애뮬레이터로 앱이 실행되는 것을 볼 수 있을 것입니다.