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:
1 | 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?
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 🙂
Published on Java Code Geeks with permission by Ayusch Jain, partner at our JCG program. See the original article here: Creating a Flutter Web + Android + iOS Application Opinions expressed by Java Code Geeks contributors are their own. |
