Since flutter 1.9 : how to run flutter app in a browser ? Flutter run -d chrome not working

Question

Since flutter 1.9 flutter_web is merged inside flutter. I'm trying to run the initial flutter app in a chrome browser but it fails. OS is ubuntu 19.04

The command I used with success: flutter upgrade

flutter create test_1_9

cd test_1_9

flutter run

The command not working:

flutter run -d chrome

=> No devices found with name or id matching 'chrome'

I tried with google-chrome as device name with same result

[✓] Flutter (Channel master, v1.10.2-pre.38, on Linux, locale fr_FR.UTF-8)
    • Flutter version 1.10.2-pre.38 at /home/rbarbe/programes/flutter
    • Framework revision e6ae95c4ce (il y a 18 heures), 2019-09-11 07:46:57 -0700
    • Engine revision 7ea9884ab0
    • Dart version 2.5.0 (build 2.5.0-dev.4.0 be66176534)


[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    • Android SDK at /home/rbarbe/Android/Sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-28, build-tools 28.0.3
    • Java binary at: /home/rbarbe/programes/android-studio/jre/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1248-b01)
    • All Android licenses accepted.

[✓] Android Studio (version 3.3)
    • Android Studio at /home/rbarbe/programes/android-studio
    • Flutter plugin version 33.3.1
    • Dart plugin version 182.5215
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1248-b01)

[✓] IntelliJ IDEA Community Edition (version 2019.1)
    • IntelliJ at /home/rbarbe/.local/share/JetBrains/Toolbox/apps/IDEA-C/ch-0/191.6183.87
    • Flutter plugin version 35.2.2
    • Dart plugin version 191.6183.88

[✓] IntelliJ IDEA Community Edition (version 2019.2)
    • IntelliJ at /home/rbarbe/.local/share/JetBrains/Toolbox/apps/IDEA-C/ch-0/192.6603.28
    • Flutter plugin version 39.0.5
    • Dart plugin version 192.6603.23

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

[✓] Connected device (1 available)
    • CLT L29 • WCR0218315003400 • android-arm64 • Android 9 (API 28)

• No issues found!

I have followed this steps and it's working! https://flutter.dev/docs/get-started/web — Sharad Paghadal, Sep 12 '19 at 09:38
You're right @SharadPaghadal, documentation has bee updated since this morning. I didn't know about the following command : flutter config --enable-web — hawkbee, Sep 12 '19 at 09:48

score 44 · Accepted Answer · answered Sep 12 '19 at 09:52

44

Have you enabled web support by flutter config --enable-web ?

Got Reference from this link

answered Sep 12 '19 at 09:52

Sharad Paghadal

2,089
15
29

4

Even after running `flutter config --enable-web` still m getting error as `No devices found with name or id matching 'chrome'`. – Dhaval Kansara Apr 13 '20 at 06:18
which channel you are on? Please update the flutter once `flutter upgrade` – Sharad Paghadal Apr 13 '20 at 19:51
@DhavalKansara Make sure you are on stable channel – Sharad Paghadal Apr 13 '20 at 19:52
1

It was not working on the stable channel. After I took check out for the master branch I'll found chrome in flutter devices. – Dhaval Kansara Apr 14 '20 at 11:34

score 33 · Answer 2 · answered Sep 24 '19 at 01:56

33

For these people whose chrome still cannot be detected even after flutter config --enable-web.You should check if your flutter in appropriate branch ,to list all branches, use:

flutter channel

output may looks like this:

Flutter channels:  
   beta  
   dev  
   master  
*  stable

item with asterisk prefix indicates which branch you are in.To switch to master, try:

flutter channel master

after that, your flutter doctor can list chromedevice.

answered Sep 24 '19 at 01:56

zionpi

2,593
27
38

fantastic, i was searching solution for 2 hours before reaching this out. 100% works! – Abdul Qadir Dec 02 '19 at 09:40

score 23 · Answer 3 · answered Feb 18 '20 at 11:21

23

https://flutter.dev/docs/get-started/web

$ flutter channel master
$ flutter upgrade
$ flutter config --enable-web

$ flutter devices  //downloads sky_engine and sdk tools then shows a list of devices including chrome

$ flutter create test_app
$ flutter run -d chrome  //local host will run chrome

answered Feb 18 '20 at 11:21

Golden Lion

3,840
2
26
35

1

in visual studio code for windows 10, select the main.dart file it will give you a run icon on the top right side, letting you run with debug. – Golden Lion May 14 '21 at 15:49
These steps worked for me only that instead of flutter run -d chrome, I used flutter run -d linux for the obvious reason --Linux. – Kennedy Owusu Aug 23 '22 at 12:49
`flutter run -d chrome` did the magic – Mohamed Raza Sep 08 '22 at 17:34

score 12 · Answer 4 · edited Oct 05 '21 at 12:50

12

flutter run -d chrome --web-renderer html

edited Oct 05 '21 at 12:50

Tomerikoo

18,379
16
47
61

answered Oct 02 '21 at 09:28

Kesselly Kamara

143
1
6

1

Thanks, bro. This works in ubuntu 21.10. – JP Calvo Nov 24 '21 at 03:11

score 5 · Answer 5 · answered Sep 05 '20 at 22:45

5

In my case - flutter doctor gave me the following output

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

as on arch, the binary is called google-chrome-stable and/or google-chrome-unstable

export CHROME_EXECUTABLE=/usr/bin/google-chrome-stable

was all that was needed to get it working.

answered Sep 05 '20 at 22:45

Fergal Moran

4,525
5
39
54

1

To add to this, all available environment variables are declared here : https://github.com/flutter/flutter/blob/master/packages/flutter_tools/lib/src/web/chrome.dart. Right now, they are `CHROME_EXECUTABLE` and `EDGE_ENVIRONMENT`. – Nato Boram Nov 17 '20 at 19:52
1

This is really helpful! Thanks! – mdmundo Jun 17 '21 at 12:46

score 0 · Answer 6 · answered Sep 12 '19 at 09:15

0

You need to run a server for web and will then be available at a port presumably 8080. If everything is set up correctly you can just:

webdev serve

otherwise try:

   flutter packages pub global run webdev serve

answered Sep 12 '19 at 09:15

bzLoLIp0p

91
4

3

that was prior to 1.9 release, it's now deprecated – hawkbee Sep 12 '19 at 09:44

score 0 · Answer 7 · answered Sep 13 '19 at 12:26

0

Also make sure to upgrade flutter form the master instead of the stable branch

answered Sep 13 '19 at 12:26

Johanno

66
4

score 0 · Answer 8 · answered Sep 18 '19 at 10:15

0

you need cd to your flutter install workspace, and run:

git checkout master

answered Sep 18 '19 at 10:15

Whoiszxl

1

score 0 · Answer 9 · answered Mar 06 '22 at 14:56

0

For Ubuntu, ensure you are on the master channel by running

flutter channel master

Then run

flutter upgrade

Allow HTML web rendering be running

flutter run -d chrome --web-renderer html

answered Mar 06 '22 at 14:56

Isaac Chambers

91
2
2

score -2 · Answer 10 · answered Sep 26 '19 at 07:01

-2

If you are trying to develop web Application with dart then my suggestion is to create new Dart Project -> Angular Dart -> After successfully created angular dart -> then open terminal -> type "Webdev serve"

answered Sep 26 '19 at 07:01

Joel jones

639
8
13

Since flutter 1.9 : how to run flutter app in a browser ? Flutter run -d chrome not working

10 Answers10