I recently created a flutter web, flutter iOS and flutter Android Application. This is a short account of my experience with the same. Especially with so much hype around flutter web, I was very excited to try it out and see it for myself.
Spoiler alert: It was an absolute pleasure working with flutter web!. I wouldn’t lie I was very skeptical at first as I thought it would be just another fad like PWAs at one time. But the sheer simplicity and the ease of development left me awed!
Building the app
First, let’s talk about what I’m gonna build. I recently took a flutter dev course in Udemy and created a recipe application in one of the tutorials.
It’s just a collection of multiple recipes with static data served in one of the constants dart file.
The app consists of simple bottom navigation, a navigation drawer and multiple screens to show recipes by category and recipe details.
If you want to try it out for yourself, go ahead and clone this repository: https://github.com/Ayusch/Flutter-Web-Recipe-Application
Once you’ve cloned the repo, run it like any other flutter application. But if you try to run it, you’ll just see the option of iOS and Android devices. Currently your project isn’t set up for flutter web.
Enabling Flutter Web
To enable flutter web application, follow the steps below:
- Navigate to your project’s directory.
- Switch to flutter beta channel:
flutter channel beta - Upgrade flutter:
flutter upgrade - Finally, enable flutter web:
flutter config --enable-web
Now if you go ahead and run flutter devices you’ll see Chrome Web as an option. This means that your flutter project is ready to run on the web.
Note: If you encounter some problem running the app or setting up flutter web, then try running flutter doctor. This would show you some of the problems with your project. But if you’re still unable to run the project, mention it in the comments below and I’ll help you out.
Running your first flutter web application
Finally, we’re ready to run our flutter application. Select Chrome from VSCode as such:
Then run the following command:
flutter run
You’ll see the chrome window open up and your flutter web app will run seamlessly. I was so awed when I first ran it as I was expecting to make some changes in code specific to the web.
But it was more powerful than I thought. I ran the EXACT same code in Android and iOS and that too worked seamlessly! After seeing it live in action, I believe it’s not just another fad, and if executed properly, it could change the landscape of software development. I could reduce software development costs drastically where companies would just need to hire one developer for Web, Android and iOS.
What’s next?
You can download the complete source code for this app here: https://github.com/Ayusch/Flutter-Web-Recipe-Application
Next up, I’ll try to run the same application for flutter macOS and windows to see how that works. If you’ve already tried that, let us know your experience in the comments section below 🙂
Welcome to AndroidVille 🙂
AndroidVille is a community of Mobile Developers where we share knowledge related to Android Development, Flutter Development, React Native Tutorials, Java, Kotlin and much more.
We have a SLACK workspace where we share updates related to new job opportunities, articles on Mobile Development/updates from the industry. We also have channels to help you with any questions, dev-help that you require. Just post a question and people would be ready to help you out 🙂
Click on this link to join the AndroidVille SLACK workspace. It’s absolutely free!
If you like any article, do give it a share on Facebook, Linkedin. You can follow me on LinkedIn, Twitter, Quora, and Medium where I answer questions related to Mobile Development, especially Android and Flutter.
If you want to stay updated with all the latest articles, subscribe to the weekly newsletter by entering your email address in the form on the top right section of this page.