In the last post I wrote about a docker image which let you use Flutter without local installation.
In this post we want to get this idea further and use the VS Code remote extensions which let us open a local directory in a docker container.
All we have to do is to first install the extension. Create an empty directory or if you have an existing Flutter project add this file to your project. But be sure to use a Dart conform name like flutter_app not flutter-app:
.devcontainer/devcontainer.json
{
"name": "Flutter",
"image": "matspfeiffer/flutter:beta",
"extensions": ["dart-code.dart-code", "dart-code.flutter"]
}
Now you have to reopen the currect directory in the container:
Doing this the first time could take a few minutes because docker is pulling the image in the background which depends on your connection speed. Once the container build and startup is finished your project is mounted in the container.
When you started with an empty project, we will now create a new Flutter project - you can use the VS Code Flutter extension or use the shell like I prefer. Therefore just open a new terminal and execute the following command:
To debug the app as web application you will need Chrome and this extension. After installing that please navigate to lib/main.dart and press F5. This will launch a new browser tab and you have to click the Dart debug plugin to finally open the app.
UPDATE:
If you want to use an android emulator device follow the VScode devcontainer advices in the README. Their is no real good and performant solution when you want to support all operating systems. Linux users have some advantages because they can forward the X11 system & KVM to the container. The best working solution for MacOS and Windows is to use an emulator devices running natively on the host.
If you have a better idea for a performant solution feel free to leave a comment or create an issue at Github.
Top comments (0)