[web]: Document how to do flutter development on chromeos

[ghchinoy]

Unable to run flutter run or see web or chrome devices

Chrome OS / pixelbook 2017 / Version 88.0.4324.37 (Official Build) beta (64-bit)

flutter doctor / flutter devices does not have web-server or chrome targets for building an app. While I can do flutter build web and appropriate artifacts are generated in the app's build/web directory, this is suboptimal.

My main objective is do develop flutter web apps on ChromeOS.

Followed install steps. Unclear what steps are needed to reset environment or which steps I may have missed to have a more complete flutter development experience (i.e. flutter run and IDE integration).

flutter doctor -v

[✓] Flutter (Channel beta, 1.25.0-8.1.pre, on Linux, locale en_US.UTF-8)
    • Flutter version 1.25.0-8.1.pre at /home/ghchinoy/flutter
    • Framework revision 8f89f6505b (11 days ago), 2020-12-15 15:07:52 -0800
    • Engine revision 92ae191c17
    • Dart version 2.12.0 (build 2.12.0-133.2.beta)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /home/ghchinoy/Android/Sdk
    • Platform android-30, build-tools 30.0.3
    • Java binary at: /opt/android-studio/jre/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✗] Chrome - develop for the web (Cannot find Chrome executable at google-chrome)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.

[✓] Android Studio
    • Android Studio at /opt/android-studio
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593

[✓] VS Code (version 1.52.1)
    • VS Code at /usr/share/code
    • Flutter extension version 3.18.0

[✓] Connected device (1 available)
    • Google Pixelbook (mobile) • emulator-5554 • android-x64 • Android 9 (API 28)

! Doctor found issues in 1 category.

Flutter config does have --enable-web

Settings:
  enable-web: true

[wzslr321]

Try to run flutter run -d web --web-port 8000 command, it fixed similar problem here: #40478

[ghchinoy]

Thank you for the response @wzslr321 , but there's no device named web so that command doesn't work.

$ flutter run -d web --web-port 8000
No devices found with name or id matching 'web'

[wzslr321]

I am actually facing exact same problem on archlinux than,

I have got exactly the same error log with no devices found because I do not see a webserver in flutter devices either, so I wish to get help too.

[wzslr321]

Hey @ghchinoy , I fixed it on archlinux by adding execute permissions for google chrome to every user and resetting CHROME_EXECUTABLE environment variable, now I am able to run it using flutter run -d web-server command and everything works cool. It is available in other browsers on localhost ( port can be specified with flutter run -d web-server --web-port 8080 (example) ), but as I know, google chrome have the best debugging tools described here --> https://www.youtube.com/watch?v=JClFHn-jQ3M&t=2119s

[agplusman]

On a chromebook to run flutter for web development I found it best to install Chromium browser from Crostini (Linux Beta);
$ sudo apt install chromium
Then in bashrc make sure to add this;
export CHROME_EXECUTABLE=/usr/bin/chromium

Everything works fine thereafter including development with Android Studio

[ghchinoy]

Thanks, with additional install of chromium on crostini on ChromeOS, a chrome device is created so flutter run -d chrome does work.

This does put a lot of stress on the underlying cpu and I was hoping for a more integrated approach in the future (either via flag, lacros, etc.) that didn't result in having to install Chromium in a container in ChromeOS.

[jaydanurwin]

I agree with the comment above. This is definitely a sub-optimal solution. Having to install a separate Chromium instance is going to bog down the CPU unnecessarily. What's strange is it worked with flutter run -d web --web-port 8000 when I filed #40478 but now that command just returns No devices found with name or id matching 'web'

[starquake]

xdg-open "https://put-url-here" works so is there a workaround available?

[timsneath]

This is a good issue. Adding some suggestions for a path forward, along with formally documenting the current workaround, in #121462.

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.