Skip to main content

Command Palette

Search for a command to run...

Flutter & Brave: test your Web Apps on your favorite browser

Published
2 min read
Flutter & Brave: test your Web Apps on your favorite browser
A

I love programming and I work as a Software Engineer developing web based applications and mobile apps. I'm a full stack developer, from the backend where I primarly use Node.js and MySQL on Linux Servers to the frontend where I use modern web technologies and CSS frameworks. I love to develop mobile app, especially in Android mainly in Java, and in the last year I'm using Flutter, first to experiment and in the last period to develop cross platform enterprise apps. In my spare time I like to experiment on side projects apps, ui designs, web app to improve my skills and test new ideas.

Hi everyone in my last series on Flutter I show you all the announcements made by the Flutter team and now I want to show you how you can use Brave as a browser to test your Flutter Apps on the Web.

Problem & Solution

To test your Flutter apps on the web you need a Chrome executable as said by flutter doctor command:

user@localhost:~$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.0.4, on Linux, locale it_IT.UTF-8)
[✗] Chrome - develop for the web (Cannot find Chrome executable at google-chrome)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable. 
...

and based on the documentation, Chrome and Edge are supported as the default browsers for debugging your app, but our loved Brave Browser is based on Chromium so you can export the CHROME_EXECUTABLE variable to your Brave installation and use it. All you have to do, based on your Linux operating system (for Windows and macOS the process is similar), is to modify your .bashrc file and insert this line:

#Put your Brave installation location here
export CHROME_EXECUTABLE="/opt/brave.com/brave/brave-browser"

Now if you save the file, close the terminal, reopen it, run again flutter doctor you should see:

user@localhost:~$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.0.4, on Linux, locale it_IT.UTF-8)
[✓] Chrome - develop for the web
...

So now if you run your Flutter Web project you'll use Brave as the browser to debug it 🚀. I personally use Brave to test a new web app that I'm developing as a side project and all works well.

flutter-web-brave-browser.png

Bye, Alberto

W
wk18k2y ago

for windows

  1. Open the Windows Start menu and search for "Environment Variables".
  2. Click on "Edit the system environment variables".
  3. In the System Properties window, click on the "Environment Variables" button.
  4. Under "User variables", click the "New" button.
  5. Set "Variable name" to CHROME_EXECUTABLE and "Variable value" to the path of the Chrome executable file, e.g. C:\Program Files (x86)\Google\Chrome\Application\chrome.exe.
  6. Click "OK" to save your changes.
S

Thank you for your post. It's interesting. I tried this with my macbook but flutter doctor doesn't seem to accept my brave browser. So I created a ticket to flutter github and they said it didn't support brave browser..:(

2
M

where can i find bashrc file(or alternative) for windows

1
A

Hi MOHIT KOLEY, on Windows there's no bashrc, but you have to set an Environment Variable. You can check, for example, this guide to get started How To Set Path Environment Variables In Windows 10

S

Alberto Bonacina Sorry Sir, I just confused how to put export data in Path, I followed the steps on your article, but still can't get through it

More from this blog

Flutter and Other Experiments

49 posts

I love programming and I work as a Software Engineer on Web and Mobile Apps. I'm expanding my knowledge on Flutter and Dart I post content about these two technologies.

Flutter & Brave: test your Web Apps on your favorite browser