VS Code devcontainer에서 Flutter 개발

지난 포스트에서는 로컬 설치 없이 Flutter를 사용할 수 있게 해주는 도커 이미지에 대해 썼습니다.

도커가 당신을 위해 설레게 하십시오

Mats Pfeiffer ・ 5월 15일 ・ 2분 읽기

#flutter #android #docker #linux

이 게시물에서 우리는 이 아이디어를 더 얻고 도커 컨테이너에서 로컬 디렉터리를 열 수 있는 VS 코드remote extensions를 사용하려고 합니다.

먼저 확장 프로그램을 설치하기만 하면 됩니다. 빈 디렉터리를 만들거나 기존 Flutter 프로젝트가 있는 경우 이 파일을 프로젝트에 추가하세요. 그러나 flutter_app가 아닌 flutter-app와 같은 Dart 준수 이름을 사용해야 합니다.
.devcontainer/devcontainer.json

{
  "name": "Flutter",
  "image": "matspfeiffer/flutter:beta",
  "extensions": ["dart-code.dart-code", "dart-code.flutter"]
}

이제 컨테이너의 현재 디렉토리를 지정해야 합니다reopen.



docker가 연결 속도에 따라 백그라운드에서 이미지를 가져오기 때문에 이 작업을 처음 수행하는 데 몇 분 정도 걸릴 수 있습니다. 컨테이너 빌드 및 시작이 완료되면 프로젝트가 컨테이너에 마운트됩니다.
빈 프로젝트로 시작했다면 이제 새로운 Flutter 프로젝트를 생성할 것입니다. VS Code Flutter 확장을 사용하거나 제가 선호하는 셸을 사용할 수 있습니다. 따라서 새 터미널을 열고 다음 명령을 실행하십시오.



앱을 웹 애플리케이션으로 디버깅하려면 Chrome과 이extension가 필요합니다. 설치 후 lib/main.dart로 이동하여 F5를 누르십시오. 이렇게 하면 새 브라우저 탭이 시작되며 Dart debug plugin를 클릭하여 최종적으로 앱을 열어야 합니다.

업데이트:

Android 에뮬레이터 장치를 사용하려면 README의 VScode devcontainer 조언을 따르십시오. 모든 운영 체제를 지원하려는 경우에는 실제로 우수하고 성능이 뛰어난 솔루션이 아닙니다. Linux 사용자는 X11 시스템 및 KVM을 컨테이너로 전달할 수 있기 때문에 몇 가지 이점이 있습니다. MacOS 및 Windows에서 가장 잘 작동하는 솔루션은 호스트에서 기본적으로 실행되는 에뮬레이터 장치를 사용하는 것입니다.

성능 솔루션에 대한 더 나은 아이디어가 있다면 언제든지 의견을 남기거나 Github에서 문제를 만드십시오.

추가 링크

Flutter docker image repository @Github

VS Code Remote Development