Flutter – Droids On Roids https://www.thedroidsonroids.com iOS & Android Mobile App Development Company Mon, 07 Jun 2021 07:54:00 +0000 en-US hourly 1 Flutter 2.2.0 Is Here! 3 Reasons Why It’s Awesome https://www.thedroidsonroids.com/blog/what-is-new-in-flutter-2-2-0 https://www.thedroidsonroids.com/blog/what-is-new-in-flutter-2-2-0#disqus_thread Fri, 28 May 2021 17:26:25 +0000 https://www.thedroidsonroids.com/?p=37805 Discover the three most important changes that came with Flutter 2.2.0 announced while Google I/O 2021.

The post Flutter 2.2.0 Is Here! 3 Reasons Why It’s Awesome appeared first on Droids On Roids.

]]>
 

Flutter 2.2.0 is MAJOR minor update

After the big premiere of Flutter 2, Google has shown that it wants to continue developing the framework, which is one of their many projects (we all know what happens with most of them).

We no longer have to worry about the future of our framework because Google wants to leave a mark in the world of mobile cross-platform for good. Flutter is beginning to mature.

On Google I/O 2021, they announced Flutter 2.2.0. Over 1,000 PRs in flutter/flutter merged and more. Flutter Web, iOS improvements, a new Dart release, new packages, tool improvements and so much more.

In this article, I will show you three changes that in my opinion are important for the future of Flutter developers.

1. Official Docker support and Dart on Google Cloud

We are getting tested and validated Dart images on Docker, which support AOT compilation. Dart on the backend is not something new. We have projects like Aqueduct, Angel or Jaguar, as well as complex server frameworks created by the community.

Having only Flutter developers in a team creating the frontend and backend with one programming language could have its huge advantages.

Everyone has the same knowledge about the project because there’s no division between backend and frontend devs. We write in one common language, so there’s even some space for reusing components.

If we have only one dev (for maintaining the project, for example) that person can easily switch between platforms if required, without waiting for the backend dev to make changes for him or her.

But backends written in Dart are not a popular solution, and you can easily see it by activity in the packages mentioned earlier.

With this update, Google wants to support that approach. They even work with a community on a package that will allow us to use Cloud Functions in Dart, supporting serverless solutions. I hope that this update will trigger the community to return to this topic.

2. iOS performance improvements

This update is not in production use, but in preview. They finally took care of the legendary iOS jank. I’ve seen many tweets or youtube videos saying that Flutter is completely useless on iOS because of this (for example this video).

We, as Flutter developers, know that the problem with compiling shaders happens only in particular cases, so we can avoid increasing rendering performance. But from a user perspective, when it happens it is a serious issue, it can in the worst cases make them remove the application.

Google came up with an idea of caching shaders so they are ready before the first frame. But it was only working on OpenGL. We know this because, with Metal enabled on iOS by default, this issue still exists.

From this PR we can see that the ability to warm up shaders is also going to be available with Metal. If you want to try it, make sure you’re on the dev channel!

The first user experience is crucial from the business point of view. Users can remove your application because of too long loading indicators, bad UX, or non-performant animations. It’s really good to see Google and the community’s cooperation over this problem.

3. Community appreciation

One thing that Google does better than Apple is noticing its community. They do it at every event by organizing social media initiatives. The best clock written in Flutter, sending photos to be displayed on upcoming Google events, creating your own dash avatar, fun Flutter-related filters and so much more.

Community is an integral part of Flutter development. Community is Flutter.

They let developers maintain core widgets, they appreciate some popular packages by adding them to Flutter Favorites, and they also mention some packages in their tutorials!

Google makes you feel that this framework belongs to you, the developers, and not to the stakeholders of Alphabet.

From a marketing point of view, this is the perfect way to develop your product. The more you engage the community, the more feedback you get. The best testers of your product are your users. The same goes with Flutter.

I talk about all of this because, in Flutter 2.2.0, Google also recognized its community.

Do you perhaps know the provider package?

Of course you do!

This package, created by Remi Roussel, is now available to be debugged in DevTools! This is just a magnificent move isn’t it?

The future is bright!

Those are three things that mean that Google is really serious about Flutter and the times when people were wondering when this project will be closed are finally over. We love Flutter at Droids On Roids (we’re an experienced Flutter development company), and we’re very much looking forward to the next updates!

See our apps made with Flutter:

The post Flutter 2.2.0 Is Here! 3 Reasons Why It’s Awesome appeared first on Droids On Roids.

]]>
https://www.thedroidsonroids.com/blog/what-is-new-in-flutter-2-2-0/feed 0
Flutter vs. React Native – What to Choose in 2021? https://www.thedroidsonroids.com/blog/flutter-vs-react-native-what-to-choose-in-2021 https://www.thedroidsonroids.com/blog/flutter-vs-react-native-what-to-choose-in-2021#disqus_thread Mon, 10 May 2021 14:00:48 +0000 https://www.thedroidsonroids.com/?p=17221 Flutter vs React Native – comparison for business & app owners. Find out which framework is ideal for your cross-platform app development.

The post Flutter vs. React Native – What to Choose in 2021? appeared first on Droids On Roids.

]]>
What you’ll find in this article

Why we created this article

Cross-platform solutions are gaining popularity. Flutter and React Native are the two leading market players, but at Droids On Roids, we’ll build commercial apps for partners using the approach that best fits the solution – be it native, Flutter, or React Native.

Still, business owners always want to know the answer to several critical questions:

  • Which framework best fits my project?
  • Which solution can provide the fastest time-to-market for my app?
  • Will my app be stable and user-friendly?
  • Which solution is best if perfect design is my #1 priority?

We wrote this article to summarize the answers we share with our partners so that you can benefit from them, too.

We hope it helps you make a smart, conscious decision when it comes to choosing the best cross-platform solution for your app idea.

Who wrote the article?

It takes a certain level of experience to write about Flutter and React Native in sufficient depth – and to compare and contrast the two technologies.

As such, we asked two Droids On Roids developers to take on the task:

These two build commercial apps for clients in Flutter and React Native every day. So, you can be sure the knowledge they’re about to share includes not only the theory but years of development experience as well.

We have also tested our understanding against popular articles in the developer community, referencing these sources to answer any questions. You can find a full list of their references at the end of this post.

Flutter vs. React Native: In a nutshell

Flutter React Native
What is it? A portable UI toolkit for building natively-compiled apps across mobile, web, and desktop* from a single codebase A framework for building native applications using React
Official release December 2018, Google I/O March 2015, F8 Conference
Created by Google Facebook
Free and open source Yes Yes
Programming language Dart JavaScript
Popularity 120,000 Stars on Github (May 2021) 95,300 stars on Github (May 2021)
Hot Reload Yes Yes
Native performance Great Great
UI Flutter apps look as good on the up-to-date operating systems as they do on older versions.

Since they only have one codebase, the apps look and behave similarly across iOS and Android – but thanks to Material Design and Cupertino widgets, they can also imitate the platform design itself. How’s that possible?

Flutter contains two sets of widgets which conform to specific design languages: Material Design widgets implement Google’s design language of the same name; Cupertino widgets imitate Apple’s iOS design.

This means that your Flutter app will look and behave naturally on each platform, imitating their native components. 

Application components look just like native ones (e.g. a button on an iOS device looks just like a native iOS button, and the same on Android).

The fact React Native uses native components under the hood should give you confidence that, after any OS UI update, your app’s components will be instantly upgraded as well.

That said, this can break the app’s UI but it happens very rarely.

If you want your app to look near-identical across platforms – as well as on older versions of an operating system (as Flutter achieves) – then consider using third-party libraries (like this one). They will enable you to use Material Design components, in place of native ones.

Sharing code With Flutter 2 (announced in March 2021), we can use the same codebase to ship native apps to five operating systems: iOS, Android, Windows, macOS, and Linux; as well as web experiences targeting browsers such as Firefox, Chrome, Safari, or Edge.

Flutter can even be embedded in cars, TVs, and smart home appliances. (source).

Perhaps the single largest announcement in Flutter 2 is production-quality support for the web. It can be used for:

  • Progressive Web Apps (PWAs) that combine the web’s reach with the capabilities of a desktop app,
  • Single Page Apps (SPAs) that load once and transmit data to and from internet services.
  • Existing mobile apps – allowing Flutter apps to be run on a desktop.

Find out more here.

iOS and Android – but there are select libraries that allow you to use the same code to build iOS, Android, web, and Windows10 apps.

You can also extract shared code in mobile, desktop, and web apps, to a separate repository; treat it as a separate project; then inject it in the same way as another dependency.

This allows a developer to focus on writing code for a specific platform without having to consider compatibility with another one.

Top apps made with this technology Xianyu app by Alibaba, Hamilton app for Hamilton Musical, Google Ads app, Philips Hue, My BMW, Makani Instagram, Facebook, Facebook Ads, Skype, Tesla
Time-to-market Typically much faster than native development. Possibly as fast as development with Flutter.

However…

React Native uses bridge and native elements, so it may require separate optimization for each platform – a problem that widget-based Flutter doesn’t run into. It may make the app development with React Native longer.

Competitive advantage
  • Great look and feel thanks to rich widgets;
  • Rapidly growing community, and popularity;
  • Excellent documentation with strong support from the Flutter team (which makes it easy to start developing with Flutter);
  • Improving Flutter for Web, offering the potential for one codebase across mobile and web platforms
  • Difficult to beat time-to-market length
  • Stability (5+ years on the market);
  • Many successful, prominent market players using React Native;
  • Mature, vast community;
  • Easy-to-learn technology;
  • Plenty of tutorials and libraries, which allow quick and easy development;
  • Code can be easily reused for both web app and desktop app development.
When it is not the best fit If…

• Your app needs to support 3D Touch (for now, Flutter doesn’t support 3D – but it features on the Flutter team’s long-term roadmap)

The design of your app is platform-specific

• Your app requires multiple interactions with an OS; or requires rare, little-known native libraries

• You need a minimalistic UI, but rely on significant use of the phone hardware (e.g. an application that plays music, or only takes pictures)

• You want to create an instant app (small-sized app)

If your app sounds like any of the above, it’s probably better you choose native app development.

Read more about these cases here >>

If…

• Your app needs to handle less common, or ultra-specific tasks (like calculations) in the background

• You require custom communication via Bluetooth (which can be tricky to implement using React Native)

• You want to create an app for Android only

In truth, if you want to build an iOS app and you know JavaScript, consider React Native – but if you want an Android-only app, it’s likely better to build natively with another team. Why? Right now, iOS has better support than Android.

If your app sounds like any of the above, it’s probably better you consider choosing native app development.

Introduction to Flutter and React Native

First, let’s cover the basic (yet essential) details about Flutter and React Native.

What is Flutter?

Flutter is a portable UI toolkit. In other words, it’s a comprehensive app Software Development Kit (SDK), complete with widgets and tools.

What’s Flutter for?

Flutter enables cross-platform app development.

It gives developers an easy way to build and deploy visually attractive, natively-compiled applications for mobile (iOS, Android), web, and desktop – all using a single codebase (source: official Flutter website).

Please note

Flutter’s desktop support

  • When it comes to developing desktop apps with Flutter, you can compile Flutter source code to a native Windows, macOS, or Linux desktop app.
  • Flutter’s desktop support also extends to plugins — developers can install existing plugins that support the macOS, Windows, or Linux platforms, or they can create their own.
  • Please note: Flutter’s desktop support is available as a beta release. So, it still has feature gaps. However, developers can try a beta snapshot of desktop support on the stable channel or can keep up with the latest changes to the desktop on the beta channel.

Flutter for Web

Flutter’s web support delivers the same experiences on the web as on mobile. It means you can now build applications for Android, iOS, and the browser from the same codebase.

As we can read on the official Flutter website, Flutter’s web support is most useful in the following scenarios:

  • Progressive Web Apps (PWA) built with Flutter
    Flutter delivers high-quality PWAs that are integrated with a user’s environment, including installation, offline support, and tailored UX.
  • Single Page Applications (SPA)
    SPAs load once and transmit data to and from internet services.
  • Existing mobile applications
    Web support for Flutter provides a browser-based delivery model for existing Flutter mobile apps.

A little more about Flutter…

  • It’s free and open source
  • It’s based on Dart – a fast, object-oriented programming language (Dart is now in its 2.14 version). It’s relatively new and is easy to learn – especially for experienced developers more familiar with Java and C#. What’s more, Dart supports sound null safety.
  • The architecture is based on the very popular reactive programming (it follows the same style as React)
  • It provides its own widgets, drawn from its own high-performance rendering engine – these are fast, attractive and customizable
  • Thanks to the widget experience, Flutter apps have a great look and feel (while you can still create your own custom app design using readily-available UI elements that follow specific platform guidelines)

Who created Flutter?

A team at Google built Flutter.

But as an open-source project, both Google and the Flutter community contribute to its development.

How mature is Flutter?

A brief history of Flutter:

  • February 2018, Mobile World Congress – First beta release of Flutter
  • April 2018, Google I/O – Flutter beta 2 release
  • May 2018, Google I/O – Flutter beta 3 release
    • Flutter joins GitHub’s top 100 repos
  • June 2018 – Flutter Preview 1 release
  • September 2018 – Flutter Preview 2 release
  • November 2018 — Dart 2.1 release
  • December 2018, Google I/O – Flutter 1.0 release
    • A crucial milestone for the technology – since Dec. 2018, Flutter has been considered as stable and ready for production
  • February 2019, Mobile World Congress – Flutter 1.2 release
  • May 2019, Mobile World Congress:
  • July 2019, Flutter 1.7 release
  • September 2019, Flutter 1.9 release
  • Flutter has been regularly developed and Google has been releasing its newer versions. Its newest version is 2.2.0 and this was announced during Google I / O in May 2021. See what’s new in Flutter 2.2.0 and why it’s awesome!

As you can see, Google shifted from the Flutter beta version to the final stages of stabilization for Flutter 1.0 at a rapid pace.

Better still, since the release of Flutter 1.0, the team hasn’t rested on its laurels. It has actively worked on making the toolkit stronger and more resilient – prioritizing enhanced stability, performance, and quality.

Moreover, Flutter 2.0.0 includes hundreds of changes in response to developer feedback.

Flutter has 188 active pull requests on GitHub (May 2021), which shows that the developer community uses it and continues to contribute to its improvement.

In summary, Flutter remains a fledgling technology.

Yet, given the pace of Flutter’s improvements – and its explosive popularity – we can say with confidence that it’s impressively stable and mature for its age.

What popular apps are made with Flutter?

For more examples of top Flutter apps, read this article > Top Apps Made with Flutter – 17 Stories by Developers and Business Owners


What is React Native?

React Native is an open-source mobile application framework that uses JavaScript.

What is React Native for?

React Native is an effective framework for:

  • Cross-platform development
  • Building mobile apps using JavaScript language
  • Developing applications for both Android and iOS using a single codebase
  • Using the same design as React

* Please note:

  • Apps created using React Native are not mobile web apps. React Native uses the same fundamental UI building blocks as regular iOS and Android apps: this means that instead of building in Java, Kotlin, or Swift – you’re putting the same building blocks together, using JavaScript and React (source).
  • React Native uses components that are analogous to widgets in Flutter.

To develop web and desktop applications with React Native, it’s best to use external libraries (as detailed in this paragraph).

Read also: What is React Native and How is it Used? Introduction for App Owners.

Who created React Native?

Facebook created React Native.

How mature is React Native?

A brief history of React Native:

  • Summer 2013, Facebook hackathon – React Native started as an internal Facebook project
  • January 2015, React.js Conference – React Native 1 Preview release
  • March 2015, F8 Conference – Official Launch of React Native
    • Facebook declares React Native, ‘open for use and available on Github’

Looking at the above, two things are for certain: React Native is older than Flutter, and it boasts a bigger community. Not to mention the fact that the Facebook team has had plenty of time to stabilize the API as well as focus on fixing any underlying issues.

And let’s not forget – Facebook is working on several other notable enhancements as well:

  • Lean Core – reducing an app’s size by moving optional components/features to separate repositories (to add to an app as/when needed)
  • TurboModules – for improved handling of native modules
  • React Native Fabric – re-architected UI layer

What popular apps are made with React Native?

Flutter vs React Native 2019

Instagram
(iOS, Android)

Flutter vs React Native 2019

Facebook
(iOS, Android)

Top apps made with React Native

Fb Ads Manager (iOS, Android)

Top apps made with React Native

Pinterest
(iOS, Android)

Flutter vs React Native 2019

Skype
(iOS, Android)

Flutter vs React Native 2019

Tesla
(iOS, Android)

Top apps made with React native

Bloomberg
(iOS, Android)

Flutter vs React Native 2019

Wix.com
(iOS · Android)

… as well as plenty more.

If you’d like to see other examples of apps made with React Native, check out the official React Native showcase.


Flutter – pros and cons

In this section, we briefly discuss the key pros and cons of Flutter.

If you want to read more, check out this article dedicated to the Pros and Cons of Flutter for App Owners.

✅ PROS of Flutter:

1. Hot Reload = fast coding

From a developer standpoint, Flutter offers more dynamic – and faster – app development. It is one of the greatest things about Flutter, appreciated by every top mobile app development company.

Developers can make changes to the codebase on-the-fly, and see them immediately reflected in the application. This is the so-called Hot reload feature, and it typically takes (milli-)seconds for changes to show.

The feature helps teams add features, fix bugs, and experiment with new ideas in an instant. Plus, Hot Reload is very handy when it comes to developer-designer collaboration.

That said – for a list of updates that require a full restart, see Hot Reload limitations.

2. One codebase, 2 mobile platforms (and more!)

With Flutter, developers can write just one codebase for two applications – covering both iOS and Android platforms.

Flutter is platform-agnostic as it has its own widgets and designs, which means you can have the exact same app on two platforms (while if you want to differentiate your apps that’s just as easily achieved).

Google is currently working on Flutter for Web, which you can see as a preview version. Once this goes live, a single codebase will cover Android, iOS, and web platforms.

3. Up to 50% less testing

Given you have the same application on both platforms, your Quality Assurance process will be much faster as you can test less.

We write roughly 50% fewer automated tests because we can create the same tests to run on both platforms, reducing the demands on our QA team.

That said, you’ll still have to run manual testing at a similar level as with native programming – as your QA specialists will have to check both apps on each platform, by hand.

4. Faster apps

Flutter apps perform smoothly and fast – without ever hanging or cutting while scrolling. Why?

Flutter uses the Skia Graphics Library. Thanks to this, the UI is redrawn each time when a view changes.

Most of the work is done on GPU (graphics processing unit); that’s why Flutter UI is smooth and delivers 60fps (frames per second).

However, you must be careful during the development so as not to cause redrawing of those elements of the view whose data has not changed.

Redrawing the whole view instead of just those elements that change, can affect the performance and speed of the application, especially if you need to reload the view often, e.g. in a stopwatch application.

5.  Designs your users will love

Flutter doesn’t rely on native system components. Rather, Flutter has its own set of custom widgets, rendered and managed by the framework’s graphics engine (source). Users will see different UI components from typical native apps, but that isn’t necessarily a disadvantage.

Flutter apps have a particularly user-friendly UI: a crucial advantage for Flutter over React Native, stemming from super-attentiveness to the visual details. Flutter was created so that you could easily create your own widgets, or simply customize an existing widget.

Feel free to browse a catalog of Flutter widgets; or, click the links to see examples of Material Design widgets and Cupertino widgets.

6. Same app UI, even on older devices

Even new apps look the same on older iOS or Android systems, so you never have to worry about supporting older devices.

Why Flutter

Android 5.1.1

Why Flutter

Android 8.1.0

7. Perfect for MVPs

If you need to build an MVP (Minimum Viable Product) for your app – say, as a showcase for potential investors – Flutter is the perfect option, especially if time is short. Read also:

Check out the Flutter Gallery app, which includes a demo of Flutter’s core features, widgets, and vignettes.

Flutter Gallery

Flutter Gallery

Flutter Gallery

Flutter Gallery

Flutter Gallery Screen

Flutter Gallery

🔻 CONS of Flutter:

1. Size of the developer community(??)

Most people will tell you: a key advantage for React Native over Flutter is its more established, more experienced developer community. Further, in terms of programming languages, Dart isn’t as widely used as JavaScript, at least for now.

In truth, Flutter has a lot of catching up to do if it’s to match its ‘older brother’ – which is understandable. The community needs time to educate its audience and to gain more experience, which is typical for any new, young tool.

However, we don’t see it as a significant disadvantage, and that’s why we added the (??) in the header. It’s also worth noting that the Flutter community is growing exponentially. Plus, there’s phenomenal excitement around the toolkit.

Please note:

There are also 75 Dart courses (with about 608,000-course participants (May 2021))

React Native numbers are lower – about 866,000 students across 133 courses

  • Flutter has 120,000+ stars on Github while React Native has 95,300+

To sum up, two years ago, Flutter had a smaller, less experienced community, and Dart is more niche than JavaScript.

Now, things are turning around. Current trends indicate that Flutter is outperforming its competitor in this area.

2. Libraries & support – impressive, but still not as rich as native development

Google’s support for Flutter is impressive, but Flutter is still quite new. This means you can’t always find the functionality you need in existing libraries, so your developers might need to build custom functionality themselves, which takes time.

Read more about this disadvantage here >>

3. Continuous Integration support

At the time of writing, Flutter lacks support for CI platforms like Travis or Jenkins. So, to achieve automatic building, testing, and deployment, your developers need to use and maintain custom scripts like this one.

That said, it is worth to note that:

  • There is a new CI/CD system for Flutter apps – Codemagic – that was announced at Flutter Live 2018
  • In January 2019, Bitrise announced the full-featured Flutter CI. At Droids On Roids we use Bitrise to build Flutter apps and it works so easily as in native app development.

4. Platform risk

Even though Flutter is open source, if Google decided to pull support for the project, it would spell disaster.

That said since the Google team released the Beta version of Flutter, it has only ramped up its efforts, as illustrated by Flutter’s prominent role during Google IO ’19, alongside the recent Flutter Live event.

At the current point in time, we cannot imagine a world where Google walks away from Flutter.

5. App’s size

Applications written in Flutter are bigger than native ones. Check out the article Comparing APK sizes. However, the Flutter team is working on reducing the size of apps made with Flutter.

React Native – pros and cons

✅ PROS of React Native:

1. Hot Reload = fast coding Fast refresh = fast coding

Essentially the same feature as Flutter.

Hot Reload speeds up the development process by allowing a developer to inject new code directly into a running app. So, a developer can see changes instantly, without rebuilding the app.

Hot Reload also retains the application’s state, avoiding the risk of losing it during a full reload (a critical benefit in the context of state-based frameworks) – speeding up the mobile app development process even further.

To improve the developer experience with hot reloading, the React Native team includes in 0.61 version a new feature called fast refresh that unifies live and hot reloading. It’s more resilient to typos and mistakes compared to the previous version. You can read more about fast refresh here.

2. One codebase, 2 mobile platforms (and more!)

Exactly the same as Flutter: write a single codebase to power 2 apps – covering both Android and iOS platforms.

Better still, JavaScript gives you a leg up when writing cross-platform applications by sharing code with web apps. This is accomplished by creating abstraction components that you can compile to target platforms.

See below for example libraries that allow you to simultaneously create code on platforms other than iOS and Android (including web and desktop apps):

  • React Native for Web – supports Android, iOS, and web (Twitter used this to create Twitter Lite)
  • ReactXp – developed by the Skype Team to support Android, iOS, and web; plus, works on Windows 10 (UWP)
  • react-native-windows – developed by the Microsoft team, supports all the devices supported by Windows 10 ( PCs, tablets, 2-in-1s, Xbox, Mixed reality devices, etc.)

Side Note:

Bartosz (our React Native developer) sees things a little differently to most, and so prefers an alternative approach.

If you compare a web desktop app, a mobile web app, and a native app, you can assume they share the same business logic – but they likely need a specific UI that fits distinct user requirements.

So, why not:

  1. Extract shared code to a separate repository;
  2. Treat it as a separate project;
  3. Inject the code in the same way as any other dependency?

Working this way allows developers to focus on writing apps to an actual platform – without having to consider cross-platform compatibility.

Watch Ben Ellerby’s presentation about the approach and if you like idea of creating abstraction over platform, check out Radek Pietruszewski’s presentation as well. 

3. It uses a wildly popular language – JavaScript

React Native uses JavaScript: a programming language that many developers know well (whereas Dart is still not so widely known or used). And if you’re a developer who prefers statically-typed programming languages, you can even use TypeScript – a JavaScript subset.

4. Developer freedom of choice

React Native lets developers build cross-platform apps; no more, no less.

The advantage is that React Native allows the developer to decide precisely what solutions they want to use; both according to the project’s requirements as much as the developer’s preferences.

Say, if a developer needs to decide how to handle the global state (how to store and manage the data that’s used in many components in the app), choose a router library, or choose between JavaScript and TypeScript – they can decide if they’d prefer to use a custom UI library, or write their own.

5. Relative maturity

The official React Native release was more than 5 years ago, so the Facebook team have had plenty of time to stabilize the API, as well as focus on fixing issues and solving problems.

Now, they’re working on a few exciting improvements – like reducing app size.

6. An active – and vast – community

React Native has a massive developer community. Not just that, but there are countless tutorials, libraries, and UI frameworks that make it easy to learn the technology – as well as quick and easy to develop with it.

And if you compare repositories focused on gathering articles, tools, and materials about specific technologies, React Native is much better placed than Xamarin, Flutter or Ionic (source: Awesome-Flutter, Awesome-ReactNative, Awesome-Ionic, Awesome-Xamarin).

What is more, React Native is part of the “React family”. While many of its libraries are platform agnostic (like Formik, React Router, styled components), which means they work across both web and mobile.

  • It’s also worth calling Expo to your attention – the React constitutional framework that simplifies access to native APIs – which has ready-made solutions for typical mobile features (e.g., push notifications).
  • A second library worth mentioning is AWS Amplify: a solution that simplifies integration with AWS features by covering authentication, storage, push notifications, and analytics.

7. Easy to learn for React developers

This advantage in our list is highly targeted at React developers. If you have a background in web development and already use popular React solutions, you can easily get to work with React Native, without having to learn new libraries. You can use the same libraries, tools, and patterns.

8. Up to 50% less testing

We write roughly 50% fewer automated tests because we can create the same tests to run on both platforms, reducing the demands on our QA team. It looks the same as in Flutter app development – we described it here.

🔻 CONS of React Native

1. It isn’t really Native

Like any cross-platform solution, neither the UI experience nor performance will be the same as in native apps – just close to them.

But still, it is easier to achieve a “native feeling” with React Native than with Flutter. If you want your Flutter app to have native components, it will require additional work.

2. Fewer components out of box

React Native supports only basic components out of box (many of them are adaptive to a platform out of box, like button, loading indicator, or slider).

As we said in this paragraph, there are outside repos with many additional components for React Native. A developer can use them in a project but that requires additional effort and time.

On the other hand, Flutter is designed to support Material Design out of box, so the framework supports much more widgets. It saves time. A developer using Flutter can create most of the views with pre-made widgets which are easily customizable and cross-platform consistent.

3. Developer freedom of choice

…both a curse and a blessing.

Once a developer has created a new project, they then need to decide which navigation package – as well as which global state management – to use.

It can take a lot of time to understand the nuances of every solution, and ultimately, to decide upon the best ones to use for the project.

4. Lots of abandoned packages

React Native boasts an enormous number of libraries. Unfortunately, too many of them are either low quality; or have been abandoned altogether.

Dan Abramov advises checking the number of issues and frequency of commits in a repository to prevent using abandoned packages.

Read more about the problems and limitations of the current shape of React Native in this summary of his discussion of “What do you dislike about React Native?”

5. Fragile UI

The fact that React Native uses native components under the hood should give you confidence that, after every OS UI update, your app components will be instantly upgraded, as well.

That said – this can break the app’s UI but it happens very rarely.

What’s worse, updates can become even more dangerous if they cause certain changes in the Native Components API. The good news? This kind of event happens very rarely.

Whereas when it comes to Flutter (thanks to the way the framework recreates native components on their own), the app UI is a lot more stable.

6. Apps are bigger than native ones

Applications written in React Native must be able to run Javascript code (JavaScript Virtual Machine). Android doesn’t have this functionality by default – meaning applications need to include a library that supports JavaScript code, resulting in apps that are bigger than their native Android counterparts.

iOS apps made with React Native don’t this problem, but they are still usually bigger than native ones. The good news? As we mentioned before, React Native team is working on reducing their apps’ size.

Read more about the Pros and Cons of React Native Development for App Owners in 2021.


Predicting the future: Flutter & React Native

More and more companies are attracted by Flutter. After all, we’re witnessing monthly improvements in the Flutter SDK as Google continues to refine its tool. Plus, the community is always helpful and enthusiastic. What’s more, Flutter enables us to create not only mobile applications but also apps for the web and desktop (Flutter’s desktop support is available as a beta release on the stable channel).

Putting it all together – and given leading companies like Alibaba are already using Flutter – the future looks promising for the toolkit.

As for React Native – well, Facebook is currently focusing on a large-scale re-architecture of the technology.

The team is doing its level best to improve support for both React Native users and the wider community. And thanks to this, the community can now easily suggest changes to the framework’s core functionalities through an RFC process that uses a dedicated GitHub repo.

The actual results of such architecture improvements are:

  •  Hermes  – an open-source JavaScript engine optimized for mobile apps that improves time to interaction, and lowers app size and memory utilization
  • Big changes in the 0.60 version (find the full summary here):
    • it’s easier to manage iOS dependency by using the most popular dependency manager CocoaPods by default,
    • you can migrate React Native to AndroidX,
    • you can extract optional features as part of lean core process.

Creating an open environment to discuss React Native is a significant step. It’s both a sign of ongoing improvement as well as a signal for the technology’s bright future.

Given React Native has such a stable position in the marketplace – and is on a trajectory of continuous development – it’s unlikely we’ll see the toolkit left in the dust any time soon. Read about the long-term vision for React Native in this article.

Still, Flutter is an imposing competitor to React Native.

Read also: Outsourcing Software Development – Benefits & Risks for App Owners

React Native or Flutter? 3 insights from developers & app owners.

We recently wrote an ebook covering the best Flutter app examples – including key insights from 17 different app owners and developers who are actively working with the Flutter framework.

Below, you’ll find a selection of quotes that cover the Flutter vs. React Native debate.

Abin Baby
Co-founder and Developer at KlasterMe
  • For me, Flutter was harder to learn than React Native. Mainly because React Native uses JavaScript (which is a familiar language for me) whereas I was new to Dart – the language used by Flutter. So, if you are new to Dart and trying to learn Flutter, it will take more time than learning React Native. But the opposite is also true – if you have experience in Dart, then learning Flutter will be a walk in a park.
  • The components in React Native are pretty basic, so if you need anything extra, considerable effort is required when styling. Only a handful of components are adaptive to the platform, while most of the time you have to use a different component for both iOS and Android; or, style it differently.
    On the other hand, with Flutter, everything is a widget. And the widgets are based on Material Design, making them easily customizable. Most of the widgets are adaptive, and you can use the same widget across both Android and iOS.
  • When it comes to performance, Flutter has the upper hand as it’s compiled to ARM or x86 native libraries, which makes it really fast. React Native isn’t compiled to native code, and it still has the JavaScript layer, making it less performant than Flutter.

Ishaan Bahal
Co-founder at Meeve

React Native is the closest competitor to Flutter. I like it as it sets the standard for cross-platform native development.

That said, our experience with it has surfaced a few issues.

  1. React Native is just a wrapper over native methods, so it requires a bridge to translate those calls into a native API; this becomes a bottleneck when you have a lot of native calls happening. There are ways around this, but with Flutter, you don’t ever have to worry about the issue as the view layer is rendered like a game would be – and as all components are designed by Flutter engineers, there are fewer native calls to the bridge.
  2. React Native components aren’t always customisable enough as they are just wrappers over native views. So, say someone decided not to wrap a certain method, then you won’t have access to it (for instance, dashed borders around a view don’t work) – while new components released by Google and Apple can take a long time to become available on React Native.
  3. Bugs on React Native have also started to take a lot longer to get fixed. The dashed border issue, for one; as well as a separate issue supporting various build flavours etc. Most companies running React Native in production, run a custom fork to fix bugs that aren’t fixed upstream. The Flutter devs are more proactive, and you can expect fixes fast. We ended up spending most of our time looking for issues in React Native documentation, then figuring out why things weren’t working the way they should.

The issues we found sent us searching for something better – fortunately, Flutter was just around the corner.

Swav Kulinski
Lead Engineer at The App Business

The main benefit of Flutter over React Native (and native, in general) is the lack of platform constraints. Flutter isn’t muzzled by the platform UI because it doesn’t use it; it renders everything by itself. This frees you to build the best UX without compromise – and it’s the primary difference between Flutter and React Native. Read more here >>


Summary

When to choose React Native, and when to choose Flutter

Delivering projects on time is one of the most critical aspects of mobile and web app development.

The cross-platform nature of both React Native and Flutter reduce time-to-market. Plus, their third-party libraries and ready-to-use components make it more efficient to use them to build your app.

Better still, Flutter and React Native offer more than just speedy development, they can reduce project costs as well.

…and these are the key reasons you should consider either framework for your project. But which solution offers the fastest development time? Or fits your app idea best?

Well, that depends on the specifics of your project and the balance of your team’s skills.

  • Do your developers know Dart? If yes, then programming with Flutter will be a walk in the park.
  • Are your developers fluent in JavaScript? If yes, then React Native seems the logical choice.
  • Do you want to build your app’s GUI using native UI components? If yes, choose React Native.
  • Is brand-first design your priority? If yes, we suggest Flutter fits the bill.

Remember that each application is different, so you must consider each one on its own merits. It’s always worth discussing your project with an experienced team of developers: people capable of considering the different approaches, with a varied enough skillset when it comes to cross-platform development – as if you seek the advice of programmers who know just one framework, they’ll likely steer you to use that tool.

If nothing else, take confidence from this: both Flutter and React Native are very good technologies. They benefit from huge popularity and enduring trust.

Read also: 5 Legal Issues to consider in Mobile App Development.

Each of the frameworks can help your application spread its wings and fly. We’ll keep our fingers crossed for you – best of luck with your next steps!

Useful links & resources

The post Flutter vs. React Native – What to Choose in 2021? appeared first on Droids On Roids.

]]>
https://www.thedroidsonroids.com/blog/flutter-vs-react-native-what-to-choose-in-2021/feed 8
Flutter Pros & Cons for Mobile App Owners https://www.thedroidsonroids.com/blog/flutter-in-mobile-app-development-pros-and-cons-for-app-owners https://www.thedroidsonroids.com/blog/flutter-in-mobile-app-development-pros-and-cons-for-app-owners#disqus_thread Wed, 20 Jan 2021 08:00:56 +0000 https://www.thedroidsonroids.com/?p=9675 What is Flutter? How can it make your app outstanding and beautiful? What are the pros and cons of Flutter? Is it a good idea for every mobile app development project?

The post Flutter Pros & Cons for Mobile App Owners appeared first on Droids On Roids.

]]>
Google I/O 2019 dedicated a lot of attention to Flutter and announced an almost overwhelming amount of news about this technology. Just to name a few:

Tim Sneath, Product Manager of Flutter made an aggregation of all the big news announced for Flutter in I/O 19: A roundup of Flutter news at Google I/O.

At the same time, the rate at which Flutter apps are published on Google Play continues to increase. Flutter is becoming a hot topic and, whether you decide to use it or not, if you want to develop or improve your mobile app, you should be aware of what Flutter is, as well as what pros & risks it carries. Let’s start with the basics.

See what’s new in Flutter 2.2.0 announced while Google I/O 2021!

What is Flutter?

Flutter is Google’s mobile app SDK, complete with a framework, widgets, and tools, that gives developers an easy way to build and deploy visually attractive, fast mobile apps on both Android and iOS platforms (official Flutter website).

Flutter enables a smooth and easy cross-platform mobile app development. You don’t need to develop an iOS and Android app separately. All you need is one codebase for both platforms.

What’s more, Flutter:

  • Is free and open source,
  • Is based on Dart – a fast, object-oriented programming language which is in itself easy to learn,
  • Provide its own widgets, drawn with its own high-performance rendering engine. They are fast, pretty, and customizable,
  • Thanks to the rich widgets, Flutter apps look and feel great (you can create your own custom app design, but also use readily available UI elements following specific platforms’ guidelines). Check out the article about Top Apps Made with Flutter
  • The architecture of Flutter is based on the very popular reactive programming of today (the same that React has been made from)
  • It’s becoming a serious competitor to React Native, but also to native app development. Read the articles: Flutter vs React Native – what to choose in 2021? and React Native Pros and Cons.

Let’s go to the pros & cons of Flutter!

Why Flutter in Mobile App Development


Why Flutter? 7 top advantages for mobile app owners

From the perspective of an app owner, the crucial advantages are as follows: Flutter speeds up the mobile app development process, reduces the app development cost, and helps your team to build a beautiful app UI with smooth animations. Let’s take a look at it more deeply. We have prepared the below lists for you with Paulina Szklarska and Karol Wrótniak – our Android Developers who work with Flutter.

1. Faster code writing

For developers, Flutter means faster & more dynamic mobile app development. We can make changes in the code and see them straight away in the app! This is the so-called Hot reload, which usually only takes (milli)seconds and helps teams add features, fix bugs, and experiment faster. It is one of the things about Flutter loved by every top Flutter app development team

Hot reload is also very comfortable in developer-designer cooperation when we want to improve or experiment with an app’s look and check the effects on the spot. In other words, with Flutter, your designer or tester can work together with a developer on the UI, making changes – for example, “Put it 2 pixels right” or “Make the animation faster” – and see them immediately. 

Why Flutter

Most types of code changes can be hot reloaded. But there is a list of changes that require a full restart: Hot reload Limitations.

Whereas, in the case of native app development the project needs to be rebuilt and that takes much more time. You have to wait for every single change – sometimes, even up to several minutes.  

2. One code for 2 platforms

Developers write just one codebase for your 2 apps – covering both Android and iOS platforms. Flutter doesn’t depend on the platform, because it has its own widgets and designs. This means that you have the same app on two platforms. Yet what’s important is that, if you want to differentiate your apps – it’s possible.

3. Less testing

If you have the same app for 2 platforms, it means less testing! The Quality Assurance process can be faster. Because of one codebase, the developers write automatic tests only once. What’s more, Quality Assurance specialists have less work to do, because they have only one app to check. Of course, if your apps have some differences, they need to be tested on both platforms.

4. Faster apps

Flutter apps work in a smooth and fast way, without hanging and cutting while scrolling. If you want to understand why and how it works from a technical point of view, read this article. Also, check out this amazing page in the Flutter documentation that talks about best practices for app performance.

5.  Designs which your users will love

Flutter is designed to make it easy to create your own widgets or customize the existing widgets. Here you can browse a catalog of Flutter’s widgets and view, for example, Material Design widgets and Cupertino widgets.

6. The same app UI on older devices

Your new app will look the same, even on old versions of Android and iOS systems. There are no additional costs for supporting older devices. Flutter runs on Android Jelly Bean or newer, as well as iOS 8 or newer.

Why Flutter

Android 5.1.1

Why Flutter

Android 8.1.0

7. Perfect for MVP

Do you need an MVP (Minimum Viable Product) for your app to show it to your investors? Flutter will be perfect, especially if you have little time.

If you want to see some apps built with Flutter, check out the Flutter Gallery app, which is a demo of some of Flutter’s features, widgets, and vignettes.

Flutter Gallery

Flutter Gallery

Flutter Gallery

Flutter Gallery

Flutter Gallery Screen

Flutter Gallery


Does Flutter have any cons? 3 risks for mobile App Owners

1. Flutter is still in beta

In April 2018, Flutter beta 2 has been announced. The Flutter team hasn’t released the stable version yet. “Our APIs are stabilizing, and we continue to improve parts of the system based on user feedback. Some key features are not yet ready for broad deployment” – we read on the official Flutter website.

So this means that we can expect changes and improvements that can demand future changes in our code if we ship an app before the stable version of Flutter is ready.

Edited: Flutter is no longer in beta

On May 2019, Google announced the availability of the new stable build, Flutter 1.7.

2. Libraries & support – impressive, but still not so rich as for the native development

Google support for Flutter is impressive, and there are many helpful libraries with functionalities ready to be implemented. But Flutter is still new and not every functionality which you need can be found in these libraries. This means that your developers would need to build them by themselves, which can be very time-consuming.

Here you can find Flutter Packages – a list of features ready to be added to your app. What’s important is that these packages are checked, analyzed and rated for factors like health, popularity, and maintenance.

However, we can expect see that the support for Flutter is improving at a rapid pace. What’s more, the Flutter team is actively involved in supporting Flutter users by frequent solving and answering requested issues.

3. Continuous Integration support

Since Flutter is still in beta, For now, Flutter is not widely supported by CI platforms like Travis or Jenkins. So, to achieve automatic building, testing, and deployment, your development team needs to use and maintain custom scripts like this one. However, Bitrise.io is the exception where you can find a ready to use build step.

Edited:

  • There is a new CI/CD system for Flutter applications called Codemagic that was announced at Flutter Live 2018.
  • In January 2019, Bitrise announced the full-featured Flutter CI.
  • Worth to mention: one of our team members, Karol, is continuously working on Flutters build step for Bitrise. The last release added the possibility to build appbundle for Android releases (read more about it here).

Is Flutter a good idea for every kind of mobile app?

There are a few cases when it’ s worth to consider if Flutter will be a proper solution:

  • Progressive Web Apps & Instant Apps
    They need to be small and Flutter apps – even optimized – are bigger than native ones. The overhead varies from just a few to 20 megabytes, depending on whether it is a release or development build. Note that Google allows apps of max. 10MB.
  • Apps which communicate with any hardware via Bluetooth
    If you want to develop an app with this kind of features and use Flutter, you can:

      • Develop these features separately for iOS and for Android and then add them to the main Flutter app using platform channels. In this case, it’s hard to say if it will save you time more than if you would develop two 100% native applications.
      • Develop these features for both platforms at the same time, using an existing Bluetooth plugin for Flutter – e.g.– FlutterBlue.

    Which option is better? Hard to say.

    As we can see on FlutterBlue repository on Github (06.12.2019), there are more than 200 opened issues and 36 pending Pull Requests. These numbers suggest that this library might require more maintenance and development.

    In the case of technologies such as Flutter, which are improving rapidly, frequent plugin’s updates are essential – and it has been updated very recently.

    How essential is it? We do not know, because the technology is still too young, but in the case of iOS apps, if a library is not maintained for six months (it’s a lot of time), we keep away from it, and the plugin for Flutter is basically a library for Android and iOS implementing the same features.

    Last, but not least – if your app needs an advanced Bluetooth feature, FlutterBlue might be not enough.

    In our opinion, FlutterBlue might not be mature enough to be used in a commercial product, but we see promising potential in it.

    For now, a less risky option would be choosing native development for apps that communicate with any hardware via BLE – especially if you will need some advanced BLE functionalities.

  • Apps demanding rare, little-known native libraries
    If in your app development, you expect to use any specific and rare native libraries and they are not already in Flutter’s repository, it can still be possible but it will be complicated. Developers would have to implement the custom platform channels by themselves – separately for both Android and iOS. This is what can take time.

Wrap up & our recommendation

In our opinion, Flutter has many more advantages for business and development teams than risks. It’s a great chance to build beautiful, high-performance, and outstanding mobile apps that fit your custom needs and requirements. It’s worth considering Flutter, especially if you want an app both for iOS and Android.

What’s more, it can save you time & money. The major risk comes from the fact that Flutter is still improving and is not 100% completed. So, if you want to use Flutter, consider if you want to wait for the stable version release. It’s hard to say when this will be ready. Hopefully, it’s only a matter of months. Flutter 1.17 is already available, so it is worth at least to give it a try! 

Why Flutter

We also asked our friend – Tomek Polański – for his opinion about Flutter. Tomek is a Senior Android Developer at Groupon and, at the TOAST – Android Developer Meetup #17,  he gave a presentation: “I convinced Groupon to Flutter. Do the same with your company”. Here’s what he said:

Flutter is perfect for creating a customized application experience. Time and time again it has been shown that award-winning applications (MWC’s Glomo AwardsTIME’s Best Apps of the Year and the Webby Awards Mobile Apps) focus on delivering beautiful custom experiences rather than the pixel perfect native iOS/Android look – and Flutter delivers on this.

On one hand, you have the ability to create a simple UI rapidly and, on the other, Flutter is a powerful tool to create beautiful custom applications thanks to its extensibility. The thing that I’ve found positively surprising is that we have communicated that developing applications in Flutter is much faster than native, product people were still astonished that’s true in practice.

Tomasz Polański
Senior Android Developer at Groupon

We wish you good luck with Flutter! If you already have tried it out, share your impressions and leave a comment 🙂

Useful links about Flutter

The post Flutter Pros & Cons for Mobile App Owners appeared first on Droids On Roids.

]]>
https://www.thedroidsonroids.com/blog/flutter-in-mobile-app-development-pros-and-cons-for-app-owners/feed 4
Internationalizing and Localizing a Flutter App | How to Develop an App with Flutter – Part 7 https://www.thedroidsonroids.com/blog/development/flutter-app-localization-and-internationalization https://www.thedroidsonroids.com/blog/development/flutter-app-localization-and-internationalization#disqus_thread Wed, 16 Dec 2020 16:22:07 +0000 https://www.thedroidsonroids.com/?p=32840 Learn how to develop your first app with Flutter. This time, we will make our app multilingual.

The post Internationalizing and Localizing a Flutter App | How to Develop an App with Flutter – Part 7 appeared first on Droids On Roids.

]]>
Are you interested in internationalizing and localizing your Flutter app? If yes, you’re in the right place. In this article, we will make our Smoge app multilingual. More precisely, we will explain how to easily localize and internationalize your Flutter app, making it accessible to users in different locales.

Want to build an app with Flutter? Follow our series “Flutter app development tutorial for beginners”. We’ve published the following posts so far:

  1. Introduction to your first Flutter app development 
  2. Flutter Project Setup
  3. Creating a Home Screen
  4. Styling the Home Screen
  5. Networking and connecting to API
  6. Refining Widgets’ Layer with Provider
  7. Internationalizing and Localizing your Flutter App – you are reading this

What’s more, we’ve also prepared a Roadmap that can be useful in your Flutter development journey:

This article consists of the following sections:

Let’s define a few important words.

What does internationalizing and localizing a Flutter app mean?

  • Internationalization (aka i18n) is a necessary setup and process for app localization. It is mostly done by developers.
  • Localization (aka l10n) means adding support of multiple locales to the application. This work is mostly done by translators (which may not necessarily be developers).
  • Locale (no fancy abbreviation like l4e 😉 ) is a descriptor of a specific region (political, cultural, or geographical). In Flutter (more precisely in Dart) it consists of 3 ingredients:
    • language (mandatory), eg. English, Polish or Serbian.
    • region (optional; in API it is called country code), eg. Australia, USA, or Hong Kong.
    • script (optional), eg. Latin or Cyrillic.

Numbers in fancy abbreviations represent the number of omitted letters. Apart from i18n and l10n, you may also encounter a11y (accessibility) in related contexts.

Localization mechanism – Flutter vs native platforms

Flutter does not have its own localization mechanism similar to native platforms (iOS, Android). In short: in native projects, you can just define the key-value pairs for each supported locale, where key acts as a unique identifier (like settingsScreenName) used later in a source code and value is an actual translation (eg. Settings for English or Rendszer for Hungarian). Read more in the official documentation for Android and iOS respectively.

On the other hand, Flutter does not have such mechanisms available out of the box. Flutter CLI supports Dart’s intl package which can help in app localization. However, it is not so easy to use as built-in support on native platforms.

Flutter app internationalization

The most important requirement is to separate potentially translatable texts from the source code. In other words: translatable texts must not be hardcoded, so instead of code like this:
Text('Measuring points')
You have to use something like this:
Text(Strings.of(context).measuringPoints)

The exact form depends on the chosen internationalization technique. This one is from intl_utils (which will be described in the next paragraphs).

Many internationalization frameworks for Flutter including the built-in intl package use the ARB (Application Resource Bundle) file format based on JSON. More information about ARB can be found in the specification.

It is important to follow this approach since the beginning of the project. The later massive transformation of hardcoded text into translatable resources is almost always more error-prone and time-consuming. Sometimes, further changes require even code refactor. This may happen especially if texts contain placeholders and/or plurals.

In the next few paragraphs, I describe the common aspects related to internationalization. Not everything occurs in every app nor it’s a completely exhaustive list. However, it should cover most of the cases which can be encountered during app development.

Design

Let’s assume that the app displays an English text: Always allow Wi-Fi Roam Scans and it looks very well. So let’s translate it into Polish. Now, the text will be Zawsze szukaj Wi-Fi w roamingu, but it may look bad. Keep in mind that translated text may be shorter or longer than English (or another default language of your app).

All the text fields have to be configured to handle that. Depending on the context, you may need to increase the number of displayed lines or enable various overflow like an ellipsis (three dots at the end). Please note that translation may contain dîąćŗĩţĭċš so it may also grow vertically.

Placeholders

Let’s say that we need a text like Gmail application is running. Where Gmail represents a variable value evaluated somehow by the business logic. One may think that such cases may be easily implemented like this:

Text('$appName ${Strings.of(context).runningLabel}')

So we take a variable, a hardcoded space character, and translatable text referred by key. Well, nothing can be further from the truth!

That text translated to other languages may use a different order of the words, for example in Polish it will be Aplikacja Gmail jest uruchomiona.

So it is important to treat the entire text as one translatable unit with placeholders instead of manual crafting in the code. The mentioned sample text can be expressed like this in ARB format:

  • English: "runningLabel" : "{appName} is running"
  • Polish: "runningLabel" : "Aplikacja {appName} jest uruchomiona"

And it may be used like this:
Text(Strings.of(context).runningLabel(appName)

Plurals

Let’s consider the following text: 3 songs found, where 3 is a dynamic value evaluated in the app logic. It seems to be analogous to the previous example. However, it isn’t… In the case of a single song, we have 1 song(not songs!) found.

Languages other than English may even have more plural forms eg. in Polish we have: Znaleziono 1 piosenkę, Znaleziono 2 piosenki and Znaleziono 5 piosenek respectively. In some cases (eg. in Arabic) there are even 6 plural forms!

Plural definition in ARB format looks like this:
{num, plural, one{A song found} other{{num} songs found}}

Note that although plural quantity names (like one or other in this example) are standardized, the number ranges they cover depends on the language. For example, in Polish one is used only for 1 while in Croatian it applies to every number ending with 1 except 11. You can find exact quantity mappings in the official Unicode CLDR documentation. Also, note that the number does not necessarily need to be additionally a placeholder (we don’t use num in one quantity).

Select

Similarly to numbers, we can parametrize texts by the argument of any type:
"weather": "{weather, select, sunny{The sun is shining} cloudy{There are clouds} rainy{Take an umbrella} other{No clue what the weather is}}"

The other case must be provided and it acts as a fallback for any undefined case passed from the code. Note that at the time of writing the documentation says that other cases may be omitted and an empty string is returned when there is no mapping found. See this issue for more information.

On the Dart source code side, the argument (weather in this case) is passed as an Object. Note that the cases should be unique. If there are duplicates the result depends on the used tool. The intl_utils for example takes the first one and raises a warning (not an error) so the building process does not fail.

Genders

Texts can also be parametrized by gender:
"invitation": "{sex, select, male{He invites you} female{She invites you} other{They invite you}}"

In fact, it is only a special case of the above-mentioned select feature. If (apart from other) there are only male and female cases then the text is treated as gender on the Flutter side (at least when using intl_utils to parse ARB).

Note that there are only 3 genders supported: male, female and other. In Dart source code, gender is passed by string, not by Object like in the aforementioned select feature, and it is the only difference in practice. Due to the fact gender is a select feature, the other case is also effectively mandatory. Even if your app logic supports only 2 genders, you have to provide 3 variants of gendered texts, also you can’t add more.

Let’s go to another aspect of internationalizing and localizing your Flutter app.

Numbers

In the source code we usually write numbers like this:
12345678901.2
However, on the UI they should appear formatted. The exact format depends on the context eg. we may want a compact format, 2, 3, or no decimal places, etc. Moreover, it depends on the locale as different languages use a variety of decimal and thousand separator combinations. What is more, a locale determines the usage of either long or a short scale.

The aforementioned number may be represented for example like this:

  • 12,345,678,901.2 – US English, decimal.
  • ١٢٬٣٤٥٬٦٧٨٬٩٠١٫٢ – Egypt Arabic decimal.
  • 12 345 678 901,2 – Polish, decimal, note that there are non-breaking spaces.
  • 1.2 trillion – US English, compact long.
  • 1,2 billion – Polish, compact long (note that Polish uses long scale).

There are also other kinds of formats like scientific or percent. You can find the complete list in the NumberFormat class documentation.

Currencies

Similarly to numbers, we can also use NumberFormat class to format currency values. Note that apart from the locale, it also depends on the currency, eg. Japan yen has no decimal digits while the Omani rial has 3 of them.

For example, the value 12,345,670,000 (in millionths of a currency unit as defined in MicroMoney class) may appear as:

  • 12 345,67 Kč – Czech koruna, simple format.
  • ١٢٬٣٤٥٫٦٧ EGP – Egyptian pound using Eastern Arabic numerals, regular format.

Note that (at the time of writing) there are 2 currencies in the world (Mauritanian ouguiya and Malagasy ariary) which units are divided into 5 subunits, not to 100 or 1000 like any other currency having subunits. However, in terms of programming (including Dart/Flutter), usually, only subunits which are powers of 10 are supported, so they are treated like having 100 subunits.

Warning: The floating-point types (like Dart’s double) should not be used for mathematics on currency types! It may lead to subtle errors eg. adding 0.1 (expressed as double) ten times gives 0.999… not 1.0.

The aforementionedMicroMoney class can only be used for number formatting. Flutter standard library does not contain a dedicated decimal or monetary type which can be used for mathematics. If you need to perform such calculations, you can do that on integral subunits (cents or millionths), or use some 3rd party library from the pub.

Dates and times

Similarly to numbers, the date formatting also depends on the locale. Unlike pure numbers, there are more kinds of differences between various data formats. For example, November 23th 2020 may be represented as among the others:

  • 11/23/2020 – US English, yMd format (year Month day).
  • 23.11.2020 – Polish, yMd.
  • 23 listopada – Polish, dd MMMM.
  • 23 November – English, dd MMMM.
  • 23 listopad – Polish, dd LLLL (L stands for a standalone month).
  • 23 November – English, dd LLLL.

Apart from separators and word translations, we have to take into consideration:

  • order in which day month and year is written,
  • whether 12- or 24-hours clock is used,
  • whether a month is written as a name, number, or a Roman numeral.

Some languages (eg. Polish but not English) also make a distinction whether the month is a standalone word or appears near the day.

Find more information about the available date and time formats in the DateFormat class documentation.

Units of measurement

Most of the world uses the metric system (SI) with units like (kilo)meters for length, grams for mass and Celsius degrees for temperature. However, a few countries (USA, Liberia, and Myanmar) use imperial system with units like miles for length, pounds for mass, and Fahrenheit degrees for temperature. Some countries like the United Kingdom may use both of them. It may depend on the context in which one should be used.

Note that unlike aforementioned dates, numbers, and currencies where raw value is always the same (eg. the source of both 1,50 zł and $1.50 is a 1.5) in case of different measurement systems also the value has to be calculated separately eg. 1.5 km is approximately 0.93 mi.

There is no support for units of measurement conversion nor formatting in the standard library but various 3rd party packages are available on pub.dev.

Right To Left (RTL)

This text is written in English using the Latin alphabet. It uses left to right text direction (LTR). However, some alphabets (or more precisely scripts) are written right to left (RTL).

Take a look at the examples:

English:
Hello

Arabic (look on the right side):

مرحبا

Note that not only is the text direction different (the first letter – مـ is on the right of the text) but also the layout direction (the entire block of text is on the right of the screen). In general, you should not think about the left and right sides but rather the start and end.

The aforementioned sides are usually used with margins, paddings, alignments, etc. In Flutter standard library, class names supporting RTL use a Directional suffix. For example, we have EdgeInsetsDirectional or BorderRadiusDirectional. For text direction, there is a TextAlign enum which – as the name suggests – determines the text alignment.

Information whether the start is on the physical left or right side, is primarily taken from the BuildContext with the help of Directionality class. In the case of text, apart from its alignment, we can also explicitly set its direction. Text displaying is a complicated topic. We can have eg. Arabic text (written normally right to left) with embedded English proper names (written left to right). Flutter standard library has a Bidi class with a set of methods that can help handle such cases.

Note that although Flutter supports directional properties, it does not mean that they should be blindly used everywhere in the code, even if your app supports RTL locales. For purely decorative elements (excluding those connected to direction like back arrows), you should use visual properties (those without Directional suffix).

Phone numbers

Phone numbers are also formatted differently depending on the country and other factors eg. whether it is dialed domestically or internationally. For example:

  • (541) 754-3010 – domestic USA
  • +1-202-555-0108 – international USA
  • 123 456 789 – domestic Poland

There are some falsehoods programmers believe about phone numbers.
There is no library having capabilities like libphonenumber for native platforms. However, some unofficial ports exist.

Images

Sometimes you may want to localize assets. For example, if the image contains text or currency. There is no built-in mechanism for such use cases in Flutter. However, you can construct asset paths dynamically like this:
Image.asset('assets/images/${Localizations.localeOf(context)}/icon.png')

Depending on geographical region (not necessarily a country) the laws may be different. For example in the European Union, we have to follow GDPR, while in Brazil there is LGPD, CCPA applies in California (USA), etc. It may impact necessary consents obtained from users and/or displayed legal notices, disclaimers, terms of services, etc.

Some countries may require additional actions, for example when dealing with sensitive or medical data (eg. HIPAA in the USA), gambling or interacting with children (eg. COPPA in the USA). Sometimes, you may need to display different content in different locations because of licensing, copyright, price discrimination, etc. Eventually, you may be even enforced to geo-block some content in the app.

Implementation

To achieve working locale-dependent APIs, we need to specify which locales do we support and provide the localization delegates with actual implementation. Usually, we don’t need to implement the latter by hand as they can be provided by libraries. In the case of the Smoge app we need to extend the MaterialApp instantiation like this:

MaterialApp(
        localizationsDelegates: [
          Strings.delegate,
          ...GlobalMaterialLocalizations.delegates
        ],
        supportedLocales: Strings.delegate.supportedLocales,
        theme: AppThemeDataFactory.prepareThemeData(),
        home: NavigationContainer(),
      );

Note that GlobalMaterialLocalizations are provided by the official Material library. Not to be confused with DefaultMaterialLocalizations which are English-only. Strings class is generated by intl_utils which will be described in the next paragraphs.

Native resources

Some of the properties cannot be changed at the Flutter level and need to be done natively. This includes at least the app name – label shown near the icon on the home screen and in various places like the recent apps screen on Android.

For iOS, the label can be set by adding CFBundleDisplayName property to ios/Runner/Info.plist file. If the app name itself has to be localized, its translations can be added to InfoPlist.strings files for the appropriate locale.

Note that if your app needs privileged access eg. to camera or device location (not to be confused with localization 😉 ), then you also need to provide the messages for each such permission. It can be done analogously to the app title.

Additionally, on iOS it is mandatory to list locales supported by the app (apart from doing the same at Flutter Level). This can be done by the CFBundleLocalizations array in the mentioned Info.plist file.

On Android, the label is set using the label application manifest attribute. In order to localize it use the string resource instead of a hardcoded value.

Moreover, some functionality of the Flutter app may be provided by plugins and implemented separately for Android and iOS. If there is some content that needs to be localized there you have to use some platform-specific technique.

See official documentation for Android and iOS respectively for more details about localizing native resources.

The tools that simplify Flutter app localization

There are many 3rd party tools available that can simplify Flutter app localization. Here are some popular ones at the time of writing this article. If you are reading this months or years after publication then the list may be out of date, new solutions will appear, some may be abandoned and forgotten.

For our Smoge app, we have chosen the latest one – intl_utils. It is simple to use, supports the device’s locale changes (unlike eg. easy_localization – see an issue),  integrates well with Localizely – a web service with GUI for localization, has Flutter pub CLI bindings and dedicated IDE plugins (for both Android Studio and VS Code).

intl_utils

Setup

The first step of integrating intl_utils is to enable it in pubspec.yaml:

flutter_intl:
  enabled: true
  class_name: Strings
  localizely:
    project_id: 39cf3f3a-a154-4d3f-85b5-f57e71774f3e

Note that apart from enabling we also configure 2 more optional settings. We set the generated delegate class name to Strings (without that it is by default called S). We also set a project id on Localizely so we can manage the translations using an online editor. You can find the complete list of options in the official documentation. Note that project ID can be safely committed to the repo and even published.

Additionally, we need to enable Material library translations by adding the following entries to the dependencies section:

intl: 0.16.1
intl_translation: 0.17.10+1
flutter_localizations:
  sdk: flutter

The last step of setup is to configure the static code analysis to exclude generated sources related to the localization. This can be done by adding the following entry to analyzer -> exclude list in analysis_options.yaml:
- 'lib/generated/**'

Localization

Translations are located in the lib/l10n directory, in locale-specific ARB files named using intl_<locale>.arb scheme. Where locale is eg. en (English) or es_MX (Spanish, Mexico).

Files contain JSONs like this:

"@@locale": "en",
"airQualityNorm": "norm",
"@airQualityNorm": {
  "description": "Air quality norm percentage label"
},
"percentage": "{value}%",
"@percentage": {
  "description": "Pollution percentage norm scheme"
}, more keys...

At the beginning, we have a locale specifier (usually matching file name) and then actual translations. Each one can have an associated description which can help translators to find an actual context.

For example, the English word book may be translated into French as either livre (noun) or réserver (verb). Without a context, the translators may not be able to choose the correct translation, or even worse they can infer an incorrect one.

Note that if you provide region-specific translations (like Spanish, Mexico), you should also consider providing a generic region-agnostic file specifying only a language (es – Spanish in this case). Without that, if a user has set the Spanish language, but a country other than Mexico, the resolution mechanism will fall back to the default locale (by default English). It won’t try other Spanish variants as it can happen on Android.

Generating sources

Actual Dart source files can be generated out of ARB using either Flutter CLI (useful on CI) or by IDE plugins.

Another question is whether generated files should be committed to VCS or not. If they aren’t, new developers need to know how to generate them before they first build the project. Otherwise, they will get compilation errors.

Localizely

Intl_utils also integrates well with Localizely (it’s a company behind it). It provides a spreadsheet-like graphical online translations editor. Usually more convenient than raw JSONs in ARB files. Keep in mind, that professional translators may not be technical.
You need to generate an API token in the Localizely console in order to communicate with its API. That token is saved in your home directory, so there is no need to gitignore it.

There is also an OTA (Over-The-Air) translations update available. However, in the Smoge app, we don’t use it.

Note that Localizely in general is a commercial, paid service. At the time of writing It can be free of charge for open source projects or small closed source ones (up to 250 string keys). See pricing for more details. Disclaimer: we are not affiliated with Localizely.

Internationalizing and localizing a Flutter app – wrap up

Internationalization is not a trivial process. It involves not only texts themselves but also numbers, dates, sometimes images, or even functionalities of the app. There are tools like intl_utils or Localizely which can help. However, it is very important to think about localization from the very beginning. Internationalizing an already done app is much harder and error-prone.

We hope that, whether you want to be a freelancer or work at a Flutter development company, our series will help you to become a Flutter developer and develop your first Flutter app.

The post is written in cooperation with Wrocław Java User Group.

The post Internationalizing and Localizing a Flutter App | How to Develop an App with Flutter – Part 7 appeared first on Droids On Roids.

]]>
https://www.thedroidsonroids.com/blog/development/flutter-app-localization-and-internationalization/feed 0
Refining the Widgets Layer with Provider | How to Develop an App with Flutter – Part 6 https://www.thedroidsonroids.com/blog/refining-widgets-layer-with-provider-develop-app-with-flutter https://www.thedroidsonroids.com/blog/refining-widgets-layer-with-provider-develop-app-with-flutter#disqus_thread Tue, 01 Sep 2020 10:18:15 +0000 https://www.thedroidsonroids.com/?p=29047 Learn how to develop your first Flutter app. This time, we will focus on refining widgets layer with the provider package.

The post Refining the Widgets Layer with Provider | How to Develop an App with Flutter – Part 6 appeared first on Droids On Roids.

]]>

This article is a part of the series “Flutter app development tutorial for beginners”. We’ve published the following posts so far:

  1. Introduction to your first Flutter app development 
  2. Flutter Project Setup
  3. Creating a Home Screen
  4. Styling the Home Screen
  5. Networking and connecting to API
  6. Refining Widgets’ Layer with Provider – you are reading this
  7. Internationalizing and Localizing your Flutter App

What’s more, we’ve also prepared a Roadmap that can be useful in your Flutter development journey:

We hope that, whether you want to be a freelancer or work at a Flutter development company, our series will help you to become a Flutter developer and build your first Flutter app.

Problem and solution, right away!

As we know, Flutter’s UI is declarative. We go down the widget tree and we get to know the view’s structure. This includes the parameters of particular widgets, the declared business logic, and even application logic! The basic problem in Flutter app development I’ve dealt with is that business logic tends to mix with application logic. It makes widgets hard to read in its structure and has too many responsibilities.

Because all of this, it’s also hard to test the application. That’s why, at the beginning of every project as well as when we’re getting to know about the project’s functional requirements (Product Discovery), it is the first problem that we have to deal with. In this part of our series, we will show one of the possible solutions.

We will split the business logic from the application logic with the tool recommended by Google, which is the provider package made by rrousselGit.

What is business logic and application logic? Let’s explain briefly!

At first, it will be worth briefly reminding ourselves what business logic is, as well as application logic, and why we should have as little application logic as possible contained in our widgets.

Business logic defines tasks that need to be done but doesn’t present exact implementation.

Application logic is the implementation.

One of the simplest examples of business logic can be Dart’s abstract class. This class defines WHAT will be achieved by implementing this abstract. The code within the designated methods and variables is indeed application logic, which specifies HOW the task will be done.

The widgets layer as a neat interface for developers

And now we can answer why widgets should contain as little application logic as possible. Widgets are the highest layer in Flutter application, while down below we have Elements and RenderObjects. On a daily basis, a Flutter developer will mostly deal with the widgets layer, which is an easy to read interface that tells us what could be displayed on-screen and which components we can interact with.

In the widgets layer, we will not see how Flutter’s framework plans its next animation frames, how it will refresh the Elements’ tree or even how RenderObjects will be drawn on the screen. Widgets because of which layers are placed in should be only blueprints of the application flow, which don’t define concrete implementation, so they need to only implement business logic.

Of course, achieving such a complete extraction of the application logic in the widgets layer is hard and expensive. However, we should always try to reach this state. With this brief explanation finished, we can move to the main part of the article.

Let’s introduce the provider package!

The provider is a package created by rrousselGit. It is recommended by Google as a component for simple app state management used in Flutter. Previously, they’ve been recommending BLoC pattern. Here is the most popular package made by felangel. Provideris a convenient wrapper on InheritedWidget, which significantly improves work with the data that we transfer through widgets’ trees.

In my opinion, the most important feature of this component is the unified initialization and the ability to retrieve data from InheritedWidget. Every developer should take into account that what he has written can be used by another developer and, hence, the code should be at some level written in commonly used and respected standards.

Clean code is also a well-known code. That is why we create our projects with already battle-tested architectures, as well as design patterns, and stick to code standards such as the Effective Dart style guide.

How does provider work?

Now I will describe the provider‘s flow. If you prefer documentation, just get in there buddy and you can skip this paragraph. We place provider(as a subclass of InheritedWidget) in the widget tree and declare an object that will be provided. In the next step, we just retrieve the provided object from the context with a few context extension methods defined by the package. With these methods, we can refresh the view only when the desired field of observable object changes.

Let’s get to the code!

As we already know how to use the provider and what it is, we can introduce it to our Smoge application.

I’ve previously mentioned adhering to standards. Besides the standards that are present in many projects, we also create those that we keep internally. The development team creates such rules. The provider package establishes initialization and data retrieving policies. We, as developers, need to figure out a way to integrate providers and observable models with our application.

We need building blocks, first: ProviderModel

Let’s begin with the model that needs to be injected into the provider. As the PollutionRestRepository launches requests to GIOŚ (Chief Inspectorate of Environmental Protection) API, our provider needs to inform it about the result of a particular request. This is why we need a model that is capable of indicating a change in the value that we observe. In this case, our model needs to extend the ChangeNotifier class.

The class’s name is ProviderModel. This is a generic class containing a data object. The constructor initializes this data object with the initial value.

Provider‘s ChangeNotifierProvider and ProviderWidget

If we use ProviderModel, which extends ChangeNotifier, ourprovider should be able to handle such a subclass. That is why we need aprovider that will trigger tree rebuild when the model indicates change. ChangeNotifierProvider created by theprovider package should do the work. Here, I’ve placed a widget into ProviderWidget.

This class is also generic and it is initialized with a child and function that returns theprovider model of the type declared in ProviderWidget class. In the build function, we return the mentioned ChangeNotifierProvider. Even though the lazy parameter is set to true by default, I just wanted to show this feature of provider, which initializes only when it is needed.

Because the BuildContext parameter in the build function returns the context of the previous widget, we have to be sure that the injected provider will be available from the child level. We’ve wrapped the provider’s child with Builder. Thanks to Builder, the child will be able to get the provider from context because the provider will already be below the created tree. Now we can easily wrap widgets that need provider.

PollutionProviderModelState

Let’s define a data object that will contain pollution data and will be handled by the implementation ofProviderModel. I have named it PollutionProviderModelState.

As we can see, it has fields that represent the results of requests defined in PollutionRestRepository. Every field is a type of extended result class, ProviderModelAsyncResult.

This class will allow us to control the asynchronous status of setting the nested result field and it will inform the provider about the change of a particular field from PollutionProviderModelState. Everything will be handled by a set() method that gets a Future object. It contains the Result to be handled and callback of data change.

PollutionProviderModel

The next class is the implementation of ProviderModel, which takes care of pollution data handling from PollutionRepository. It is PollutionProviderModel.

PollutionProviderModel extends ProviderModel with the PollutionProviderModelState type, which is an observable object of our ProviderModel. PollutionProviderModel contains methods that set particular fields of PollutionProviderModelState using data downloaded from object implementing PollutionRepository.

Each method invokes set() method of particular ProviderModelAsyncResult variables in PollutionProviderModelState. We get result from the repository and the callback is the notifyListeners method that originates from ChangeNotifier. Method notifyListeners calls all registered listeners about the possible change and can result in rebuilding the widgets’ tree.

Putting them together!

As we already know all of the components, we can finally add provider to the HomePage. The HomePage is initialized in NavigationContainer. Let’s wrap HomePage with ProviderWidget of the type PollutionProviderModel.

In create function, we return a build() constructor of PollutionProviderModel that injects PollutionRestRepository, which was previously placed directly in the HomePage. Now, after retrieving the provider from the context, we will be able to interact with it. I’ve changed the _buildStationName method and now it looks like this.

In the beginning, we use the BuildContext extension method, selected in order to observe changes of a particular field of ProviderModel. The widget tree gets rebuilt if an observable variable changes. Thanks to this, we can control the whole asynchronous process of downloading data from PollutionRestRepository. Observable value is of the ProviderModelAsyncResult<PollutionStation> type. If the result doesn’t contain any data, we display CircularProgressIndicator. After retrieving the data, we basically unwrap the results and display a station name or error description.

Now we have the last thing to do. We have to trigger the station name request. Flutter documentation recommends invoking any of InheritedWidgets’ methods in didChangeDependencies function, as this is the first method invoked after initState. Just for reminder’s sake, we cannot invoke BuildContext.dependOnInheritedWidgetOfExactType within the initState method.

As you can see, we’re making sure that our injected provider will be invoked only once.

Finally, results … kind of!

Let’s run the app. As you see, nothing changed. Maybe end users will not be amazed by our changes but the developer will surely be happy to see downloading pollution data logic extracted from the widget layer. The HomePage only gets information about the operation’s result and doesn’t know about any required dependencies to accomplish this task. The widget only knows what to display.

The purpose

Separating business logic from application logic is a common practice in programming, especially in commercial development. The more complex a project is, the more we benefit from this approach.

In the Smoge app, we could of course ignore these practices and make it the easiest way because we will not release this app and will not get profit from it. However, the main purpose of this blog post series is to show you how to write commercial apps that have to be easy to maintain and readable for the whole app development team.

Stay tuned for the next article in this series, it will be about writing automated tests. In the meantime, check out in10 – RSVP & ETA Tracking App which we made with Flutter.

The post Refining the Widgets Layer with Provider | How to Develop an App with Flutter – Part 6 appeared first on Droids On Roids.

]]>
https://www.thedroidsonroids.com/blog/refining-widgets-layer-with-provider-develop-app-with-flutter/feed 0
Networking and Connecting to API | How to Develop an App with Flutter – Part 5 https://www.thedroidsonroids.com/blog/networking-and-connecting-to-api-develop-app-with-flutter Wed, 01 Jul 2020 08:57:56 +0000 https://www.thedroidsonroids.com/?p=26909 Learn how to build your first Flutter app. This time, we will focus on styling the home screen.

The post Networking and Connecting to API | How to Develop an App with Flutter – Part 5 appeared first on Droids On Roids.

]]>

Want to build an app with Flutter? Follow our series “Flutter app development tutorial for beginners”. We’ve published the following posts so far:

  1. Introduction to your first Flutter app development 
  2. Flutter Project Setup
  3. Creating a Home Screen
  4. Styling the Home Screen
  5. Networking and connecting to API – you are reading this
  6. Refining Widgets’ Layer with Provider
  7. Internationalizing and Localizing your Flutter App

What’s more, we’ve also prepared a Roadmap that can be useful in your Flutter development journey:

Whether you want to be a freelancer or work at Flutter development company, our series will help you to become a Flutter developer.

Setting up networking in the project

Thanks to following the steps described in the last post, we have the screen of our application ready. In this part, we are going to make it worse (a little). Currently, the pollution data on the screen is mocked, we have to replace it with the real data fetched from the server. In order to do this, it is necessary to set networking in our application up.

Where do we start?

If we want to display the data we need to take it from somewhere. We will use public API for air quality in Poland. The air quality portal API grants access to detailed air quality data collected from the whole country. This API is public and we do not need to authenticate.

What kind of data can we obtain?

  1. List of all air quality stations,
  2. List of air quality sensors for each station,
  3. List of historical air quality data for each sensor,
  4. Current air quality summary for each station.

Here is how a single air quality station looks like:


Our goal is to display the name of the station in the UI of our application.

Setting up networking packages

There are two main choices when it comes to the networking library in Flutter

  1. http package – as per documentation “set of high-level functions and classes that make it easy to consume HTTP resources.” This package is also mentioned in the flutter documentation.
  2. dio package – more powerful than the previous one, offers more configuration such as adding interceptors and request cancellation. Also, it can be extended with plugins for cookie management, cache, etc.

In this article, we will use the HTTP package because our use case is simple. We will only fetch data from the network and we don’t have to authenticate. There will be no complicated logic behind our networking adventures, so we wouldn’t need to use all the features of the dio package, but it is definitely worth knowing of its existence.

What’s more, the data that we will get has to be serialized. We can do this manually but it is much convenient to use code generation for that. For this purpose we will need serialization packages:

  1.  json_serializable – generating classes.
  2.  json_annotation – marking model classes with annotations so that it is clear what we want to achieve in generated code.
  3.  build_runner – provides a command-line interface for generating the code.

This will convert JSON data into objects defined in our application. All this will prevent us from writing boilerplate serialization code for each model class. Add all those packages into pubspec.yaml:

To the code

Now, that we have all our dependencies ready it’s time to make use of them!

First, we will create an HTTP client class that will be responsible for making actual network requests and for error handling. The class looks like this:

  • The class is defined as a singleton so that we can reuse the same instance in many places,
  • data from the network is received as a String so we need to parse it using jsonDecode method which is defined in dart SDK – dart:convert,
  • we check for failures and map them to our own errors defined to suit our needs.

Here are the error types defined for our networking:

The next step is creating a repository when we will create methods to obtain data from different endpoints using HttpClient class created earlier.

The private _Urls class defines all the endpoints that were described at the beginning of the article. We will use each of the endpoints as a parameter to the getRequest method of our HTTP client object.

PollutionRestRepository class extends PollutionRepository. This is an interface that defines all our network requests. This way the responsibility of the repository class is clearly defined. What is more, because of the abstraction it will be easy to switch implementations if we needed to.

As you can see in our repository implementation there are two types of data returned from the getRequest  method:

  1. final List<dynamic> stationListJson
  2. final Map<String, dynamic> sensorDataJson

The reason for this is that we can have two (and only two) types of structures when it comes to json files

  1. List – when json data is wrapped with square brackets []
  2. Map – when json data is wrapped with curly brackets {}

The type of structure depends on the endpoint that we are requesting data from. dynamic type specifies that there can be different types of objects stored as list elements or map key values.

We are left with the last piece of data to analyze in our PollutionRestRepository class

PollutionStation.fromJson(stationListJson.first)

This line converts JSON structure into PollutionStation object that we have defined in our application. Let’s describe this situation in more detail.

Deserialization

“Serialization is the process of translating data structures or object state into a format that can be stored (for example, in a file or memory buffer) or transmitted (for example, across a network connection link) and reconstructed later” – from Wikipedia. Deserialization is the opposite.

Since we are only fetching data from the internet we will focus on the deserialization process. We can do this by manually mapping each property of the class to the corresponding JSON key which is very repetitive and error-prone or we can use code generation to do this task for us.

In order to generate the code we have to mark our class with annotations:

Here is what needs to be done in steps:

  1. Specify the name of the auto-generated class part pollution_station.g.dart
  2. Mark class as serializable  @JsonSerializable()
  3. Specify json key for each property of the class @JsonKey(name: 'id'). Hint: if the name of the property is the same as the key then the annotation can be omitted.
  4. If the property is an object itself we have to provide the serialization class for that object as well! Here City property is the case.

More information about possible annotations can be found in json_serializable documentation. Now we are ready to generate the code, we do this by typing into the terminal:

flutter packages pub run build_runner build

This command is available by adding build_runner to pubspec.yaml file. Running it will generate classes containing code that we would otherwise have to write ourselves.

The last thing is to provide convenient methods in our classes that can use the auto-generated code.

Displaying the data on the UI

The time has come to display pollution data on the UI of our application. First thing is to create a repository object in the HomePage class so that we can use its methods:

For the purpose of displaying the data, we will use FutureBuilder widget which will allow us to create widgets using the future object. We will combine it with GestureDetector widget so that we will invoke a request every time we click on the created widget, the code looks like this:

Inside the builder method, we have access to snapshot object which we can use to check if the data are still loading and if the request resulted in success or error. In case of an error, we have to map received error into an appropriate message. We will do it in ApiExceptionMapper class:

The error types have already been defined in our HttpClient (at the beginning of the article) so now it is easy to provide a message for a specific type of error received. This way this class is translatable if we wanted to introduce internationalization in our application.

Now, when the request fails we should see a relevant message. We have just placed, the name of the station in the middle of the screen. This name is only for the purpose of this article and will be removed afterward.

Summary

Today we’ve learned how to create a simple network request and pass the data into our UI. The complete plugin source code is available in Smoge GitHub repository.

In the next article, we will focus on improving the architecture of our Flutter app. In the meantime, check out in10 – RSVP & ETA Tracking App which we made with Flutter.

The post Networking and Connecting to API | How to Develop an App with Flutter – Part 5 appeared first on Droids On Roids.

]]>
Styling a Home Screen | How to Develop an App with Flutter – Part 4 https://www.thedroidsonroids.com/blog/styling-home-screen-how-to-develop-app-with-flutter Mon, 01 Jun 2020 06:51:06 +0000 https://www.thedroidsonroids.com/?p=25119 Learn how to build your first Flutter app. This time, we will focus on styling the home screen.

The post Styling a Home Screen | How to Develop an App with Flutter – Part 4 appeared first on Droids On Roids.

]]>

Want to build an app with Flutter? Follow our series “Flutter app development tutorial for beginners”. We’ve published the following posts so far:

  1. Introduction to your first Flutter app development 
  2. Flutter Project Setup
  3. Creating a Home Screen
  4. Styling the Home Screen – you are reading this
  5. Networking and connecting to API
  6. Refining Widgets’ Layer with Provider
  7. Internationalizing and Localizing your Flutter App

What’s more, we’ve also prepared a Roadmap that can be useful in your Flutter development journey:

Whether you want to be a freelancer or work at Flutter development company, our series will help you to become a Flutter developer.

Styling the home screen in your first Flutter app – introduction

In the previous post, we have started to build the home screen.

Today, we are going to add custom fonts and colors to the app and also we will add a smoke animation as a background.
This is how our app will look like after this post:

The initial code, that will be used as a basis for this part can be downloaded here.
The final implementation is available here.

Skip to a section:

Flutter app uses Theme to share colors and font styles. We can define app-wide themes in MaterialApp or use Theme widget to change the style in a particular place of the app.

Defining colors

Let’s start with creating a new file app_colors.dart and define all colors needed on the home screen.

Having colors defined we can create a factory that will prepare the app theme using our colors.
To do that create app_theme.dart file with such code:

And we can use this style inside ‘MaterialApp’

To access an app theme in code we call:
ThemeData theme = Theme.of(context);

Customizing fonts

According to the design, the app has two fonts: Roboto-Medium and Roboto-Bold.

The first step is to paste font files to the assets folder. We did that for you and we prepared a fonts directory in the assets folder with needed files.
To let Flutter know about new fonts we have to define them in puspec.yaml according to the documentation.

The next step is to add text styles with new fonts to the app theme.
On the home screen, we have four different text styles.
Final implementation of AppThemeDataFactory should look like this:

To use a new font in the Text widget we have to set its style argument.
Let’s make some changes to adjust fonts on the home screen.

And now, running the app we can see that text has proper style the same as in the design.

How to build an app with Flutter step 13

Extracting strings

One more thing we can do to improve the quality of our code is to extract hardcoded strings to separate class. This helps with easy access to all strings we have in the app. The introduction of translations will be also easier.
To achieve that we will create strings.dart file in the utils directory with all strings defined as static variables:

And we can replace now all hard coded values like this:

Extract icons paths

The same as with strings we can do with paths to icons.
Create app_icons.dart file in the app directory. In that file define AppIcons class with all paths defined. All paths have the same prefix that is assets/images. We will define that as const variable _basePath.

And usage is similar as with strings:

Creating a smoke effect

The home screen is almost ready. One thing that is missing is smoke animation in the background.
We will solve that by playing a full-screen video.

Adding dependency

To play video in Flutter its team provides a plugin to do that. The video_player allows us to play both local video placed in the assets directory as well as videos from the internet.
Underneath it uses AVPlayer on iOS and ExoPlayer on Android.

To use external dependency we have to define it inside pubspec.yaml in the dependencies section and run flutter pub get in the terminal.

Creating a video player widget

The next step is to create a video player. We will do that the same as before with other UI components – as a custom widget.
In video_player‘s Readme we see that we have to add the NSAllowsArbitraryLoads key to the Info.plist file and internet permission to the AndroidManifest.xml file, but as we only want to play video located in the assets folder, we do not need to add that.

Let’s go straight to creating video_player_widget and place the file along with other home screen widgets:

  • We import video_player.dart so we can use its classes.
  • WideoPlayerWidget accepts videoPath as a required parameter. videoPath can be both local or remote file url.
  • Inside initState metod of _VideoPlayerWidgetState we define VideoPlayerController which allows us to control video playback.
  • Just after creating a controller using cascade notation we call initialize method which opens given data and pull metadata about video.
  • Once the video is initialized we call play method to start the video and also set looping to true so the video will play again once it finished.
  • Together with play method we call setState to ensure the first frame is shown after the video is initialized.
  • In build method we return VideoPlayer widget initialized with previously created controller.
  • In dispose method controller is disposed as well.

Placing a video on the home screen

As player widget is ready we can add it to the home screen. The video will be placed under other components. To achieve that we can use Stack widget which allows us to overlap its children. Top SafeArea will be wrapped together with VideoPlayerWidget in Stack

In the assets folder, we can find the fog.mp4 file which is used as an input for VideoPlayerWidget. To make it be recognized by the app we have to add videos directory to the pubspec.yaml assets section

And that is all, now we can run the app

How to build an app with Flutter – home screen

That looks exactly as we wanted to!
And with that, we have finished the first screen in our app.

Styling the Home Screen – summary

Today we’ve learned how to style our first Flutter app, how to use external dependency, and play video in Flutter. I hope our Flutter tutorial for beginners will help you in getting started with Flutter app development.

In the next article, we will create a network layer and learn about JSON serialization by connecting with air quality public API. Stay tuned, and good luck with your app!

In the meantime, check out in10 – RSVP & ETA Tracking App which we made with Flutter.

The post Styling a Home Screen | How to Develop an App with Flutter – Part 4 appeared first on Droids On Roids.

]]>
Creating a Home Screen | How to Develop an App with Flutter – Part 3 https://www.thedroidsonroids.com/blog/creating-home-screen-how-to-develop-app-with-flutter Thu, 30 Apr 2020 07:53:21 +0000 https://www.thedroidsonroids.com/?p=24948 Learn how to build your first Flutter app. This time we will focus on creating a home screen.

The post Creating a Home Screen | How to Develop an App with Flutter – Part 3 appeared first on Droids On Roids.

]]>

Want to build an app with Flutter? Follow our series “Flutter app development tutorial for beginners”. We’ve published the following posts so far:

  1. Introduction to your first Flutter app development 
  2. Flutter Project Setup
  3. Creating a Home Screen – you are reading this
  4. Styling the Home Screen
  5. Networking and connecting to API
  6. Refining Widgets’ Layer with Provider
  7. Internationalizing and Localizing your Flutter App

What’s more, we’ve also prepared a Roadmap that can be useful in your Flutter development journey:

Whether you want to work at Flutter development company or be a freelancer, this knowledge will help you to become a Flutter developer.

Creating a home screen in the Smoge app with Flutter – introduction

In the last post about project setup with Flutter, Karol showed us how to set the Flutter environment up, so without any additional work, we can dive into the best part – coding 🙂

In this article, we will learn, step by step, how to create a home screen of the Smoge app with Flutter. In particular, we will focus on:

  • organizing your project with smaller classes and directories
  • building UI using basic Flutter widgets
  • creating a custom widget and animations
  • using assets in Flutter
  • writing the code that will be easily maintainable.

This is a preview of what we want to achieve:

How to create home screen in your first Flutter app

Download the initial code, that will be used as a basis for this part here.
The final implementation of the first screen is available here.

Skip to a section:

There are many successful apps made with Flutter on the market. Maybe your will be the next one! So, let’s get to work.

Splitting the code up

In the lib folder, we can find the main.dart file. This file is created automatically together with the entire project. Inside this file, we find three main parts:

  • main() function which is the entry point for the app. This function calls runApp() to start the framework.
  • MyApp class, which is the root of the whole app. Here we can define a home screen and a theme for the whole app. MyApp extends StatelessWidget which makes the whole app itself also a widget.
  • MyHomePage class, which is a home screen of the app. It extends StatefulWidget. That means the home screen has its State object (_MyHomePageState that starts its definition at line 46). This widget could look differently depending on its internal objects(in this case it’s counter parameter).

As you can see, all of these parts are in just one file. Let’s start with a small refactoring and move all these parts to separate files and remove default comments.

Create two directories in the lib folder:

  • app – to store classes related to app configuration: colors, icons themes, etc.
  • ui – to store screen classes

Building Smoge app step 2

Create smoge_app.dart in the app directory. Move MyApp class to the newly created file and rename it to SmogeApp.

Keep in mind that the file naming convention in Dart is using only lowercase letters and underscores for word separation. More about Dart language style you can read at Dart’s guide website.

Move MyHomePage class to lib/ui/home directory and rename the class to HomePage. Also, remove code related to the counter as we will not use it.

In main.dart leave only the main method that runs SmogeApp. After that, the code is more separated, easier to read, and maintain.

One more thing we need to change to make the project compile is to rename MyApp to SmogeApp in widget_test.dart.

Now we can run the app and see only a navigation bar and a white background.

How to build an app with Flutter – Flutter Demo Home Page

Now, let’s go to the next important element useful when you want to create your first app with Flutter and learn how to build a Flutter app – Building UI.

Building city title widget

As a top widget of our home screen, we will use SafeArea.

SafeArea widget adds padding depending on the operating system to avoid overlapping with a status bar or a notch on some phones.

The whole content is aligned vertically one after another so as a child of SafeArea we will use Column widget.

At the top of the screen, we have a label with a city name. To build it we will use Text widget.

And that is enough for now. Let’s put that in code and change _HomePageState like this:

Building of the title is located in a separate method to make code cleaner and easier to read.
Underscore (_) as a function’s prefix is used in Dart to mark this function private.

And now run the app.

How to build an app with Flutter step 3

The text label is below the status bar and notch due to the SafeArea widget.

But the text label is not centered horizontally on the screen. Why?

The problem is that the Column widget adjusts its width to cover all the content, so in our case Column width is the same as a text label.

To stretch column full screen add property crossAxisAlignment and set it to CrossAxisAlignment.stretch.

Now It looks better. Text size and font of the text label is not the same as on designs but we will fix that later 🙂

In the next paragraph, I describe another crucial element useful if you want to learn how to build an app with Flutter. Creating animations.

Creating animated widget

The next step is to create a text with a percentage at the center. This text needs to be animated from the value of zero to the given number.

Animations, Yay!

We are going to create this widget in a separate class and we will pass two values to it: fromValue and toValue. All animation logic will be inside this widget so our home page will stay clean and readable.

First, in the home directory create a new one called widgets. Here we will create all custom widgets needed on the home page. Create new Dart file animated_percentage_widget.dart and paste below code:

AnimatedPercentageWidget extends StatefulWidget because its state will be changed during the animation.
In the constructor, we can pass three parameters: fromValue, toValue, and duration. We set a default value for the duration parameter so it can be omitted during widget creation. Before calling the super method we check if all required values aren’t nulls to avoid null pointer exceptions and application crash. Also, we check if fromValue is less than toValue.

The default value of the duration parameter is created with the const keyword.
const is an optimization. It helps Flutter to easily compare representations of widgets and decide if it needs to be rebuilt.
To use the const keyword all widget’s parameters have to be final.
The more detailed explanation you can find in this post.

createState() method needs to be overridden for a stateful widget in order to create data that will drive the widget.

_AnimatedPercentageWidgetState is a private class that extends State, a generic abstract class. It is a Flutter template for creating custom widgets.

To run animation in Flutter we need instances of two classes: Animation and AnimationController

In our animation, we will use a ticker controller and a setState method.
A Ticker is an object that calls a function every frame.
Widget state includes SingleTickerProviderStateMixin. This mixin takes care of the hassle of managing the ticker. With that mixin, our state becomes secretly a ticker provider. What this means, is that the Flutter framework can ask it for a ticker.
Most importantly, AnimationController can ask it for a ticker.
AnimationController needs a ticker for its two functions. If you use SingleTickerProviderStateMixin or its cousin TickerProviderStateMixin you can give ‘this’ to the AnimationController.
AnimationController is what you normally use to play, pause, reverse, and stop animations.
Instead of pure tick events, it tells us at which point of the animation we are at any time.

In our case we want to animate from one value to another, so we will use Tween animation.
In the Tween constructor we put fromValue as begin and toValue as end parameters.
Right after the constructor, we call animate function passing AnimationController as its parameter. This function returns Animation which is driven by a passed controller.

On the animation object, we call addListener function to be notified every time the value of the animation changes.

The standard way of setting a listener would create animation and then set the listener on the animation object like this:

Thanks to Dart’s cascade notation we can call the subsequent ‘addListener method on the Animation object. ‘addListener is a void method so it does not return any value but as a cascade notation ignores any subsequent return value we still get Animation object and can assign it to _animation parameter:

Inside the listener we call the setState method. setState notifies the framework that the internal state of the object has changed. In our case, we change the _number parameter value to one provided by animation.

The last step is to call the forward method on the controller to start running animation.
Don’t forget to dispose of AnimationController. This can be done in the dispose method of the widget’s state.

As the animation is ready, what’s left is to build a Text widget with _number value:

Placing an animated widget on the home screen

Now is the time to add just created widget to the home screen. Let’s do the same for building this widget as it was for the title which is in a separate method.
Both with percentage value let’s add a label that is underneath.

How to build an app with Flutter step 5

Both widgets are one after another vertically so wrap them in Column:

Running the app we get such results:

Flutter Smoge app -step 6

The animation is working!

The whole content should be placed in the center. To achieve that we need to wrap the created column in Expanded widget, so it will take free space of parent Column and also to center content vertically inside it we will set mainAxisAlignment to MainAxisAlignment.center.

 

And now the content is in the center!

How to build an app with Flutter step 7

Creating custom widget

What we are missing on the home screen is a bottom widget with the activities.
This one will also be created as a separate widget to keep code well organized.

How to build an app with Flutter step 8

We will need some icons to build this widget so let’s start with that.
In the assets folder at the root of the project, you can find all the needed assets.

Flutter uses the pubspec.yaml file to identify assets used in the project.
Open this file and in the flutter section and assets subsection, we have to define all assets that the project uses.
To add images folder to be used by the app make such entry in the pubspec file:

Keep in mind that in case of adding files from subdirectories, we need to create an entry for each directory.

Having assets included in the project, let’s dive into widget building.

Inside the activities widget, there are three separate activities places horizontally.
Every activity looks similar, so it is a good idea to make a separate widget from it.

Building a single activity widget

So start with creating ActivityWidget:

There will be three types of activities: walking, running, and biking.
And we want to display a mark if air quality is good or bad for a given activity.
Create enums with all those types:

To ActivityWidget we will pass activity type and quality. Depending on those two values, the widget can be configured appropriately.

Let’s go step by step through this file.

  1. At the top, there is a private abstract class in which constant values are defined.
  2. Next, there are two enums described before. Enums were moved to this file in a matter of readability.
  3. ActivityWidget extends StatelessWidget as it won’t change during the widget lifecycle.
  4. The constructor receives two parameters: ActivityType and ActivityQuality.
  5. At the bottom of the file, there are three helper methods. One _titleForActivityType returns activity name based on passed activityType and the second one _imageForActivityType do the same but instead of name it returns an icon for activity.
    The last one _buildWarningBadge returns a proper widget depending on passed ActivityQuality: an empty container for good quality and an Image widget with a warning icon for bad quality.
  6. Thebuild method creates the whole widget using helper methods. Because the building is complex, private methods were created to make it easier to read.
    As a parent widget, we used Expanded as it has to expand in its parent.
    Next in the hierarchy, we put Stack to show badge warning icons above the rest of the content.
    Inside Stack, we placed a badge icon at the top, right corner. To do that badge icon have to be wrapped by a Positioned widget:The second child of a Stack is an activity container that has a white background with rounded corners and a column of an activity icon and name.
    The Container has padding from right and top equal to half the size of the warning badge. To achieve that we wrap the container with Padding widget:To build an activity container with rounded corners and shadow we used Container widget with box decoration:Inside the container, one thing that misses is the activity icon and name. These two are children of Column centered in a container.

Building an activities widget

As the ActivityWidget is finished it is time to create a widget showing all activities with their quality:

ActivitiesWidget accepts Map where the key is activity type and value is activity quality. Iterates through that map widget build next ActivityWidgets:

To place the elements horizontally we use Row. To make sure the spacing between elements as well as before and after the first and the last element is equal we set mainAxisAlignment to MainAxisAligement.spaceEvenly.

The activities widget is ready!

Placing an activities widget on the home page

Let’s add it home page to the bottom of the screen with bottom padding:

And run the app:

How to build an app with Flutter step 9

And it looks pretty good, doesn’t it? 🙂

Wrapping last screen element up

The last thing, that is missing on the main screen is the details label with an arrow underneath.

How to build an app with Flutter step 9

To build that we will use a well known already Column

Based on the design text has 50% opacity. To achieve that in Flutter we wrap Text in the Opacity widget.

How to build an app with Flutter step 10

Running the app we can see that the percentage widget takes the whole free space and the details are placed just above activities with height adjusted to its content.

What we want to achieve is to have the percentage at the center between the top label and bottom activities and details at the center between the percentage and activities.

To do that we will create Column with three children:

  • Expandable container to fill top free space
  • Air pollution information with height fitting its content
  • Details column wrapped with Expanded to fill space below the air pollution information

To place the percentage at the center, the Expanded widget above and below it has to have the same flex value.

flex determines the amount of space the child can occupy in the main axis by dividing the free space according to the flex factors of the flexible children.

The default value of flex is 1. It means that both Expanded widgets above and below percentage will occupy the same amount of space and with that, the percentage widget will be at the center.

It should look like this:

How to build an app with Flutter step 11

And the code looks like this:

The air pollution column is not wrapped in Expanded anymore so it shrinks to content size.
The details column is wrapped in Expanded to increase its size to available free space.

And the home screen looks as we desired.

How to build an app with Flutter step 12

And that’s it for now!

Congratulations, you have built your first UI in Flutter 🙂

In the next post, we will style the app by adding colors and text styles.
We will also learn how to add the smoke effect in the background.

Creating a home screen in Smoge app with Flutter – summary

We’ve learned how to create a beautiful home screen in your first Flutter app. We discussed elements like organizing your project with smaller classes and directories, building basic UI with Flutter widgets, and using assets.

How to create home screen in your first Flutter app

I hope our Flutter tutorial for beginners will help you in getting started with your Flutter mobile app development. Read the next article about styling the app with Flutter, by adding colors and text styles.

In the meantime, you can check out in10 – RSVP & ETA Tracking App which we made with Flutter.

The post Creating a Home Screen | How to Develop an App with Flutter – Part 3 appeared first on Droids On Roids.

]]>
Top Apps Made with Flutter – 18 Stories by Developers and Business Owners https://www.thedroidsonroids.com/blog/apps-made-with-flutter https://www.thedroidsonroids.com/blog/apps-made-with-flutter#disqus_thread Wed, 01 Apr 2020 09:00:43 +0000 https://www.thedroidsonroids.com/?p=14083 We asked 18 different business owners and developers who are actively working with Flutter about their insights.

The post Top Apps Made with Flutter – 18 Stories by Developers and Business Owners appeared first on Droids On Roids.

]]>
Do you want to get inspired by top apps made with Flutter? Read this article to see 18 Flutter apps examples with insights from their owners and creators.

“Development in Flutter is a breeze“, “Cross-platform solutions have been around for a long time, but Flutter is the first one to do it right.”, “The biggest downsides to Flutter are platform risk, and size of the developers’ community”, “Our crash rates are down tenfold, and our users are happier than ever”.

What you’ve just read is only a handful of quotes from the eighteen stories of apps made with Flutter we’ve collected in this article. We asked business owners, developers, and other Flutter app development experts to share their experiences.

It’s worth reading those stories if you are interested in developing with Flutter, or – as a business owner – you consider cooperating with a Flutter mobile app development company.

Flutter – a short introduction

On December 4, 2018, Google released Flutter 1.0. Check this video to watch the announcement from Tim Sneath.

What’s more, Google used the same event to launch Hummingbird – a new project focused on bringing Flutter apps to the web, running the same code whether in your browser or on your smartphone (it is in beta, for now).

In December 2019, Google released Flutter 1.12.

Flutter is Google’s mobile app SDK. Complete with a framework, widgets, and tools, Flutter gives developers an easy way to build and deploy fast, aesthetically-pleasing mobile apps – on both Android and iOS platforms – with as little overhead as possible.

Flutter is a hot topic, and it’s high time you found out if this emerging technology could improve your mobile app development process, reduce costs, maybe both.

Here you can read our articles on:

Rest assured, in this post, we dig deep.

What will you find in this article?

  • A list of the 23 top applications made using Flutter – including descriptions, screenshots, and other useful links
  • Stories and recommendations shared by 18 Flutter app owners and developers with detailed insights into using the technology

What you’ll learn from the Flutter stories:

  • Why did the developers and business owners decide to use Flutter for their projects?
  • Would they use it again? Why? Why not…?
  • Did they enjoy working with Flutter?
  • Was it noticeably different to native app development, or React Native?
  • The pros and cons of Flutter – both from a developer and business perspective

How we chose the applications listed in this article:

The selection criteria were subjective – we based our choice on the following:

  • Apps that represent different categories (including social networking, entertainment, finance, sports, travel and more)
  • Big market players’ apps e.g. Google, Abbey Road Studios, Alibaba (Alibaba’s Xianyu app has 50M+ downloads)
  • Apps with an original idea and social value ( e.g. an app for adopting homeless animals)
  • Apps created as a hobby, which gained notable recognition among users (e.g. a school planner)
  • Applications with a beautiful UI (e.g. Reflectly, HuYu)

If you’re ready to learn about Flutter from experienced practitioners from all over the world, it’s time to dive into the best Flutter apps there are.

Table of contents

Social Networking

KlasterMe

app for content discovering & creation

The app for creating, sharing, and discovering different forms of content from images to articles. A user can create a page to showcase their contents and get recognised in the community. The pilot web version of the app was released on December 2018, the Android version on January 1, 2019, and the iOS version on January 5, 2019.

App on App Store | App on Google Play | Website

Abin Baby
Co-founder and Developer at KlasterMe

Once you are past the steep learning curve Flutter almost works like magic. Abracadabra… there comes a navigation drawer. Hocus pocus…a hero animation. It is that easy and fun!

Flutter widgets made the development simple, productive and fast. Although third-party modules and components are not as large as in case of React Native, more than 90% of the widgets required for the first version of our app were available in Dart Pub. These widgets are so easily customisable that you can create effortlessly almost anything you can imagine.

What is more, Flutter has a really enthusiastic and helpful community around on Github, Stack Overflow, and Google groups. Also, I need to mention that they have insanely good documentation which made the on-boarding really, really easy.

The Hot Reload feature also helped to speed up the app development process making it straightforward to experiment with the UI, and fix bugs in extremely short time.

Comparing Flutter to React Native:

  • If you are new to Dart and trying to learn Flutter it will consume more time than React Native. At the same time, if you have experience in Dart learning Flutter will be just a walk in a park.
  • The components in React Native are pretty basic so if you need anything extra, considerable effort is required in styling. Most of the time you have to use a different component for iOS and Android or style it differently. At the same time, for Flutter everything is a widget. Widgets are based on material design and most of them are adaptive so you can use the same widget for Android and iOS.
  • Speaking about performance, Flutter has really an upper hand over React Native as it is compiled to ARM or x86 native libraries, which makes it really fast whereas React Native is not compiled to native code and still has that javascript layer that makes it underperform compared to Flutter.

Flutter is the best mobile development framework I have come across so far.

Pairing

app connecting singles

A social network for matchmaking and dating. Aims to create a safe environment for finding the right match for a meaningful relationship.

Apps Made with Flutter
Apps Made with Flutter
Apps Made with Flutter
Apps Made with Flutter

App on App Store | App on Google Play | Website

Ronen Rabinovici
Co-founder at Pairing

Business-wise, one needs to understand that Flutter gives you a cross-platform solution for:

1. UX/UI – 100% shared between all platforms. Unlike React Native, which is a bridge to native UI elements.

2. Business logic, math, algorithms – 100% shared.

At the same time, anything that needs to talk to the operating system (e.g. getting phone contacts) cannot be shared and has to be developed separately for each system. Of course, many common plugins already exist. So, the bottom line is that most of the code is shared. Probably around 85% for Pairing.

The big difference from native development are the widgets introduced by Flutter. In other development frameworks, UI is defined by some xml-like language. Here, all UI is part of the code. I find it both more comfortable and flexible.

The fact that every scene is built from code gives you a very easy and elegant way to update the view based on the app’s state, incoming data, and user input. You don’t need to have an XML and hook it up in code then. It’s inherently hooked to your model. It’s completely REACTIVE.

It feels like the Flutter team took the good parts from native development, combined it with the good parts React-Native introduced and further developed it from there based on React Native’s lessons. So it feels like the crème de la crème of both solutions.

Another huge advantage of Flutter is the Instant Run. You change the code and it is immediately updated on your device. Without even a ‘flashing’ screen.

Yet another asset – Google’s support is not only for the framework but for its ecosystem: documentation, Github issues, and plugins (e.g. Firebase plugins, files, etc.).

Developing with Flutter really feels like native development does. The language is strong. The compiler catches errors. The IDE helps you to code, and – just like in the native – you get common views and UI elements.

If your app is specifically designed ONLY for Android or ONLY for iOS, and it needs many interactions with the operating system – you are probably better off with native development. In all other cases, we would go with Flutter.

To sum up, we are very satisfied with Flutter and believe that it is the future in mobile development. In fact, we are now working on migrating all our existing native apps to Flutter.


in10

in10 – RSVP & ETA tracking app

in10 is an event app offering advanced RSVP and ETA tracking for simpler meeting up.

Apps Made with Flutter – in10 screen make plans
Apps Made with Flutter – in10 screen permission
Apps Made with Flutter – in10 screen event location
Apps Made with Flutter – in10 screen profile

App on App Store | App on Google Play | Website

   

Alexander
Flutter Developer at Droids On Roids

   

Maciek
QA Engineeer at Droids On Roids

We started to learn Flutter because it enables maintaining one codebase for multiple platforms, that’s it, thank you for reading our experience with this framework, see ya! Joking.

Actually, no.

Thanks to Flutter, we were able to create code that saved us a lot of work which needs to be done on both platforms if you go native.

Of course, first, we needed appropriate preparations that included a solid workshop to clarify the aim of our product, establishing the whole spectrum of features understandable to all team members – starting from Product Owner, right up to developers.

I said “in most cases”, because there are some functionalities from native platforms that don’t have a corresponding Flutter plugin yet and everything relies mostly on the effort of the community, companies, and Flutter teams.

This is the main reason why we chose this framework: Flutter is a fresh product with the vigorous community having this energy that is visible in all Flutter related pull requests, articles, videos, and events – from local meet-ups, to huge conferences.

Knowledge about Flutter spreads really fast and is easily reachable, that’s why the learning curve is not that steep. Its accessibility really helped us to get into this project.

Before we start developing commercial Flutter apps, our experienced native developers were able to start developing with Flutter really fast. Why? Android developers are familiar with Dart language that is a mix of Java and JavaScript, while iOS developers, on the other hand, have to come back to semicolons (I know 🙁 ) but they get declarative UI that is now definitely a trend because of the new SwiftUI framework.

In10 app really benefited from Flutter because this application contains a lot of components that look completely the same on both iOS and Android platforms, there is just no reason to double it with two codebases.

There was also a functionality where we decided to go native.

We thought that really complex features need to be done with native code due to the risk of having critical implementation that affects both platforms. It was the ETA (Estimated Time of Arrival) tracking, the crucial feature of in10. It needs to work smoothly and fast.

That would be a huge mistake.

It turned out that authors of the library that we wanted to us to implement ETA, are mainly focused on Flutter. They are interested in updating cross-platform repositories rather than native, which could be experienced by the latest posted issues and releases. At the end, after consultation with them, we completely changed our direction and implemented the whole feature with Flutter. With some troubleshooting and further refinements, we were able to create a reliable mechanism for ETA tracking with Flutter.

To sum up. You just need to give Flutter a try because eventually, you will benefit from it, a lot.


Meeve

app to connect people offline

The app allows users to connect with people nearby through events.

Apps Made with Flutter
Apps Made with Flutter
Apps Made with Flutter
Apps Made with Flutter

App on App Store | App on Google Play | Website

Ishaan Bahal
Co-founder at Meeve

Development in Flutter is a breeze. It’s so much faster than the native code. For businesses thinking of using Flutter – do it. It can reduce development costs by half, because Flutter makes it easy for devs to maintain the codebase for apps running on both iOS and Android.

Starting to write an app with Flutter can be a daunting task at first thought for a few reasons:

  1. Dart. It is a new language which is hardly ever used in the industry, at least no one we knew ever used it for the web. One can admit – it’s kind of pain to learn new languages. But Dart is nicely designed, and anyone familiar with either Java, JS or even Kotlin can pick it up in a few hours with ease.
  2. Coupled code. With Flutter you write code inside the layout you are designing. Since everything is pure Dart and nothing like JSX happening, everything is a widget and highly customisable, which starts to make a mess quite easily. It takes some time and a bunch of tries and errors to understand how to structure your code to keep it readable after 2 days.
  3. It’s new. Anything new cannot be put into production just like that – and people are skeptical of Flutter too. There’s no need for this skepticism because despite Flutter being new it is quite stable for production use. We’ve faced only two types of crashes since the launch, and those were quickly fixed by the Flutter team.
    Overall, Flutter has been a great value for us. We definitely will be sticking to Flutter for the upcoming projects. We are working on one right now and eagerly wait for the hummingbird project to see the light of day to target Meeve for the web too.

n8

app for finding events

The app allows users to meet new people nearby by joining them in real life activities.

top native mobile apps made with flutter
top native mobile apps made with flutter
top native mobile apps made with flutter
top native mobile apps made with flutter

App on App Store | App on Google Play | Website


Photo & video

PostMuse

Instagram story & photo editor

PostMuse is a free photo editor that helps users to create personalised Instastories and Instagram posts. The app contains plenty of free fonts, free images, photo frames, and emojis to pick from.

App on App Store | App on Google Play | Website

Andrei Diaconu
Founder of PostMuse

We see a lot of benefits that stem from using Flutter. Our team has two people, and only one actually codes, but this is more than enough for us to make the progress we needed, both for iOS and Android. We built PostMuse in a matter of months, including research. Considering this is a media editing app, we went to market in record time.

Developing in Flutter is simply magical – everything is nearly instant to reload, complex UIs get built in hours, and the code itself is very easy to read through and maintain. Anyone can write code that a machine understands, only good devs can write code that other devs can understand, and Flutter makes it easy to be a good dev from my experience.

The Flutter team made sure to make development fun, and this includes Dart as a language. Do I miss Kotlin? Yes, to be honest – but I hope to never go back to slow reloads, slow compiles and lots of boilerplate to go along with it.

I wrote a small app in React Native and can say that developing with was fairly fun, but when it comes to complex UI styling, nothing beats Flutter. And when I say nothing, I also mean the native Android and iOS frameworks. I think in some cases the Flutter implementation of Material Design was more on-point than the Android implementation for it. It really is that extensible and powerful, and playing with it for just a few days should make that obvious to anyone.

When is Flutter NOT a good choice? A good example can be any app with very little UI, or apps that have a lot of system integration to do. If you need a functionality and most of the work you will put in will be in Swift or Kotlin anyway, then you should probably just go native. Before you make that decision though, check out Dart Pub because there is a chance someone created a package with that OS-specific code.

Flutter still has a few things missing. A complete and reliable solution for in-app purchases has not emerged yet. If you are worried about this, don’t be – there are a few libraries that solve parts of in-app purchases and you can most likely get the job done. I think everyone wants an official, really good repo for in-app purchases, and the Flutter team is working on it.

If you start a new project, you should definitely consider Flutter. If you have problems, the community will be super helpful. I will definitely use Flutter in all my future projects.


Health & Fitness

Reflectly

mindfulness app

A personal mental health companion. Reflectly is a journal using artificial intelligence to help users structure and reflect upon their daily thoughts and problems.

top native mobile apps made with flutter
top native mobile apps made with flutter
top native mobile apps made with flutter
top native mobile apps made with flutter

App on App Store | App on Google Play | Website

Jacob Kristensen
Founder & CPO at Reflectly

Reflectly was started in January 2017. Fast forward to August 2017 – after an extensive period of user testing – we launched a MVP of Reflectly, built entirely in React Native.

We had a huge issue with the cross-platform compatibility of our UI between iOS and Android. It was actually so bad that we had to initially delay our Android release by 1.5 months to just get everything fixed.

We simply could not output our intended features fast enough, and that was slowing down our business immensely which was frustrating to say the least. So in January 2018, we started looking far and wide, where we came across Flutter.

As a former web and native app developer, getting started with Flutter was truly awesome. I know it’s been said before, but the huge power and productivity you get with instant stateful Hot Reload was mind-blowing to me.

In our case, from the first line of Flutter code that was written in March 2018, until we were finished with the entire app – including an entire redesign and adding a bunch of new features underway – it took only 2.5 months. This included both the learning curve of Dart as well as an entire rewrite from scratch for both frontend and backend – with 0% code reuse from our previous implementation.

Standing on the other side of the rewrite I can hands down say it was the best decision we’ve ever made for our platform. Not only are we able to maintain incredibly fast and extremely confident release cycles, but also we haven’t ONCE had to do a platform-specific implementation.

Our crash rates are down tenfold, and our users are happier than ever.

That being said, Flutter also has its natural shortcomings here and there. One of the biggest for me is the lacking support of being able to compile Apple Watch and tvOS apps out of the box. This requires Bitcode support which Flutter doesn’t have at this time.

So in summation – Flutter is extremely awesome. Soon we’ll be able to support a nearly 100% shared codebase across both mobile and web with Hummingbird being showcased later this year. On the other hand, you should also know your project limitations. Take a look at what your project requires and see if Flutter is a fit. If you do decide to give it a try, I can assure you won’t be disappointed.


Watermaniac

app for tracking drinking water

With Watermaniac users can track how much water they have drunk every day.

top native mobile apps made with flutter
top native mobile apps made with flutter
top native mobile apps made with flutter

App on Google Play | Developer’s website

Artur Rymarz
Creator of Watermaniac, Software Engineer at intive

I had a feeling Flutter might be a big thing in the software industry, and I’m really pleased I trusted myself, and I do not regret a single minute I spent on learning Google’s Flutter.

As a developer, I really enjoyed writing an app in Flutter comparing to React Native which I gave a shot once and disliked it after a few hours. Creating simple and advanced UIs is so joyful I’m thinking about porting the same approach to Swift by creating a library for that.

Flutter is simple to learn so even if in your team there is no single developer specialized in it, the cost of getting training for the ones willing to learn Flutter should be quite low.

I’m not sure about the maintenance costs yet, though. It might seem to be lower in most scenarios, but if one day there is a big iOS/Android update that breaks half of the features we have implemented it might be devastating, especially if there is a lot of dependencies to plugins which authors might abandon. Either way, in my opinion, Flutter is a great choice for startups with a lower budget, although native iOS and Android apps should always perform better (if written correctly), so for apps where performance is critical, I would stick to native solutions (Android app development, iOS app development).


Shopping

Xianyu, Alibaba

m-commerce app

Alibaba, the world’s biggest online commerce company, used Flutter to create a beautiful app experience for iOS and Android on their Xianyu app, which has 50M+ downloads. More than 10 millions users use this app every day.

App on App Store | App on Google Play

Bing Sun
Developer at Alibaba Group

We were immediately intrigued by Flutter possibilities when it comes to UX – including high FPS and smooth UI. But, above all, Flutter was an incredible time-saver. It allowed us to use a single codebase which makes the maintenance of our app much easier and faster.

Because of tens of millions of users we had, we could not build a new app from the very beginning, so we started implementing Flutter features incrementally, incorporating them with our apps. The ItemDetail page – the most crucial, complex and frequently visited section – is run through a single codebase on Android and iOS using Flutter.

On the other hand, we were encountering unprecedented challenges & difficulties, e.g. with Flutter SDK when it was still in beta, or with adding Flutter to existing native projects. We needed to provide a hybrid mode of Flutter and native and ensure supporting tools for efficient collaboration under this mode. We were the first one who did this. At the end of the day, thanks to solving all these problems our team grew up quickly, and thus we have contributed to the improvement of Flutter.

Using Dart and single code to implement pages was different from the old habits we used to have, but we fall in love with it as soon as we tried it out. What else can be more fascinating than seeing results right away while editing your code?

Yep, we like Hot Reload and Dart, which are so easy to get that the front-end developers would ask “Are you sure this is not a Client-side code? They look like Javascript + CSS, I mean even I would like to give it a go!”

In no time, we made elegant pages. Wicked!

Alibaba have published a few articles about their Flutter experience, you can find them on their Twitter. What’s more, Google has created a video about Xianyu app.


HuYu

app for paid surveys & rewards

With HuYu app, users share their shopping data by scanning grocery receipts and giving their opinion in surveys. The data is anonymized for market research. In return, users receive points that can be redeemed for gift cards and vouchers.

Apps Made with Flutter

App on App Store | App on Google Play | Website

Karyn Mukerjee
dunnhumby’s Director of Data Innovation

Flutter played a key role in the HuYu project. We were amazed by the speed in which we got the app to market – it took 16 weeks.

Swav Kulinski
Lead Engineer at The App Business

One of the key changes we noticed was the interaction between developers and designers. Native apps tend to have a long design-develop cycle, and native UI toolkits are more time consuming to use. Specifically, modifying UI once implemented is much more difficult. However, this is no longer true with the help of Flutter.

The main benefit Flutter has over native and React Native is the lack of platform constraints. Flutter is not muzzled by platform UI because it doesn’t use it. It renders everything by itself. You are free to build the best UX without compromise. It is the main difference between Flutter and React Native. React Native delegates drawing to the platform.

This approach has a nice ‘perk’ which comes with owning its rendering pipeline. Native UI toolkits are quite fragmented because of the system versions. For example, Android has introduced many animation frameworks to the SDK over the years. As you try to support older system versions, you learn the hard way that it’s not easy to implement animations which work flawlessly on all versions. You have to degrade the user experience. Flutter doesn’t have this problem as it’s not dependant on the version of the system it’s run on.

Flutter shines the most in projects with very bespoke UI and demanding UX. This advantage will diminish if the focus of the app is not on how it feels and looks. Flutter communicates with the host system using channels. They require implementation in the platform-specific language. For everyday needs like Bluetooth, Camera or Google Maps you will find existing plugins, but for everything which cannot be found in the Dart libraries, you will have to implement your own plugin. Creating one or two integrations is not a massive effort, but when your project requires a dozen, then it might be just not worth it. So, complex integrations with the host platform may diminish the benefits of using Flutter.

We use Flutter currently, and our clients are more likely to hear about Flutter now. Launching 1.0 in December of 2018 was a huge contributor to this. And as we see major players like Alibaba using Flutter, the future looks promising.


Music

Topline

music recording app

The app lets artists record and save their song ideas wherever they are. It was showcased at Google I/O 2018 event. The solution has been recognised by the music industry thanks to distribution platforms like Spinnup or Ditto. “Music App of The Year” and “UX of the Year” at UK App Awards 2018. Designed & developed by Miquido.

Google has created a video about Topline app.

App on App Store | App on Google Play | Website

Paweł Zieliński
Head of Marketing at Miquido

Flutter improved and boosted our app’s development. The creation of the Topline MVP took Miquido ten weeks. Long working hours, extreme intellectual effort, facing unfamiliar issues – it was well worth it! We expand our knowledge immensely during the process.

When we started the development, Flutter SDK was in an experimental Alpha version – which means it wasn’t stable. Even though the design looks really simple, the app structure itself is very complicated. There were plenty of challenges involved, connected directly to the new technology. Fortunately, there were also plenty of cases that the Flutter team helped us solve.

A good point about Flutter is that it has a wide range of widgets which are ready to go, customizable and perform just like you expect them to: they are fast and pretty. One of the most revolutionary features that helped our developers improve faster is the Hot Reload – thanks to this solution, you can notice your mistakes much faster and correct them in the real time. Last but not least, Flutter helps you optimize and build an APK for your release, giving better performance and significantly reducing the file size.

To sum up, creating the app with Flutter was a challenge, but we made it, and we loved it! Flutter itself is showing great potential for implementing business logic for apps, writing UI and SDK’s. However, before it goes as a standard, development community need to appreciate the new SDK and transform it to business value.


Music Tutor

learn to read music app

With the app, users can learn to read sheet music and improve their sight-reading skills. It helps to develop speed and accuracy in reading sheet music by identifying music notes in timed sessions.

apps made with flutter
apps made with flutter

App on Google Play | Website

Bijoy Thangaraj
CEO at JSplash Studios

Thanks to Flutter I was able to bring out the product to the market quickly. I have plans to use this technology for a few of my upcoming projects.

The main drawback of Flutter is that it is widgets based, and not all low-level functions are available as widgets at this point. What is more, currently, there is no drag-and-drop based visual IDE for laying out the widgets. Its all through code as of now.

When it comes to pros of Flutter, it is relatively easy to develop and maintain an app with this technology, because of a single code base. Another advantage of Flutter is that apps made with this technology have native performance.


Entertainment

Hamilton

app for Hamilton musical fans

The official app of the hit Broadway musical – Hamilton. It includes daily lotteries, exclusive news, videos, a trivia game, merchandise store, and much more. Check out the article How the Hamilton app uses Flutter to do more for its fans.

App on App Store | App on Google Play | Website

Google made a video about Hamilton app describing experiences of its developers and project manager:


InKino

showtime browser for Finnkino theatres

inKino is an app made with Flutter that allows users to search for movies and showtimes in Finkino cinemas, see movies details and buy or reserve tickets.

top native mobile apps made with flutter
top native mobile apps made with flutter

App on App Store | App on Google Play

Iiro Krankka
Creator of inKino app, Senior Software Engineer at Reflectly

For my app, Flutter was a perfect choice. I was able to publish inKino within a couple of weeks, to both app stores, after only working on it in my free time after work.

The widgets and developer APIs that Flutter provided were sane, well-thought, and predictable. There was no need for boilerplate code such as list adapters, and everything was nicely documented.

I also quite liked the fact that Dart had support for JIT and AOT builds, so I could Hot Reload and iterate faster on development mode, but still ship a natively-compiled and fast release build when it was time to publish the app.

The only disadvantage I really could think about at the time were that there were not that many resources or established guidelines on how to structure your Flutter apps. There were not bigger open source apps to learn from regarding testing, best practices, architecture, and folder organization either. I came up with a lot of solutions on my own.


Sport

Top Goals

app for soccer fans

Follow your favorite teams live, react to the latest news, create your own polls and more.

top native mobile apps made with flutter

top native mobile apps made with flutter
top native mobile apps made with flutter
top native mobile apps made with flutter

App on App Store | App on Google Play | Website

Victor Bonnet
Creator of Top Goals app, Senior Software Engineer

I have to admit that at first I was skeptical about Flutter, mostly because of the language and the fact that it doesn’t use native widgets. However, with some training and a bit of effort, I quickly became more experienced in building screens. I was highly surprised about the performance and I also loved playing with animations.

Now I am able to build an app with Flutter faster than I would do with native solutions for a single platform. I will definitely use it for my future projects. I am also using it at work for developing prototypes. As a mobile developer I highly recommend Flutter. At least, give it a try.


EntrenaPro

app to finding trainers and sports centres

The app connects athletes with sports coaches and sports centers. It allows users to look for training in their area.

top native mobile apps made with flutter
top native mobile apps made with flutter

App on App Store | App on Google Play | Website

Pedro Moreno
Product Manager in EntrenaPro project, Digital Product Designer

As a non-technical person, I perfectly remember the moment when we decided to choose Flutter evaluating the possibility of creating own components. It sounded risky but fascinating, so our wilder side won and we chose Flutter. We wouldn’t hesitate to do it again.

I strongly recommend any junior developer to play and explore Flutter possibilities before beginning any huge project – even this process of learning can be really delightful.

From my perspective of Project Manager who is into UX Design, I am still missing more communication from the Flutter team to explain other colleagues (Product / UX designers) the numerous possibilities this framework has, and why it is worth to apply Flutter to some ideas (advantages in deploying time, good UI resources, etc.).

I think that new technology and frameworks should be introduced not only to developers community but also to the people who deal with both Design and IT roles every day, so also to visual professionals who should participate in choosing technology and tools.


Finance

Cryptomaniac Pro

cryptocurrencies signal app

The app gives users information about the most accurate cryptocurrency signals, news about cryptocurrency, the service record of the portfolio and more.

top native mobile apps made with flutter
top native mobile apps made with flutter
top native mobile apps made with flutter
top native mobile apps made with flutter

App on Google Play

Ardiansyah Putra
Creator of Cryptomaniac Pro, Mobile Developer at Eunomia International

I can tell everyone that Flutter is a really good choice, it saves a lots of time on development cycle, we could deliver our app to our client within less than 2 months which is 40% faster than development with native SDK as we did before, and certainly without sacrificing quality.

Some advantages of using Flutter that I did not get in other technologies are:

  • Speed in development
  • Performance that feels like native
  • Pixel perfect, we don’t need to worry about how Flutter appears on various devices
  • The security of the source code is maintained because the Dart code will be compiled into native binary

We have finished 4 apps published on Google Play store and we are currently building another app that will be released on March 2019, all of those apps are built with Flutter.


Education

School planner

app for students & teachers

Full-fledged homework management app for students and teachers. Allows users to add information about their timetable, homework, grades, exams, tests, enables sharing notes about them with other students, and set reminders.

App on Google Play

Felix Weuthen
Creator of School planner app

I think every developer should at least take a look at Flutter. It is an excellent opportunity to build more reliable, fast, and beautiful apps. I am not good at designing but with Flutter it is simple.

I started working on the School planner app almost 3 years ago – first with Android Studio and Java, later with Kotlin. It worked well, but when I improved the app, things got more and more complicated. For example, it took around 3 minutes for Gradle to build with the restart of the application.

Last year in February I discovered Flutter and rewrote the app from scratch. I have to say it was the best decision I could have made. It is just amazing that I can reload the app in less than a second. But there are many other great advantages.

One of the biggest is the cross-platform aspect. I can release the same app with the same features to Android and iOS. This is very important for a social app like mine. The networking effect was huge and increased the popularity and downloads rate of the app. In a few weeks, I will reach the 50k downloads in the Play Store with a peak of over 4.000 active users daily. This is a milestone for me.

While Dart as a language itself might have seemed a step backward compared to Kotlin, I still like it way more than Typescript or even Javascript. Dart is simple and logical, and async programming is very intuitive with Futures and Streams. But features like Null-Safety would be very appreciated.


Maps and navigation

Station La Moins Chère

fuel price app

SLMC allows residents of France to quickly check the price of fuel nearby or near the city a user is searching. The app is available only in France.

Apps Made with Flutter
Apps Made with Flutter
Apps Made with Flutter
Apps Made with Flutter

App on Google Play

Simon Gradaive
Creator of SLMC, Web and Mobile App Developer

Building the app with Flutter was a good choice for many reasons. I was able to deliver MVP much faster than I expected and I never had to worry about the performance and fluency of the app. It worked nice from the very beginning, even on budget phones. Debugging was simple, and the integration in Android Studio is nearly perfect.

If you are a React Native developer and hesitate to use Flutter, you should know that the most significant change you can expect is the lack of JSX (or I should say: DSX – for Dart). Dart is intuitive and easy to learn, so it won’t be an obstacle. I didn’t know this language before but after a few days of developing with Flutter, I already preferred Dart to JS.

In summary, I had a very positive experience with Flutter. As much as I like React Native, I will use Flutter for my next projects (if it’s not a game app).


Lifestyle

Pawfect Match

app for animals adoption

Another interesting Flutter app example is Pawfect Match – the app for matching users with homeless animals in their area (UK). It brings together adoptable pets from shelters across the country and gives them the best possible chance of finding their new homes.

App on App Store | App on Google Play | Website


Travel

Flydirekt

app for standby travelers

With this app built with Flutter users can find direct flights all over the world and get availability forecast & loads to prepare for their standby travels.

top native mobile apps made with flutter

App on App Store | App on Google Play | Website


Business

advertising manager app

Another example of an app made with Flutter is the Google Ads app which helps its customers keep their ad campaigns running smoothly on the go. They can view campaign stats, update bids and budgets, get real-time alerts and notifications, call a Google expert or act on suggestions to improve their campaigns.

top native mobile apps made with flutter
top native mobile apps made with flutter
top native mobile apps made with flutter
top native mobile apps made with flutter

App on App Store | App on Google Play


AppTree

enterprise app client

AppTree is an enterprise app client that enables you to use common business app functions such as labor entry, audits, data collection, inspections, requests, workflow and approvals with existing enterprise software data.

App on Google Play | Developer website


Last but not least insight from a Flutter expert

Before we sum up this article, we want to put some icing on the cake. We would like to share with you one final insight from an expert. He is the Founder and President at Very Good Ventures – company that developed a selection of Flutter apps – one being for Hamilton Musical.

David DeRemer
Founder & President at Very Good Ventures

Flutter is absolutely a choice that every CTO or mobile developer should be considering. It is particularly well suited for new apps (i.e., it’s not as good for integrating into existing app projects) that don’t require deep hardware or OS integrations.

First off, most users don’t know that a Flutter app is not fully native. Previous cross-platform frameworks didn’t feel native enough. Flutter’s renderer is very fast and it does not have the same limitations for performance or security that we feel plague other frameworks (looking at you, JavaScript).

Cross-platform solutions have been around for a long time, but Flutter is the first one to do it right. It is not perfect, but it is worth consideration alongside native for all new apps at this point. In our experience, when we compare the pros and cons of Flutter versus native, Flutter wins every time (except games and apps that require unsupported hardware integrations as a core feature).

Since we shipped our first Flutter app, we have only used Flutter ever since. Nobody on my team would rather write an Android app in Java or Kotlin at this point. In fact, they might threaten to quit if we forced them to do so. Flutter is actually fun for developers.

Consider that – not only do you get two apps, but you get it done faster and with a happier dev team. The recent announcement of Hummingbird and Flutter Desktop Embedding is a major game-changer. In fact, we were able to run an existing Flutter app as a desktop Mac app with no code changes in about 10 minutes. That blew our team’s minds as they realized they are all now desktop Mac developers because of Flutter.

The biggest downsides to Flutter are a) platform risk, b) size of the developers’ community. While Flutter is an open-source project, if Google decided to no longer support it, it would be catastrophic. The second issue is the size and experience of the developers’ community. The labor pool is just very small at the moment. Dart is not a very common language, so it doesn’t have the existing developer community that React Native has. On the other hand, the good news is that the community is growing exponentially.

Additionally, Flutter is still very early, and so there are occasionally some bumps in the road and bugs that we find in the framework. But those get fixed quickly, and it has grown leaps and bounds since we originally started working with it two years ago.

In summary, we think Flutter is the future.


Wrap up

As you can see, many of the experts we have interviewed believe that Flutter is the future of mobile app development. Not only can Flutter speed up the development process, but it can also reduce project costs.

That said…

  • If you want to develop an app with minimal UI
  • If your app is specifically designed for just one platform
  • Or if your app requires multiple interactions with an OS

Then, it is probably better you choose native app development.

Still, before you make any decisions, be sure to check Dart Pub as there’s a genuine possibility that someone, somewhere, created a custom package just for you – with your OS-specific code.

Since Flutter 1.0 is announced, it is worth to see by yourself whether it is a good solution for your projects. We hope that the stories in this article will help you come to the best conclusion.

Continue reading about Flutter:

Good luck with your work!

Many thanks to all developers and business owners who contributed to this article.

FREE EBOOK ABOUT FLUTTER

In a 132-page ebook you will find full, original stories by business owners and developers actively working with Flutter

Get Ebook Now

Resources

The post Top Apps Made with Flutter – 18 Stories by Developers and Business Owners appeared first on Droids On Roids.

]]>
https://www.thedroidsonroids.com/blog/apps-made-with-flutter/feed 8
Flutter Project Setup | How to Develop an App with Flutter – Part 2 https://www.thedroidsonroids.com/blog/flutter-project-setup-how-to-develop-app-with-flutter https://www.thedroidsonroids.com/blog/flutter-project-setup-how-to-develop-app-with-flutter#disqus_thread Tue, 18 Feb 2020 08:47:59 +0000 https://www.thedroidsonroids.com/?p=22800 Learn how to build your first app with Flutter. In this part, we show you how to set your project up.

The post Flutter Project Setup | How to Develop an App with Flutter – Part 2 appeared first on Droids On Roids.

]]>

Want to build an app with Flutter? Follow our series “Flutter app development tutorial for beginners”. We’ve published the following posts so far:

  1. Introduction to your first Flutter app development 
  2. Flutter Project Setup – you are reading this
  3. Creating a Home Screen
  4. Styling the Home Screen
  5. Networking and connecting to API
  6. Refining Widgets’ Layer with Provider
  7. Internationalizing and Localizing your Flutter App

What’s more, we’ve also prepared a Roadmap that can be useful in your Flutter development journey:

Whether you want to work at Flutter development company or be a freelancer, this knowledge will help you to become a Flutter developer.

Before we start writing the code of our app, we have to set up the environment.

The first step is to download and unarchive the latest stable release of the Flutter SDK (Software Development Kit) for your operating system. Don’t forget to install dependencies if needed (on Linux and macOS they’re usually available out of the box). Note that building for iOS is possible only on macOS.

It’s all about (the) IDE

The next step in your Flutter application development is to install an IDE (Integrated Development Environment). In theory, IDE is not needed and you can use only the SDK and any text editor for development. However, IDEs provide features like syntax highlighting, code completion, and debugger which are very helpful during the development process. In this tutorial, we will use Android Studio.

Flutter also provides official plugins for IntelliJ and Visual Studio Code. In case of Android Studio and IntelliJ, don’t forget to restart the IDE to activate the newly installed plugins (this is not needed for VS Code). Note that only stable versions of IDEs are supported, the Flutter plugin may not function properly on Beta, Canary, or EAP (Early Access Preview) builds.

Now it’s time to create a new project. On the welcome screen, choose Start a new Flutter Project and select Flutter Application on the next screen.

New Flutter project

On a next screen you’ll need to provide the Flutter SDK path and basic project details.

Configure the new Flutter application

Finally, set your domain name for the package. It’s important for package name to be unique (for signing and publishing purposes). If you don’t own a domain, use com.github.<your login> . Leave the other options set to default values and confirm by clicking Finish.

Set the package name Flutter

Et voilà! Our project is created. Let’s try to build it!

Your key to success: doctor

It’s a good idea to ensure that our environment is set up correctly. First, let’s open the terminal (Alt+F12 in Android Studio) and invoke the flutter doctor  command.

To run the app, we need to have usable Flutter, at least one working IDE, and a connected device (physical or an emulator/simulator).

Android

In the case of a physical Android device, it needs to be connected via a USB cable and have USB debugging enabled (see how to do that in the official developer guide).

In the case of an Android emulator, we need to create a virtual device. First, let’s open the AVD manager by either using the icon on the toolbar or pressing Ctrl+Alt+F12 (Cmd+Alt+F12 on macOS) and typing the action name.

Flutter project setup - Android

Leave default settings on the next screens:

Flutter Android choose a device definition

Flutter Android select a system image

Creating an AVD is a one-off action. Once created, it will be available until explicitly removed.

Now it’s time to run our app! Choose the desired device or emulator and press Shift+F10 (Ctrl+R on macOS) or use the Run button.

Flutter Android setup

iOS

In the case of iOS simulator, we first need to open it using the dropdown device menu:

Flutter iOS simulator

The Xcode installer will prompt you to install the missing components (if there are any). After a while, the simulator should appear and become available on the device menu.

Things are a little bit more complicated in the case of a physical iOS device. Assuming that the device is connected via a USB cable and unlocked (keep in mind the additional key prompt after connecting a cable), we first need to open the iOS module in Xcode:

Flutter iOS setup

Then go to the Signing & Capabilities settings tab and add a new personal team:

Flutter iOS add a personal team

Sign in to your Apple ID (create a new one if needed). After closing the Accounts window, provisioning profiles will be generated.

If you get an error which states that the app identifier cannot be registered like this:

Flutter iOS registration

It means that someone is already using your identifier. You need to change the Bundle Identifier value to something else.

After signing is configured, you can try to run the app from Android Studio. The first attempt will fail because the provisioning profile is not trusted on the device. You need to trust it in Profiles & Device Management settings:

Flutter development project
Note that at the time of writing this article, it’s impossible to run Flutter apps provisioned using (free of charge) Personal Team provisioning profiles on devices running on iOS 13.3.1. It’s a limitation introduced by Apple. You can watch this issue to be notified about progress.

Once the profile is trusted, you can launch the app from the home screen.

Launch

The first launch may take a few minutes because of initializing the emulator/simulator and installing the SDK components. However, it should be almost instant in most cases the next time. Alternatively, you can also use the flutter run  command in the terminal window.

Note that if you are using Linux with kernel 5.5.x, your builds may hang for an infinite period of time due to this Flutter issue: https://github.com/flutter/flutter/issues/49185. This problem is probably caused by another Dart issue: https://github.com/dart-lang/sdk/issues/40589. At the time of writing this article, these are still under investigation.

At this point our app should look like this:

Flutter project setup demo homepage

Let’s click on FAB (Floating Action Button) and see that the counter is changing.

Now it’s time to write some code. Let’s go to the line #21 and change the blue color to something else and use the Hot reload option (Ctrl+\ or Alt+\ on macOS) to apply changes immediately. Note that counter value was preserved.

The best way to source code

It’s a good idea to keep the source code in a repository hosted on some server. It allows other people to work on the same codebase and acts as a backup in case of development machine failures. In this tutorial, we’ll use the git repository hosted on GitHub.

First, let’s create a repository. Go to https://github.com/new, choose your project name and confirm. Don’t tick Initialize this repository with a README option since readme file is already present in the project. We also recommend creating the SSH keypair and registering the public key on GitHub.

Next, we can create a local repository. Use the VCS -> VCS Operation pop up menu option (Alt+` or Ctrl+V on macOS),choose the Create Git repository option, and confirm default location.

Flutter VCS operations

Note that some filenames became red:

Flutter filenames

It means that they aren’t committed (added to version control system) yet. Press Ctrl+K (or Cmd+K on macOS) and check all the files in the pop up window. Write “Initial commit” as the message and confirm. Alternatively, you can type git add -A  and git commit commands in the terminal. You can learn more about git in the official tutorial.

The last step is to push the commit to the remote server. Press Ctrl+Alt+K (Cmd+Alt+K on macOS) and define new remote. In the case of GitHub the URL will be in the form of: git@github.com:<user name>/<repository name>.git  (can be easily copied from GitHub website).

Note that SSH URL will only work when you’re using an SSH key. Otherwise, you need to choose HTTPS URL. Confirm URL and press the Push button. After a while, your code will be available on the remote repo. You can check it online on https://github.com/<user name>/<repository name> . It should look like the reference repository.

Setting up your first Flutter project – wrap up

And with that, we conclude the setup for our Flutter application. I hope our Flutter tutorial for beginners will help you in getting started with your Flutter mobile app development.

Now you can go to the next part of this series which is about creating home screen in your first Flutter app. Good luck!

The post Flutter Project Setup | How to Develop an App with Flutter – Part 2 appeared first on Droids On Roids.

]]>
https://www.thedroidsonroids.com/blog/flutter-project-setup-how-to-develop-app-with-flutter/feed 1
Introduction | How to Develop an App with Flutter – Part 1 https://www.thedroidsonroids.com/blog/how-to-develop-an-app-with-flutter-introduction https://www.thedroidsonroids.com/blog/how-to-develop-an-app-with-flutter-introduction#disqus_thread Sat, 08 Feb 2020 12:24:14 +0000 https://www.thedroidsonroids.com/?p=22997 Getting started with Flutter development. Introduction to our step-by-step Flutter app development tutorial for beginners.

The post Introduction | How to Develop an App with Flutter – Part 1 appeared first on Droids On Roids.

]]>
Flutter, Flutter, Flutter. We can find this word all over the internet, somewhere in Twitter feed or recommended videos on Youtube. Flutter is a great tool from Google for creating cross-platform applications which – starting from the newest stable version – can be deployed to the web, desktop, and mobile.

Google is promoting Flutter as a simple framework that allows us to create quality maintainable solutions. Easy, it is just the next cross-platform framework.

Flutter launched as a project called Sky which at the beginning worked only on Android. Flutter’s goal is enabling developers to compile for every platform using its own graphic layer rendered by the Skia engine. Here’s a brief presentation of Flutter’s relatively short history.

History of Flutter

Flutter – a short history

Flutter is one of the most dynamically developed products for programmers today. That’s mainly because of the huge community Google managed to gather in a very short period of time.

According to Github’s State Of The Octoverse 2019, Flutter occupied the third place when it comes to the number of contributors. Thirteen thousand of contributors is a lot!

Of course, it doesn’t tell much about Flutter’s quality. But it’s definitely a signal that the community wants to participate in developing it. What’s most important, it seems that a lot of developers are willing to use Flutter which I think is a crucial factor for the success of open source projects. Moreover, there are more and more Flutter app development companies on the market.

Many people try their hand at Flutter, and plenty of them are beginners who want to launch a career in IT. That’s why you can find so much content about how to write simple Flutter applications. The learning curve of the technology isn’t that steep since it can serve as a cross-platform solution. Read more about the pros and cons of Flutter.

Why we decided to write some more about Flutter

But if there’s so much content about Flutter on the web, why do we even write about it?

Firstly, because it’s worth to check new things, give them a try, analyze their pros and cons, and draw conclusions for our projects. We’d like to do the same with Flutter.

Secondly, we believe that a lot of content about Flutter lacks depth in its approach to the topic. We can only find simple code samples with a single feature that doesn’t even reveal anything about what exactly this mysterious widget is (and not everything in Flutter is actually a widget).

Such blog posts and articles most often focus on implementing one narrow functionality. And we all know that in real-life projects integration is the key. In our opinion, Flutter can definitely help in creating commercial applications that are easy to modify and maintain. But behind every good project stands a well-planned architecture.

With this thought at the back of our minds, we decided to start a blog post series where we will:

  • show you the most important functionalities of Flutter,
  • dig deeper into its core mechanisms,
  • and share knowledge about more than just how to create the layout of the Netflix app in half an hour.

Our project

We want to create an application that would allow you to get it all and show you the entire process.

We will do it based on an unused application concept with a design provided by our designer, Jakub Lorek.

Project Smoge is an application that informs about the air quality and advises users about a proper time for bike training or jogging. The completion of all of the app use cases allows us to get through the fundamentals of mobile development with our new shiny framework.

We will start with the available tools for Flutter app development process, setting up our project from scratch and then finish with refining the application in terms of UX.

Want to build an app with Flutter? Follow our series “Flutter app development tutorial for beginners”. We’ve published the following posts so far:

  1. Introduction to your first Flutter app development – you are reading this
  2. Flutter Project Setup
  3. Creating a Home Screen
  4. Styling the Home Screen
  5. Networking and connecting to API
  6. Refining Widgets’ Layer with Provider
  7. Internationalizing and Localizing your Flutter App

What’s more, we’ve also prepared a Roadmap that can be useful in your Flutter development journey:

Whether you want to work at Flutter development company or be a freelancer, this knowledge will help you to become a Flutter developer.

The post Introduction | How to Develop an App with Flutter – Part 1 appeared first on Droids On Roids.

]]>
https://www.thedroidsonroids.com/blog/how-to-develop-an-app-with-flutter-introduction/feed 0