Ionic vs Flutter
Ionic and Flutter are two technologies for building cross-platform apps. But that's where the similarities end. Let's explore how Ionic's standard web-based approach contrasts with Flutter's custom approach.
Since Flutter 1.0 was released in late 2018, many have asked how Ionic compares and which approach is best for them. To help developers and teams make the right decision, we put this brief comparison guide together to explain the similarities and differences. In particular, we’ll talk about the fact that, despite Ionic and Flutter sharing a similar mission and vision, our ideas about how to do it could not be more different.
Of course we’re slightly biased in our outlook, but we’ve tried to keep this comparison as fact-based and balanced as possible.
Ionic and Flutter share a common vision of creating beautiful, high-performance apps that work everywhere. However, our core philosophies could not be more different.
- Ionic’s guiding principle is to use the web platform and embrace open standards wherever possible.
- When you build with Ionic, you will learn and apply the tools and languages of the web, using a framework designed to deliver great performance on mobile, desktop, and especially, the web.
- Flutter, in contrast, has chosen to go it alone, creating a self-contained ecosystem that is at odds with the common languages, toolsets, and standards found in the broader development world.
- While Flutter delivers very good performance on mobile, the fundamental limitations of their architecture make it a poor choice for web-based deployments.
- Your choice of solution should be based on which philosophy you align with, where and how you plan to deploy your app, and what skills you know today or would like to learn in the future.
Both Ionic and Flutter are unique among all other app development approaches, in that they share the vision of creating a UI framework that works everywhere, delivers great performance, and looks beautiful wherever it runs.
Whereas most cross-platform approaches like React Native focus almost exclusively on mobile, Ionic and Flutter are designed to address mobile, desktop, and the web —?all with one shared codebase.
The key distinction is how each solution goes about realizing that vision, and the extent to which they’re able to deliver on it.
The differences between Ionic and Flutter start with each team’s core philosophy; which as you’ll see, could not be more different.
As you’ll see, these diametrically opposed philosophies have a profound effect on what you can do with each framework, and the impact that has both today and in the future.
How Flutter Works
The core language of Flutter is Dart, a little-known language dating back to 2011. Although it has been around for awhile, few developers are familiar with it today (less than 2%, according to the 2019 StackOverflow Survey), and it’s rarely used outside of the Flutter community.
When building for mobile, Flutter uses the Dart compiler to convert your Dart code into native machine code that will run on the device platform, along with a custom rendering engine to display your UI inside a mobile app. Flutter does not use the native UI elements, like you would find in React Native, nor does it use Web Components like Ionic. Instead, Flutter offers its own library of UI Widgets.
Flutter mobile apps access native device features using a plugin library that is similar to Ionic and React Native. Ready-made packages are available for accessing common device features. You can also write your own custom platform-specific code if the package or plugin you’re looking for isn’t available, using a Flutter-specific async messaging platform that handles correspondence between the client (UI) and the host (platform OS).
Desktop support is also in technical preview, and the Flutter team expects that it will eventually support Windows, Mac, Linux, and Chrome OS.
In summary, to meet their stated goals of creating a “portable UI framework that works everywhere”, the Flutter team has chosen to go it alone, in effect. Their choice of the Dart language, use of a custom rendering engine, opinionated native implementation, and custom web framework for displaying in a browser, reflect their decision to build a standalone architecture that puts them at odds with the broader development ecosystem.
Quick Primer on Ionic
In case you’re new to our solution or would like a refresher, here’s a brief summary of how Ionic works. This will be useful to understand before we jump into the comparison with Flutter.
With Ionic, you can deploy a native iOS or Android app, native desktop app, or web app, all from a single, shared codebase. When running on mobile, Ionic runs inside a native container using Cordova or, more recently, Capacitor, which enable full access to any native device features or APIs. The UI of your Ionic mobile app runs in a WebView, which is effectively a headless browser that is invisible to the user. In a desktop implementation, Ionic runs inside a native desktop container like Electron, or directly in any mobile or desktop browser as a Progressive Web App.
The UI components that you use in an Ionic app all use the Web Components standard, so they will run in any web browser, and are compatible with any JS framework, including React, Vue, and Angular —?or no framework at all. Ionic provides a library of over 100 UI components that you can customize with CSS to fit your brand guidelines. You can also use Stencil, an open source web component compiler from the Ionic team, to build your own library of custom web components. In fact, any web-based UI component or web library will run in an Ionic app, giving you the freedom to leverage anything on the web for your project.
Which One Is Right For You?
Now that you know a little about Flutter and Ionic, let’s compare the two along a few important dimensions. You can then decide which one is right for you.
One of the things that developers often rave about with Flutter is the performance. This seems to be where all of the proprietary, non-standard stuff that they’ve invested in has paid off, and we’d agree that it sure does make for some snazzy demos.
There are a few things to consider here:
First, if you’re looking to do aggressive animations, Flutter might be a better fit. Then again, you might want to just go directly to the native SDKs for that matter. However, in many cases Ionic will give you the same performance if you’re writing for a more standard consumer app or employee-facing use case. The best thing to do is to build sample apps on both platforms that aligns with your use case, and see how they compare. Just keep in mind, performance almost always comes down to how you write your code, not which platform or framework you choose.
Second, pay attention to bundle size, which will have a big impact when you deliver your app over the web. As noted above, Ionic uses the standard browser runtime and primitives, so the app size is usually very small (see a recent TODO app we built with pure web components using Stencil One, shipping at 2,991 bytes). Flutter requires a huge amount of code for very basic apps (1MB for the NYT demo they shipped), because you're shipping all of that runtime even though the browser already has primitives available for almost all of it. Thus, if you’re looking to reach Google’s performance standards for Progressive Web Apps (PWAs) or to rank highly in search-engine results pages, you will find it nearly impossible with the current performance benchmarks for Flutter on web.
When it comes to deploying your app across mobile and desktop, both Ionic and Flutter appear evenly matched. Flutter’s early demos show that you can create some great looking iOS and Android apps from a single codebase. And while their desktop support is still in technical preview, the demos we’ve seen show that you can compile your app to run natively on a number of desktop platforms.
The question is whether you want to deploy your app over the web, either as a traditional desktop web app or a PWA. The inherent limitations of Flutter’s web implementation (expanded upon in the Performance section above) will likely never work for apps that require fast load times and snappy performance — not to mention that their highly proprietary approach will limit the number of web libraries you can take advantage of. Given that Ionic is built on the web and based entirely on web standards, we think it’s fair to give Ionic the advantage when it comes to the targeting mobile, desktop, and the web.
Native look & feel
For the most part, Flutter and Ionic will both appear native as far as the user is concerned.
Although neither framework uses the native UI elements of each platform, Flutter and Ionic automatically update the design of their UI elements to match the platform that the app is running on —?Material Design for Android, and Cupertino for iOS.
Both solutions allow you to access platform services and native APIs through a library of pre-built plugins, along with a set of tools for building your own custom plugins as needed.
However, it should be noted that Flutter’s native mobile implementation is highly opinionated. If you’re doing custom native work with Flutter, you’ll need to learn Flutter’s way of working with iOS and Android. That’s a good segue to the next topic - knowledge and skillset.
Knowledge and skillset
This is where the distinctions between Ionic and Flutter really become apparent.
Second, because Flutter operates in its own, highly-custom ecosystem, you’ll be learning the Flutter way of doing things, in a way that will not translate to non-Flutter projects. For example, if you’re troubleshooting UI issues, you’ll be learning and mastering the Flutter custom rendering engine, not web apps in general. And when you’re interacting with native device platforms, you’ll be learning Flutter’s interpretation of Android and iOS, not Android or iOS in general. That’s one of the biggest trade-offs to consider when jumping into a development silo that doesn’t share standards and tooling with other platforms.
The last thing to consider is the shelf-life of your project, and the freedom and flexibility that you’ll have as your app matures.
For Flutter developers, you’re putting all of your eggs in the Flutter basket, meaning if Google kills the project (they never do that though, right?), you’ll be left with a skillset and codebase that are effectively homeless.
With Ionic, you’re betting on the web, so that even if you choose to build on other platforms in the future, everything you build will still be based on open web standards. And, because Ionic relies on Web Components, you can use it with any JS framework. That’s important, because while React and Vue are hot today, that could change tomorrow. And with Ionic you’ll have the freedom to take advantage of whatever tomorrow brings.
To help summarize the key distinctions between Flutter and Ionic, here’s a comparison chart that provides a breakdown along some of the key dimensions you’ll want to consider.
|Runtime||Custom graphics engine||Web browser|
|UI elements||Proprietary Widgets||Standards-based Web Components|
|Native API access||Native plugin library, using Flutter native packages||Native plugin library, using Cordova and Capacitor|
|Mobile performance||Excellent||Very Good|
|Deployment options||Mobile, Desktop, Web||Mobile, Desktop, Web, PWA|
We hope this article helps to clear up some of the similarities and differences between Ionic and Flutter, so that you can make an informed decision. As we’ve tried to demonstrate, while Ionic and Flutter share an ambitious vision of creating beautiful, high-performance apps that work everywhere, our core philosophies lie at opposite ends of the spectrum.
Ionic’s guiding principle is to use the web platform and embrace open standards wherever possible. When you build with Ionic, you will learn and apply the tools and languages of the web, using a framework designed to deliver great performance on mobile, desktop, and especially, the web.
Flutter, in contrast, has chosen to go it alone, creating a self-contained ecosystem that is at odds with the common languages, toolsets, and standards found in the broader development world. Thus, if you choose Flutter, you will be learning the Flutter way of doing things. Of course, there are clear benefits to a custom architecture that has one single purpose, as we’ve seen in some of their impressive early demos.
In the end, your choice of solution should be based on which philosophy you align with, where and how you plan to deploy your app, and what skills you know today or would like to learn in the future. And of course, the best way to find out which one is right for you is to start building with both and then compare your experiences.