Home » Web Development » Creating a Flutter Web & Android & iOS Application

About Ayusch Jain

Ayusch Jain
Ayusch is a Software Engineer currently working in Android Development. He's worked long enough that he's transformed into an Android himself :P. Additionally, he also maintains a community of Android developers called: AndroidVille and writes about Android on his website: https://ayusch.com

Creating a Flutter Web & Android & iOS Application

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:

  1. Navigate to your project’s directory.
  2. Switch to flutter beta channel: flutter channel beta
  3. Upgrade flutter: flutter upgrade
  4. 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.

(0 rating, 0 votes)
You need to be a registered member to rate this.
Start the discussion Views Tweet it!
Do you want to know how to develop your skillset to become a Java Rockstar?
Subscribe to our newsletter to start Rocking right now!
To get you started we give you our best selling eBooks for FREE!
1. JPA Mini Book
2. JVM Troubleshooting Guide
3. JUnit Tutorial for Unit Testing
4. Java Annotations Tutorial
5. Java Interview Questions
6. Spring Interview Questions
7. Android UI Design
and many more ....
I agree to the Terms and Privacy Policy
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments