Flutter 101: what you need to know about the #1 cross-platform framework

Despite only being around since 2017, Flutter has already become the king of cross-platform frameworks - with recent research from Statista putting it ahead of all competitors:

If you want to develop natively compiled mobile, web and desktop apps all from a single codebase, then you need to learn about Flutter and consider it for your project. 

At MobiLoud we’ve developed thousands of native apps, and learned all the ins and outs of app development over the years. We wrote this article to teach you all you need to know about Flutter - what it is, how it works, and who it is for. 

By the end, you’ll know everything you need to make a sound decision about your app project. Let’s get into Flutter 101. 

What is Flutter?

Flutter was released by Google back in 2017, as an open-source UI SDK. 

It’s often associated with Android and iOS native apps - but it’s also used to develop for Linux, Mac, Windows, Google Fuchsia, and the web from a single codebase.

Flutter’s 7 year History

Since 2017, Flutter has evolved, going from strength to strength. Before we get into the technical details, skim this timeline for context. 

• 2017: Flutter Beta announced, introduced as a cross-platform framework for building mobile apps from a single codebase
• 2018: Google announces the Flutter Release Preview at Google I/O, bringing improved stability and a bigger widget library
• 2019: Flutter 1.0 launches, the first stable release establishing its readiness for production apps
• 2021: Flutter 2 released, introducing support for web and desktop app
• 2022: Flutter 2.8 brought performance improvements, app size reduction, and the Flutter Casual Games Toolkit 
• 2023: Flutter 3.0 announced, bringing support for macOS and Linux desktop apps, along with the rollout of Material 3 support and various performance and tooling upgrades 

So Flutter has really been going places, and taking the world of cross-platform development by storm. 

Now let’s get a little more into exactly what Flutter is.

Flutter 101

The most important initial fact to note:

Flutter is a cross platform app development framework. 

To illustrate exactly what that means, consider the original way of building mobile apps - native development. 

The Problem with Traditional Native Development 

There have always been two operating systems that dominate the smartphone market - iOS and Android. 

Just like Windows and MacOS on Desktop - iOS and Android work very differently at the foundational level, from the way the UI is structured to the way the software interacts with the hardware. 

The entire architecture is different in both software and hardware terms. So the programming languages and development tools required are different for each platform. 

Traditionally this means:

• iOS - Swift (or Objective C) as a programming language, Xcode and Simulator for development and testing environments

• Android - Kotlin or Java for programming, Android Studio and SDK 

You need to use these very different and distinct technologies to build the apps for iOS and Android separately, with two different codebases. 

This means that you need to hire different specialists (or teams) for each app, along with PMs and designers to work across teams. 

You’ll forever have two separate codebases to manage. When you have updates or bug fixes, you’ll need to work separately, pushing them to each. Whenever you want to build a new feature or functionality - you guessed it - you’ll have to build it specifically for each platform. 

This is all a lot of work, as you can imagine. 

Even worse, consider all the different screen sizes and aspect ratios within the iOS ecosystem - all the different iPhones and the iPad. And when it comes to Android, devices can be made by literally anyone, and there are countless devices and specifications.

You need to test for all of these, and make sure your apps (on both platforms) display smoothly and give a great UX. 

This all sounds hard right? Like doubling the work? 

Well, it is. 

That’s why native app development is a painstaking process, costing hundreds of thousands of dollars and many months to develop relatively simple apps. 

Flutter helps to make things more efficient - let’s find out how. 

How Flutter makes App Development more Efficient

So the problem with native development is how difficult and expensive it is - which is partially because of having to work with two separate codebases. 

Flutter solves this. 

Flutter is both a UI kit and a framework for developing apps for both iOS and Android from a single codebase. 

It has a large set of pre-built widgets that make it easier to layout your app, borrowing concepts from web design like padding and centering. 

You can use this foundational system to design and develop apps for almost any device and screen size.

At the most basic level, Flutter “asks” for a blank window from the device, whatever that may be. It will then draw onto that blank screen whatever UI element, interaction, or animation needs to be rendered. 

So whatever the OS, this will work the same, and the UI will “look the part” too - you can define and specify different styles and designs for iOS, Android, or specific devices. 

Now we’ve had a high level overview - let’s get more into the details of Flutter’s core features. 

Flutter: The Core Features

There are several cross-platform frameworks, but Flutter is unique.

Later on, we’ll compare Flutter with alternatives like React Native, but for now let’s review Flutter’s core value propositions:

• Develop from a single codebase: build for iOS, Android, web, and desktop with just one codebase for much more efficiency and speed. Typically, you can reuse at least 90% of your code. 
• Hot reload: make changes to your app and see the results instantly without losing the current application state. We’ll cover this more later - but it's great for developer productivity.  
• Rich Widget Catalog: Flutter provides a comprehensive catalog of pre-designed widgets over 14 categories. They follow specific platform guidelines, so your app can look and feel native on any device.
• Performance: Flutter apps are compiled Ahead Of Time (AOT) into native machine code for iOS and Android, without the need for a “bridge” or interpretation layer like other cross-platform frameworks. The Dart (more shortly) code you write can execute directly, which can be great for creating a fast and smooth UX. 
• Customizable and Flexible: Thanks to its layered architecture, and the fact that Flutter “controls” every pixel on the screen - you have the potential for incredible customization. 

These are a few of the reasons why Flutter has pulled ahead of the competition to become the world’s most popular cross-platform framework. 

We will revisit all these in more detail later in the article. 

Flutter - the Technical Details 

Now we’ve gone through the basics, let’s go a little deeper and review some of the technical details. 

We’ll start off with the Dart programming language. 

The Dart Programming Language

Dart is relatively “young” in programming language terms, but it has still been around a while. 

Initially released in 2011 by Google, Dart was intended to replace JavaScript for web development. 

It never reached this lofty goal, but it did find its niche as the programming language for the Flutter ecosystem. 

Some key facts about Dart:

• Object Oriented: designed for programming styles that use “objects”, which are self-contained “entities” consisting of both data and methods. Think of them as “things” in the code which have both specific characteristics and “actions” they can perform. 
• Class Defined: objects in Dart are defined by what is known in programming as a “class”, which is like a recipe or blueprint for making an object - defining what data it can hold and what actions it can perform. For example in Flutter to create a new button, you define a button class with its color, size, and what should happen when it's tapped. You can then reuse this any time you want. 
• C style Syntax: this just means that the way the language is written is similar to C, known for its curly braces { } and semicolons to end commands. Those with experience in C, C++, or Java will find Dart easier to understand. 
• Sound Type System: Dart is very careful about the types of data your code is working with, this helps programmers to catch mistakes more easily and ship less buggy apps 

Dart supports two different types of compilation -  just-in-time (JIT) and ahead-of-time (AOT). These support different phases in the app development process:

• JIT - used during development, and allows code to be compiled on-the-fly in small pieces through Dart’s virtual machine. It enables hot reload, allowing developers to see changes instantly, and is the default in development environments. 
• AOT - used when the app is ready for deployment to create a production build. Dart compiles the entire codebase into native machine code for iOS or Android, so that the apps can run directly on the device’s CPU. This is triggered when you build a release version of your apps. 

These allow for efficient development cycles and fast, predictable performance in production environments. 

Dart's architecture is specifically designed for Flutter, and has a rich standard library and set of modules that can be used to build any type of app. 

To summarize - Dart is a modern and sophisticated programming language that you can use to build fast, powerful, and beautiful mobile apps. 

Now we’ve covered Dart, let’s move on to another important Flutter concept - widgets. 

Widgets: The Building Blocks of Flutter Apps

Widgets act as the fundamental UI components for apps, which Flutter combines in the UI to create complex designs and functionalities. 

Everything you see in a Flutter app is a widget, from a simple text label or an icon to more complex structures like buttons, sliders, and even the entire screen layout itself.

Some common and useful widgets are:

• Text: For displaying text.
• Row and Column: For creating flexible layouts.
• Container: For decorating its child with features like padding, margins, borders, or color.
• Image: To add images.
• Scaffold: Offers a host of UI features like drawers, snack bars, and bottom navigation.

There are 15 categories of widget in total. By combining these widgets in a widget tree - you can create apps of virtually any functionality or complexity. 

Rendering Engine and Framework

Skia is an open source, 2d graphics engine. It is used heavily by Google on various platforms - and Flutter is one of them. Flutter relies entirely on Skia for rendering the UI build with widgets. 

It's what allows Flutter to paint UIs onto the canvas of the device screen at 60fps or more, making UIs smooth and crisp across platforms. This performance is critical for creating seamless, responsive applications.

Setting up a Flutter Development Environment 

We’ve learned the fundamentals about how Flutter works, let’s quickly cover setting up a development environment. 

Required Tools and SDKs

Flutter SDK is, unsurprisingly, a must. It offers a comprehensive suite of tools for building, testing, and compiling Flutter apps. 

Dart SDK is also required and comes bundled with Flutter.

For code editing, Visual Studio Code or Android Studio are good choices and recommended for their solid support for Dart and Flutter. Both support the Flutter plugin which simplifies development.

Technically though - you can use any IDE or text editor combined with Flutter's command-line tools!

Setting Up for iOS and Android Development

Even though you develop your apps from a single codebase - you also need to test them on the major platforms. They each have their own quirks and unique features - and might need some minor tweaks and adjustments for each. 

For iOS development, Xcode is essential, and you'll need an iOS simulator to test your apps. Alternatively, an actual device can offer a more accurate testing environment. 

For Android, Android Studio provides not only an excellent IDE but also an emulator to test your apps. 

This basic setup allows you to develop, test, and deploy your Flutter apps across both major platforms efficiently. 

Flutter also lets you Implement platform-specific UI features and functionality if needed! You still get to reuse the vast majority of the code, but also account for edge cases and platform quirks. 

Integrating Flutter into Developer Workflows 

Apart from its sheer power, there are a few reasons why developers love Flutter and it gets more and more popular every year. 

One of the most popular features is hot reload. It basically allows you to see the effect of your code changes in real-time, without needing to restart your apps. This is thanks to the previously mentioned JIT compilation. This makes developers' lives easier, and lets them experiment with bug fixes and new designs faster. 

From the business owner’s perspective, this speeds up development and frees up your team. 

Flutter also lends itself well to testing and debugging. 

This is absolutely crucial to make sure the apps perform well and succeed, and Flutter comes with all the testing and debugging tools you need.

It supports unit, widget, and integration testing - and integrates well with several IDEs (mentioned above) to make things simple. 

Finally, Flutter integrates perfectly with various continuous integration and deployment tools (CI/CD). 

These tools allow for automated testing, building and deployment processes - making your team more productive and ensuring app quality. Flutter works great with platforms like Codemagic, Bitrise, and GitHub Actions, and you can easily set up effective pipelines. 

Overall - from a developer and devops perspective - Flutter is an excellent choice with all the features needed to succeed. 

Businesses using Flutter

To get an idea of Flutter’s capabilities, let’s look at a few famous brands who are using Flutter. If you want, give these a download and take a look around for a live Flutter demo. 

• Alibaba's Xianyu - a used goods ecommerce app with 50m+ users 
• Hamilton Musical - for theater fans with millions of users (iOS/Android)
• Google Ads - Google’s own app for advertisers on their platform (iOS/Android)
• BMW - a universal interface for millions of BMW drivers around the world (iOS/Android)
• eBay Motors - developers at the ecommerce giant loved Flutter (iOS/Android)

These are all top brands with mature tech capacities. The apps they built are used by millions, which shows the possibilities. 

(Keep in mind though - they probably spent millions on them too). 

Now we’ve seen some examples of Flutter apps and learned some key facts about the framework - lets directly compare it to alternatives. 

Flutter Alternatives - How does it Measure Up? 

We have now covered key aspects of Flutter. 

We’ve seen how Flutter can be a great choice for developing apps the cross platform way - but it isn’t the only option. Not by a long shot. 

Not only do many businesses still build apps the traditional native way, but there are other cross-platform frameworks too, as well as hyper-efficient app development services like MobiLoud. 

The Pros and Cons of Flutter

Before we compare the alternatives, let’s briefly review the pros of Flutter. 

• Single Codebase for Multiple Platforms, making app development very efficient and making it a great choice for startups 
• Rich Widget Library that allows for the creation of highly customizable and visually appealing user interfaces.
• Performance nearly indistinguishable from native apps because it compiles to native machine code
• Hot Reload and the Dart ecosystem that enhances the development process 
• Vibrant Ecosystem and Community providing a wealth of resources, including packages, plugins, and tools.

What we haven’t mentioned yet is the cons of Flutter. They do exist, and they’re important for evaluating the framework objectively. 

Here are the most important drawbacks:

• Larger App Size - Flutter apps tend to have larger file sizes compared to native apps. This can be a drawback, especially in markets where users have limited storage space on their devices or slower internet connections for downloading apps.
• Limited Library Support for Advanced Features - while Flutter's library support is excellent, it may lack some advanced features found in native development. This limitation means that for very specific or advanced functionalities, and for “innovating” with something very new and cutting edge, you might need to build custom solutions or rely on external tools.
• Learning Curve - for teams unfamiliar with Dart (Flutter's programming language) or declarative UI programming, there can be a learning curve. However, once overcome, Flutter becomes a powerful tool in your development arsenal.

Another important point. 

Flutter apps are still “difficult” and expensive to build - they’re just much less so than traditional native apps. They’ll still cost tens of thousands of dollars and months to ship. 

So while they’re very efficient compared to native development - they may be “inefficient” compared to hybrid development and especially compared to MobiLoud which can get you comparable apps in just weeks for <10% of the cost. 

Let’s compare Flutter in more detail versus the alternatives. 

Flutter vs Native Development

While Flutter was developed to improve on native development, the original native way to build apps still has some advantages in some scenarios. 

If the following are very important to you, native might be the way to go. 

When Native > Flutter

• Optimal Performance: Native apps are known for their speed and optimal performance, because they use the operating systems’ core programming languages and APIs. For extremely demanding applications like high-end games or apps relying on complex animations, native can (theoretically) offer the edge in performance. For the majority of apps though - you won’t see the difference. 
• Advanced Capabilities: some advanced or cutting edge features might be easier to integrate natively. Flutter does allow you to call native APIs via bridging, but this might not always be straightforward and without tradeoffs.

Some make further arguments. 

For example, they’ll say that the native ecosystems are more established, that the community and support is better, that it is easier to comply with platform specific best practices. 

In our opinion - these points are either subjective or outdated. 

Back in the earlier days of Flutter they were true, but the community and ecosystem has evolved massively. Flutter is a big player now, used by the biggest and most tech savvy companies on earth. 

In our opinion - unless you need a cutting edge or extremely high performance application Flutter beats native in most cases. 

Let’s reiterate why.

Why Flutter > Native 

• Development Time: the single codebase, productivity boosters like hot reload, and deep library of widgets makes it easier and faster to develop apps 
• Development cost: fewer developer hours are required, and instead of hiring separate (specialist) teams for iOS and Android, you can have a single, smaller team working on both platforms. 
• Maintenance: maintaining and updating a single codebase is more efficient. Bug fixes and new features can be rolled out in one go. 

You can see that Flutter beats native on efficiency, and because of the time and cost savings that come from working from a single codebase. 

It is impossible to give an exact figure, but as a rough estimate time and money savings of 50% are possible. 

Now let's move on to comparing Flutter with another popular cross-platform framework. 

Flutter vs React Native 

React native is another cross-platform framework developed by Meta. It allows developers to build iOS and Android apps using JavaScript and the React framework.

It shares several of Flutter’s advantages - like a single codebase and a strong community and ecosystem. 

Let’s compare some important differences. 

Why React Native > Flutter

• Familiarity: because React Native leverages JavaScript and one of its most popular frameworks, it can be more familiar to existing web teams and easier to upskill and adapt
• Code reuse: if your existing tech stack is JavaScript and React heavy, you might find it easier to reuse some of your existing code in the apps 

React Native also has a great community and a mature ecosystem. But, so does Flutter. Now, let’s look at a few compelling reasons why many prefer Flutter.

Why Flutter > React Native

• Performance: React Native “bridges” JavaScript code with native components. This can introduce performance bottlenecks and tradeoffs compared to Flutter's direct compilation to native code.
• Speed: this is subjective, but many believe that Flutter apps are faster to develop due to a superior developer experience and inherent drawbacks of React Native

Beyond this, there are a lot of strong opinions each way. 

Many React Native advocates say that Flutter apps do not “feel” as native because they don’t directly use native components (they “draw” on the screen, remember) but React Native apps do. 

They also say Google is unreliable and could stop maintaining Flutter in the future (Same for Meta?). 

On the other hand - Flutter fans point to the superior developer experience and less “scrappy” workflows compared to React. They say that although Flutter apps may be “less native” in a sense - because of the superior performance they feel more native. 

Like many things in tech, opinion is divided. 

Here are our two cents though. 

If your team is already skilled in JavaScript/TypeScript and React, React Native is probably best. 

If performance is crucial to you, a modern widget-based experience is a pro, and “backed by Google” appeals - Flutter might be the best choice. 

Flutter vs MobiLoud

If you already have a web app or a website, MobiLoud is a much better option than Flutter, let alone React Native or native development. 

MobiLoud is not a framework, but an app development service. It works by taking your existing website, online store or web app and converting it into iOS and Android apps. 

Why MobiLoud > Flutter

• Time and cost: although Flutter is “efficient” compared to MobiLoud it is still an expensive and time consuming nightmare. Flutter apps will take months and cost tens (hundreds) of thousands. MobiLoud apps are ready for launch in weeks, for a tiny fraction of the cost.
• Keep what works: you can keep all the features and functionality from the web, with no compromise. With Flutter, you will never exactly recreate your web experience. 
• No extra work: MobiLoud builds and publishes and maintains and updates the apps for you. The apps also sync automatically with your site. So there’s no need to hire, give work to your team, or worry about expensive future headaches. 

MobiLoud is a way to convert what you’ve already built. You’ve done all the hard work already building for the web, so you can keep focusing on that while the apps, compared to Flutter, run themselves. 

Because it is so fast and affordable, it's a realistic way of seeing fast ROI from your apps. Building apps with Flutter is much more risky because of the time and capital investment. 

That said, there are cases where you would opt for Flutter over MobiLoud:

Why Flutter > MobiLoud   

• App only: if you are building app first and do not already have a web presence, MobiLoud can’t help you 
• Unusual use case: MobiLoud works best for ecommerce stores, online communities, media sites, and web apps. If you want to build a game or a demanding application Flutter may be better for you. 

You can check out some of the businesses that have used MobiLoud, and even get a preview of how your app will look. 

Preview your MobiLoud app

Looking Ahead: The Future of Flutter

As we’ve seen, Flutter has really made a dent in the world of mobile development. 

Some skeptics warn that Google has a tendency to drop projects and leave entire communities hanging. But from what we can see, the ecosystem continues to evolve. 

A few things on the roadmap:

• Better Speed and More Device Support: making apps run smoother and faster, especially for iPhone users, while also making sure Flutter works well on a wide range of modern devices 
• Improving App Looks and Ease of Use: updating Flutter to include the latest design features, making it easier for apps to look good on Apple devices, and simplifying how developers create and manage the app's appearance
• Easier Integration with Phone Features: deeper integration withiPhone and Android
• Tools and Language Updates: new tools and language updates to help developers build apps more easily, especially for AI app development 

Flutter will keep getting better for the foreseeable future - and seems committed to continual maintenance and evolution.

Is Flutter for you? 

We hope you’ve enjoyed this article and that you’ve learned a lot about Flutter. 

As mobile developers, we’re impressed with how the framework has evolved to conquer the cross-platform world in recent years. 

Remember - if you want to build apps from scratch, are willing to hire skilled specialists, and have months and tens of thousands of dollars to spend….. Then Flutter could be perfect for you. 

If you already have a website/app/store, you want to get to market fast and with no risk, and you want to keep all your web features and functionality - MobiLoud is the better option. 

If you’re like our 2000+ clients, we build you apps at least as good as what you’d get with Flutter for a fraction of the investment. They’ll be much easier to maintain and integrate into your operations and workflows, and far more likely to generate ROI. 

MobiLoud apps are good enough for multibillion dollar brands, with a startup friendly budget. 

So before you start researching Flutter in even more detail, think about whether MobiLoud could be a much better option for you. 

You can preview how your MobiLoud app would look now, and you can get all your questions answered by one of our helpful app experts. 

Let’s get you on the App Store and Google Play.

Book a demo call today.