Flutter dev-container

[bhack]

Please add a flutter container. See Dart-Code/Dart-Code#2154
/cc @DanTup

[Chuxel]

@bhack @DanTup RE: Dart-Code/Dart-Code#2154, yes, absolutely happy to review and integrate a PR. Anything contributed here will show up in VS Code (Open in Container..., Add Development Container Configuration Files...).

[bhack]

It could be also interesting to have this as prebuilt image. See #154

[bhack]

/cc @MFAshby @AlukardBF

[MFAshby]

Happy to clean mine up and raise a PR. The main concern I have is it requires elevated privileges to talk to USB devices, for on-device debugging. I don't have a great alternative though.

https://github.com/MFAshby/flutter-devcontainer

[DanTup]

I think there could be multiple Flutter containers (flutter-web, flutter-android, ...) - for example Android requires the Android SDK and elevated permissions to use a physical device, but using Web wouldn't require either (there are still some issues using web in containers, which is why I hadn't tidied mine up into a PR yet).

It's also possible to use Android with a remote emulator (eg. Genymotion) that would not require elevated permissions, so maybe it's something that could be commented out in the config file with a note in the readme that if you want to use a physical Android device you can uncomment it (this avoids elevated permissions by default)?

If you have a ADB on the host, you might also be able to use a physical device without elevated permissions, but it's not something I've tried (and having a local Android SDK somewhat underminws the idea of having everything in a container).

[bhack]

Yes I think the best strategy Is probably to start with a flutter-android isolated PR and then expand over with single PRs introducing flutter-web etc..

[bhack]

Here also a version with emulator (X11 permissions):
https://github.com/midnightblue69/docker-flutter

/cc @midnightblue69

[bhack]

If there Is any problem about X11 permissions for the emulator we could suggest to use https://github.com/mviereck/x11docker

[joeblew99]

X11docker requires special tools on the host ?

[bhack]

@joeblew99 Check https://github.com/mviereck/x11docker#dependencies
Check also the thread in the PR #169

[bhack]

Just for tracking this depend on microsoft/vscode-remote-release#2067

[shiraishimai]

Yes, I'm trying to setup flutter in dev container too. But the matter is I cannot map host's Chrome to the container, then flutter refuses to recognize the mapped Chrome as executable, also it's difficult to map different OS's Chrome path.

I believe the debugger for Chrome plugin should have the capability to attach the connection from host to container, and debugger for Chrome holds the host application path (different Chrome path for different OS) and execution. Is there any way possible for VSCode to place something like a symlink inside the docker as an executable invoked by flutter?

[shiraishimai]

Also different port used by flutter has to be exposed from docker, this is tricky...

[DanTup]

I'm trying to setup flutter in dev container too. But the matter is I cannot map host's Chrome to the container, then flutter refuses to recognize the mapped Chrome as executable, also it's difficult to map different OS's Chrome path.

There's a web-server device built into Flutter to support remoting like this. You'll need to the Dart Debug extension to connect the Chrome debugger back to the VS Code extension host though.

I have a sample repo here (it's designed for Codespaces, but doesn't work there currently due to how the VS Codespaces proxy works):

• Clone https://github.com/DanTup/vsonline-flutter-web
• Open it in VS Code (accept opening in container)
• Ensure the web-server device is selected
• Press F5
• When the browser opens with a white pace, click the Dart Debug extension button in your browser

Then the app should load (and in theory, breakpoints and debugging should work too - though like Flutter's web support, this is still a bit work-in-progress).

[matsp]

Hey @DanTup maybe you have an idea whats happening in my setup.

I setup a docker image and the following files in my .devcontainer directory:

Dockerfile

FROM matspfeiffer/flutter:beta

ARG USERNAME=vscode
ARG USER_UID=1000
ARG USER_GID=$USER_UID

RUN groupadd --gid $USER_GID $USERNAME \
  && useradd -s /bin/bash --uid $USER_UID --gid $USER_GID -m $USERNAME \
  && apt-get install -y sudo \
  && echo $USERNAME ALL=\(root\) NOPASSWD:ALL > /etc/sudoers.d/$USERNAME\
  && chmod 0440 /etc/sudoers.d/$USERNAME

devcontainer.json

{
  "name": "Flutter",
  "dockerFile": "Dockerfile",
  "settings": {
    "terminal.integrated.shell.linux": "/bin/bash"
  },
  "extensions": [
    "dart-code.dart-code",
    "dart-code.flutter"
  ],
  "remoteUser": "vscode",
  "runArgs": [
    "--device",
    "/dev/kvm",
    "--device",
    "/dev/dri:/dev/dri",
    "-v",
    "/tmp/.X11-unix:/tmp/.X11-unix",
    "-e",
    "DISPLAY"
  ]
}

On Linux I can use the android emulator without any problem but when I try to target web I get the following error in the dart process:

Launching lib/main.dart on Web Server in debug mode...
Waiting for connection from Dart debug extension at http://localhost:45207
ERROR - 2020-05-25 12:14:50.692790
GET /dwds/src/injected/client.js
Error thrown by handler.
NoSuchMethodError: The method 'toFilePath' was called on null.
Receiver: null
Tried calling: toFilePath()
dart:core                                              Object.noSuchMethod
createInjectedHandler.<fn>.<fn> (package:dwds/src/handlers/injected_handler.dart:35:39)

I also have installed the chrome dart debug extension. Have you / someone else seen this error before? Maybe related to the newest beta version?

EDIT: Your example repository with the latest master version is working.

EDIT2: Manually running without debug flutter run -d web-server is working as expected

[DanTup]

@matsp the error you posted has been raised at flutter/flutter#54971. I don't think it should break anything though - it happens when a file is requested that should be a 404.

EDIT: Your example repository with the latest master version is working.

Great! :-)

[matsp]

@DanTup Thanks for the reply! When I switch the channel of flutter to beta in the running container of your example repo the webapp is not loading but not showing the error on the console. So same behavior but without error log.

EDIT: Could be related to this flutter/flutter#57855

[DanTup]

Sorry, I misread the error.. I'd seen the error before, but the 404 in my case was for a font. In your case it looks more serious:

GET /dwds/src/injected/client.js
Error thrown by handler.

I'll do some testing and see if I can repro here.

[DanTup]

@matsp I don't seem to be able to repro - I fan using the beta branch and was still able to open the app and use the Dart Debug extension to connect.

How did you change to beta? I did it by updating the Dockerfile to clone that branch:

RUN git clone https://github.com/flutter/flutter --branch beta && \
    /home/vscodespace/flutter/bin/flutter config --enable-web

If you did it by changing at the terminal, you may need to run flutter clean and/or flutter update-packages and/or flutter pub get to get everything in-sync.

[matsp]

@DanTup I tested this with my own image where I am using a fixed version from SDK archive. Executing flutter update-packages did the trick and debugging web-server is working as expected. Have you an idea why I need to update the packages on a fresh flutter installation (from SDK archive)?

[DanTup]

Executing flutter update-packages did the trick and debugging web-server is working as expected. Have you an idea why I need to update the packages on a fresh flutter installation (from SDK archive)?

I do not - this does sound weird. I do know that the archive versions have their own PubCache shipped inside the archive though (in the .pub-cache folder inside the SDK folder). I wonder if something may have been missing from that. If you can repro this, it'd be interesting to see if the contents of that folder change before/after.

[matsp]

I did a diff with the flutter directory before and after the flutter update-packages:

https://gist.github.com/matsp/3d81b9cc6e757b5b0799f5994bacb1b9

Now it's clear why I need to update. The SDK is delivered with a URI that does not match. So integrating the command in my Docker image should fix the problem.

[DanTup]

@matsp thanks for checking! I downloaded the latest Dev and Beta zips, and was able to repro issues locally. I'm not sure this is supposed to be required, so I've filed a bug here: flutter/flutter#58003

[edufolly]

Hi Folks,

this dev-container (https://github.com/lucashilles/flutter-dev-container) works great with @DanTup extension.

Working on it to improve compatibility and other functionalities.

[bhack]

Any update on this?

[bhack]

Gentle ping, any update now that we have Flutter 2?

[IvanTurgenev]

I updated this a bit
prune volumes if they bite ur ass, lost half a day on a cached volume
https://gitlab.com/IvanTurgenev/flutter_vscode_remote/-/tree/master