How to Create a React Native App Using Typescript
Natam Oliveira | Nov 30, 2023
Cross-platform app development has been around for a long time. It helps app development companies save time, money, and effort and allows them to launch apps across platforms before their competitors.
However, to experience these benefits, you need the right cross-platform toolkit. While there are several options out there, we’ve found that Flutter is one of the best.
Today we’re looking at what Flutter is, its benefits, and some amazing apps built with Flutter. Plus, plenty of top tips from the experts here at Cheesecake Labs about iOS and Android app development with Flutter!
Flutter’s website defines it as an open-source framework crafted by Google for developing multi-platform apps. But it’s much more than that.
Technically speaking, Flutter is more of a toolkit or software development kit (SDK) because it comes with everything a developer needs (UI library, tools, and rendering engine) to create a fully functional and interactive cross-platform mobile, web, or desktop app from scratch.
To create multi-platform apps using Flutter, developers use Dart — a type-safe programming language crafted by Google. Google’s Dart is a powerful programming language and has a low learning curve, making it an excellent choice for new cross-platform app developers.
Initially released in May 2017, Flutter has come a long way. Flutter has surpassed React Native as the most used cross-platform framework by developers worldwide. Plus, several popular companies have had their apps developed with flutter (more on that later). So, yes, Flutter is definitely popular!
The primary reason behind Flutter’s popularity is its cross-platform nature. Developers can easily create high-performing native apps for iOS and Android. And they can use the same codebase to create macOS, Windows, Linux, and embedded apps.
Here’s why Flutter has become so popular and why so many developers use it for cross-platform development.
For any mobile app to succeed, you need an attractive and carefully designed user interface. And that’s exactly what Flutter helps developers achieve. Flutter offers a variety of built-in UI elements that are visually appealing and high-performance that developers can use to create amazing UIs for simple and complex apps.
Unlike regular frameworks that first convert the code into the native platform language, degrading app performance, Flutter compiles directly into native code. And rendering is done using Skia (Flutter’s graphics engine.) This way, there’s no lag while scrolling or interacting with elements delivering the best possible user experience.
Because Flutter is a cross-platform app development framework, it allows developers to use the same codebase for Android and iOS apps. The latest version also includes extended desktop or web development support. This saves time and money during development.
In addition to cross-platform support, Flutter offers lots of ready-to-use core layout widgets along with Cupertino and Material Widgets. That means developers can add more functionality without having to code their way through, saving lots of time.
Apps built with Flutter are faster to test thanks to hot reload. The hot reload feature allows developers to instantly see applied changes without losing the current state of the application. That means developers can see changes in real-time without running the entire code, further reducing app development time.
Flutter claims to offer developers “control over every pixel of the screen”, and that’s not far off. When it comes to UI, Flutter offers near-complete freedom thanks to its graphics engine, Skia, which draws everything on the screen the same way for different platforms.
For example, if developers want a button to look identical across platforms, they can make it happen with Flutter. Or you can use native widgets to give apps a native feel. For example, you can find unique widgets for alert boxes in Android and iOS.
One of the biggest benefits of using Flutter for app development is the easy learning curve. Flutter uses Dart programming language, whose syntax is similar to C# and Java. So, if developers are familiar with Java, C#, or C++, building an app with Flutter won’t be a problem.
What’s more, Flutter’s documentation is extensive and super helpful. You can even find several free YouTube courses and other resources, along with a vibrant Flutter community ready to help. These great resources make it easy to learn and use Flutter to build amazing apps.
While there are thousands of apps made with Flutter, here are some of the most famous ones:
Famous for their work on records for The Beatles, Pink Floyd, Adele, and so many more, Abbey Road Studios has gone digital with their mobile app, Topline. Topline helps artists record their ideas anywhere and everywhere. Abbey Road Studios wanted to make sure no Grammy-worthy song ideas were lost just because an artist was out of the studio.
Initially, Topline was created for iOS. Soon enough, artists worldwide started requesting an Android version. And when the team at Abbey Road Studios weighed their options, they decided Flutter was the most reliable and quickest solution.
Developers at Abbey Road Studios were fascinated with Flutter’s features like hot reload and native pre-built app widgets. Thanks to Flutter, the team was able to create the Android version of Topline in just ten weeks and with a team of only three members.
The My BMW App help drivers connect with their vehicle and control different remote features to offer a seamless driving experience.
Initially, the mobile app team at BMW focused on the iOS version of the app, which led to several discrepancies between platforms. But BMW wanted to offer the same functionality to all its consumers across brands, platforms, and apps.
But hiring a new team for android development would’ve been expensive and time-consuming. So BMW decided to explore cross-platform options instead. They created a proof of concepts with different frameworks and settled on Flutter. Within a year, they launched the My BMW App using a single codebase across different platforms.
eBay Motors is an app from eBay meant exclusively for motor enthusiasts wanting to purchase vehicles, vehicle parts, and accessories.
For years, auto enthusiasts had to rely on the regular eBay app for purchasing and selling motor vehicles. So in 2018, the eBay motors team was asked to build a dedicated app for both iOS and Android. Because the team was small, they knew they needed to find a cross-platform solution to save time.
The team had heard the buzz about the recently released Flutter and decided to give it a shot — which turned out to be a great gamble. They enjoyed the development process, and Flutter helped them save time and collaborate with fellow development teams. The team managed to release a beta version of the eBay Motors app within their year timeframe, followed by the production release a few months later.
Nubank is a Brazilian digital banking app, considered the largest one outside of Asia. It aims to make banking easier by reducing the complexity of dealing with traditional banks.
Nubank struggled to find native mobile app specialists for iOS and Android platforms to keep up with demand as they scaled quickly. Because of their fast growth, the iOS and Android teams launched features at different times. The Nubank team realized their native teams weren’t scaling well, so they started exploring cross-platform options.
They explored several options, including Kotlin Native, React Native, and Flutter. In the end, developers ended up loving Flutter thanks to its easy onboarding, amazing documentation, performance, API stability, and hot reload, among other perks.
With Flutter, the Nubank team launched high-quality new features consistently while increasing overall productivity and reducing development time.
Reflectly is a journaling app that helps its users write down their thoughts and feelings, track their moods, and increase their happiness. It offers affirmations and morning motivations that become more personalized the longer you use the app.
Reflectly released its first app using a traditional cross-platform framework. However, the results weren’t impressive because the framework limited the team’s capabilities to create attractive UIs and offer a consistent user experience. Sluggish animations and shadows being cut off were just a few of the bottlenecks they faced.
The Reflectly team came across Flutter. Flutter offered them control over every pixel, helping them deliver a consistent experience across platforms using a single codebase. And within two and a half months, they released both iOS and Android apps.
The STAIR App was created for the US Department of Veterans Affairs to help veterans struggling with PTSD. This app offers users tips and suggests activities like mountain biking, exercises, etc., to help them better manage their PTSD.
The company that developed the STAIR App for the Department of Veterans Affairs, Vertical, was asked to develop an app that was fully accessible. They turned to Flutter to help them with the task.
Because Flutter allows developers to use a single codebase, it helped Vertical’s development team cut up to 30% of development time. And they were able to focus more on creating better content. As a result, the team was able to develop a quality application that helps several Veterans better acclimate back into civilian life.
Next on our list is a bit of a different application — Toyota’s in-vehicle infotainment systems.
Toyota initially developed their infotainment technology in-house, but they were intrigued by Flutter and the potential it offered to improve the user experience. When Flutter released support for embedded systems, they formed a partnership and started development.
The team successfully created an infotainment system that looked more premium and smartphone-like using Flutter’s rendering engine and features such as AOT compilation. And now Toyota is using Embedder API from Flutter to create Linux based infotainment system that offers a premium experience to their drivers.
Travelstart is Africa’s leading online travel agency that helps users book vacation packages, flights, car rentals, and other travel services.
While Travelstart had decent iOS and Android apps, they wanted to offer a web platform for better reach. But their team of just ten developers wasn’t enough to support both platforms. So they wanted to overhaul their apps with a cross-platform solution, leading them to Flutter.
The Travelstart team wanted a platform that would offer them a single codebase. They experienced better flexibility and efficiency, along with a 90% smaller codebase and a 60% reduction in the mobile engineering team. And using Flutter’s web build feature, they were able to create a reliable web app.
We’re big fans of Flutter, and while working with the framework, we’ve come up with a list of tips to make the most of your time with Flutter.
Flutter uses Google’s Dart programming language. But learning it on the go will slow down the development process, defeating the purpose of cross-platform app development — saving you time.
So it’s important to familiarize yourself with the ins and outs of the programming language. This will help you get more comfortable with Dart and pick up on some of the language’s shortcuts, making the development process much easier.
Flutter offers so many great features, so make sure you’re using them! Hot reload should be at the top of your list because it can help you save time during development.
Using hot reload, developers can instantly see their changes in action without losing the current state of the application. This lets you simplify the process of adding features, fixing bugs, and creating UIs.
Building a Flutter app comes with multiple types of testing, including unit tests, widget tests, and integration tests. And integration tests test the entire app. Flutter Inspector helps simplify integration testing.
Using Flutter inspector, testers can visualize Flutter widget trees and use element properties to write integration tests much faster. Since this feature simplifies the testing process, you’ll be able to run through tests more frequently.
With Flutter, designers can make awesome animations with tools like Rive. Rive can help designers create amazing animations, define their states, and add them to the app just as they would add an image or any other file.
We’ve already talked a bit about the thriving Flutter community, but it’s worth another mention. Flutter developers can explore over 24,000 packages on pub.dev. And if you get stuck, you can head over to Stackoverflow questions and GitHub issues for expert advice from the community.
If you’re interested in developing a Flutter app but don’t have the capacity in-house, it’s a great idea to work with an expert development team.
At Cheesecake Labs, we have a seasoned team of 100 developers, designers, project managers, and tech experts with over 200 projects under our belt, and we were ranked as the 4th Best Flutter development company in the world by Clutch.
Our team of expert Flutter developers can handle your project from the beginning to the end and work with you as a dedicated development team. We have the experience, skills, and resources to develop the best flutter apps.
Here are some amazing flutter apps examples that we developed:
If you’re looking for a reliable partner to help you build Flutter apps, get in touch with Cheesecake Labs. We can’t wait to work with you!
VP of Engineering at Cheesecake Labs - IA / IoT enthusiast. Go bravely where no one have never gone before!
Karran Besen | Nov 16, 2023