Flutter App Development Guide: Challenges, Best Practices, and Case Studies

Over the 12+ years of my software development career, I’ve worked with various cross-platform frameworks and have come to understand that each technology has specifics that you need to be familiar with to launch a product successfully. 

As soon as Flutter was introduced in 2017, we at MobiDev immediately started working with it, addressing the needs of our customers. This resulted in about 80% of the cross-platform products developed by MobiDev being built using Flutter. 

So, this guide draws on our 6+ years of experience to provide valuable insights and success stories from our customers, empowering you on your Flutter app development journey.

IS FLUTTER GOOD FOR YOUR APP DEVELOPMENT?

Flutter provides truly rich cross-platform capabilities. Its flexibility allows you to cover a wide range of business cases. Let’s overview the most common Flutter use cases including mobile, web, and desktop app development, as well as converting existing iOS and Android apps to Flutter, using Flutter for MVP development, and some specific Flutter limitations for AR and wearables products.

But before we start, it’s worth remembering that Flutter, like any other technology, is only a tool. So using it doesn’t automatically guarantee your success. Much more important is the experience of engineers who will be able to match your business needs with tech capabilities and find the optimal solution for your specific case. This is exactly the approach we follow at MobiDev.

1. FLUTTER FOR CROSS-PLATFORM MOBILE APP DEVELOPMENT

Flutter for cross-platform mobile app development is commonly used in three cases:

1. If you need to develop a mobile app within tight deadlines. Like most cross-platform solutions, Flutter allows you to have a single codebase for all chosen operating systems. Based on our experience, this speeds up the development process by an average of 30%.
2. If you need to test a concept. For example, when business requirements are dynamically adapting to the market. We had a case where the client addressed us with the proof of concept solution for iOS and Android. Having no documentation, but a focus group, he aimed to test the app’s concept before building a full-fledged system. We suggested Flutter as an optimal solution allowing him to change the app’s logic dynamically.
3. If you need an app with a complex custom design. Flutter is particularly well-suited for projects that require a high degree of customization and complex animations. It also provides a fast development cycle and can be easily integrated with other technologies and third-party services.

DEVELOPMENT RECOMMENDATIONS

To achieve a consistent UX/UI across all screens and platforms, you should stick to Flutter’s widget tree structure. This involves establishing parent-child relationships between widgets and defining their position, size, and behavior in the user interface. When a widget’s state changes, Flutter effectively updates only the relevant widgets in the tree, rather than updating the entire UI. This helps optimize performance and maintain a responsive user interface.

You should keep in mind that Flutter works best if you’re developing an app with the same or very similar design for both iOS and Android. If you want to follow the guidelines of the Apple and Google stores more closely and create apps for each platform with very different designs, it will increase the development time and require more effort.

Roman Markov

Native/Flutter Team Leader

MOBIDEV CASE STUDY #1: DESIGNING A MOBILE CRM FOR THE LANDSCAPING INDUSTRY

We’ve been working with Landscape Management Network Inc. since 2019 starting from the client’s request to create a mobile app for both iOS and Android and integrate it into the existing infrastructure. The app had to cover a part of the existing web functionality to help landscape contractors manage their leads and clients more efficiently. 

Project goal: Build a mobile version of the existing web CRM system

Industry: Landscaping

Cooperation model: Dedicated Development Team

Team composition: PM, QA, Flutter engineer, UI/UX Designer

How we delivered: 

1. Started with tech strategy creation. The tech consulting stage allowed the client to form a clear scope of work, prioritize features, and break down development into milestones, which made it possible to optimize the budget and switch to the fixed-price model.
2. Delivered the app within strict deadlines. The client had clear deadlines for the release of the first version of the application. Therefore, when choosing a technology, we focused on the speed of development of each option to meet the client’s needs. Flutter became a great choice and allowed us to release the first version of the product within 3 months. 
3. Implemented complex CRM logic on mobile. The application was developed as a mobile version of a web product, so the team had the task of transferring all the complex logic of the CRM system with the ability to manage jobs, track contacts, create estimates, send invoices, etc. on mobile platforms.

The system has a large number of roles with criteria for these roles which needed to be conveniently displayed in the mobile application. Flutter’s built-in capabilities, such as style management and UI tools, made it easier and faster to implement this logic. 

Using Flutter our development team created a multifunctional cross-platform application that allows users to experience the same wonderful experience as when interacting with the web version. At the same time, we significantly saved time on development because Flutter provides the same UX on iOS and Android.

Volodymyr Vysotskyi

Flutter/JS Developer

The result of our cooperation is a powerful SaaS solution that helps landscape contractors manage and build profitable businesses. We continue to work with Landscape Management Network Inc. to develop and support LMN products. 

2. FLUTTER FOR APPS WITH NATIVE-DEPENDENT FUNCTIONALITY

With the continuous expansion of native plugins, Flutter enables the development of mobile applications for iOS and Android without requiring deep knowledge of the native part. However, the existing plugins don’t cover all usage scenarios. For example, if you need to customize the camera, which is not provided by the ready-made plugin, you will have to make changes to the native parts of this plugin. This requires the involvement of iOS/Android developers. 

At MobiDev, we have mobile developers who combine knowledge of both native and cross-platform technologies, so we can take on project tasks of any complexity and cover your needs within the framework of one team.

It was a pleasure to work with Navid Falconer, the Camino Product Owner who was deeply involved in the activities planning, task prioritization, and results review. You can check out the outcomes of our cooperation in the full case study below. 

A year ago, I decided to turn my simple little Spanish audio course into a mobile app. My initial vision of what it would be, and what it’s actually turning out to be are miles apart, and that’s a great thing. This is very much because of the brilliance and intelligence of the team that I have worked with at MobiDev. Thank you for all your work. I hope you find it rewarding.

Navid Falconer

Camino Product Owner

3. CONVERTING EXISTING APPS TO FLUTTER

Many businesses are recognizing the strategic value of migrating their native apps to Flutter. At the time, such an approach was used, for example, by Alibaba Group and Philips Hue which helped them fasten the development cycle and improve app UX. 

The main motivation for converting iOS and Android apps into a cross-platform environment for business owners is to streamline the process of product support and further development by eliminating the need for different mobile development teams. This is especially beneficial when your Android and iOS apps have similar logic. Moreover, this approach provides greater flexibility to target new platforms or devices in the future with minimal developer effort. 

There are three strategies to migrate existing native iOS/Android apps to Flutter:

1. Adding Flutter library or module to native apps. This way you can add new features in Flutter without disrupting the current development process and embed them into existing native apps. However, you should remember that this strategy requires native app development expertise on your team.
2. Adding native app parts as a part of the Flutter project. Following this strategy, you’ll need to create communication channels to pass messages from native to Flutter and back. This can increase code base complexity but allows a smooth transition without interrupting ongoing development.
3. Rewrite native apps completely. With this strategy, you won’t need to configure communication between native and cross-platform projects and you’ll get the most complete access to Flutter features. However, this requires a dedicated Flutter development team and time to completely rewrite the applications.

Choosing the optimal strategy depends on many factors, including the architecture of existing applications, native feature dependency, the customer’s budget, etc. In any case, converting a native app to Flutter requires careful planning that includes defining the scope, prioritizing the features to migrate, and building a development team with relevant expertise, including both Flutter and native experiences. Also, it’s extremely important to have a proper QA strategy to mitigate issues during the migration process and ensure an intuitive user experience.

4. FLUTTER FOR WEB APP DEVELOPMENT

Since the Flutter code can be compiled into Webassembly for better security or better performance in complex design cases, it’s possible to have the same codebase for Android, iOS, desktop, and the web version of an app. From our experience, Flutter is the best fit for web applications in the following cases:

• When porting some mobile apps into the web because of almost 100% code sharing
• When having complex and unusual web interfaces (like editors, IDE, etc.)
• When it’s required to create extensive functionality for complex enterprise solutions within a short time

DEVELOPMENT RECOMMENDATIONS

Flutter’s capabilities for web application development are still in the early stages and may not be suitable for all cases. Stability issues can arise, and it may not be the best choice for websites where SEO or content sharing on social networks are priorities. So if you need these functionalities you should consider using workarounds or external libraries.

Common challenges and best practices for web development using Flutter include the following:

• Lack of Hot Reload

Flutter Web doesn’t support Hot Reload, which allows developers to see changes in the code almost instantly without restarting the application. However, you can still use Hot Restart instead, which allows you to see changes in your code after restarting the app but losing its state.

• Browser Compatibility

Flutter Web supports most modern browsers like Chrome, Firefox, Safari, Edge, etc., but there may be some variations in performance and behavior. Therefore, when converting your app to the web, be sure to thoroughly test it in different browsers and ensure that it meets web accessibility standards.

Also, Flutter doesn’t support some browser APIs, such as geolocation, camera, and microphone. Furthermore, Flutter Web has limited compatibility with browser history, bookmarks, and deep links. To incorporate these functionalities, you may need to utilize platform channels or plugins that facilitate interaction with native code or JavaScript.

• Performance

The file size of Flutter web applications can be larger than traditional, which can negatively affect overall performance, especially on slower network connections. You should use optimization techniques like code splitting, spanning tree, caching, pre-caching, service workers, and more to improve the loading speed of your web application while reducing its file size.

MOBIDEV CASE STUDY #3: SCALING A PROJECT MANAGEMENT APP FOR THE WEB 

In 2021, when Flutter just added web support, we already had a client ready to test its capabilities. It was an innovative company developing solutions for effective project management. The client had a cross-platform application built with Flutter and wanted to scale it to the web platform. 

Flutter Web perfectly met this business need, although it required additional effort from the development team.

Project goal: Build a web version of the cross-platform mobile app

Industry: Services

Cooperation model: Dedicated development team

Team composition: PM, business analyst, QA, Flutter engineer, back-end engineer

How we delivered: 

1. Conducted tech and business analysis to make sure Flutter could cover all the requirements, and determine possible risks and ways of mitigating them. As a result, we created a clear development roadmap divided into 8 Milestones to resolve step-by-step technological challenges and achieve the client’s business goals.
   
2. Adjusted existing code to the web. At the time of working on the project, the possibilities of Flutter Web were very limited, so the development team often had to write new custom modules to implement the business logic embedded in the mobile version. The plugins that were used for mobile didn’t always support the web. Therefore, we had to do a lot of work with the existing codebase, including a redesign of some screens.
   
3. Ensured the same UX for web and mobile. It was the fundamental task of the project and at the same time the most challenging part. Flutter Web lacked some functionality, so developers created a custom library for navigation and additional solutions to reproduce the normal behavior of the web. For example, by default, reloading the page crashed the entire operation of the app, which was unacceptable for such a feature as a time tracker.
   
4. Provided a high level of performance and security. Performance on the web is much more sensitive than on mobile and this required additional efforts from the development team to ensure its high quality. We had to refactor the code of the mobile application to adjust it to the web. This made it possible to improve the speed of loading pages and executing requests.

Despite the limited capabilities of Flutter Web a few years ago, the choice of this technology for the above-mentioned project was justified, because it was much faster and safer to use the same codebase. Our experience has helped us eliminate all the challenges and assisted the client in reaching their business goals. Today, Flutter Web is constantly improving, and while it’s still not always the best choice, it covers a large number of cases, including non-standard ones.

Anton Klimkin

Flutter Developer

5. FLUTTER FOR MVP DEVELOPMENT

Flutter is an excellent option for MVP development due to its unique features that enhance developer productivity. For example, with the mentioned Hot Reload, modifications in the code don’t require a complete app restart, which allows developers to quickly see the effect of their changes and quickly refine the code.

As Flutter’s widgets are immutable, only the screens being actively worked-on undergo the reloading process. According to our calculations, this efficient approach can potentially reduce development time by approximately 30%.

Watch the MobiDev demo to see an example of how Flutter’s capabilities can reduce the development cycle.

Flutter boasts a wide-ranging ecosystem of plugins that offer supplementary capabilities. However, it’s worth noting that not all plugins may receive robust support or remain compatible with the latest Flutter version. Consequently, it’s crucial to meticulously assess and test third-party plugins to ensure their seamless functionality in MVP. If you have experienced Flutter engineers on your team, they can quickly and efficiently get this work done.

6. FLUTTER FOR DESKTOP APP DEVELOPMENT

Flutter allows you to scale your app for Windows, macOS, and Linux and use platform-specific APIs and native desktop ecosystem libraries. However, your development team may need to put in extra effort to replicate all the features of your mobile app on the desktop.

Transitioning from a mobile to a desktop UI requires careful adjustments. Desktop applications often involve distinct interaction models, with precise mouse control and extensive keyboard input. Adapting a mobile UI to the desktop environment requires reevaluating navigation patterns, control sizes, and layout structures to ensure they seamlessly integrate within the desktop context. 

MOBIDEV’S SUSTAINABILITY PRODUCT BUILT WITH FLUTTER

We also used Flutter to develop our in-house product Recycling Assistant, which serves as an interactive waste sorting guide and is one of the examples of MobiDev sustainability initiatives. The application is based on artificial intelligence, and when you point the camera at an object, it gives hints on how to properly dispose of it. 

Flutter combined with Firebase was chosen as the optimal tech stack for accelerating the release of an application for iOS and Android at the same time, without having to write code separately for each platform.

7. LIMITED FLUTTER CAPABILITIES FOR SOME USE CASES

It’s important to realize that any technology has limitations that can affect scalability and growth. Therefore, it’s essential to verify if choosing Flutter is the right decision for your project. 

Let’s take a closer look at the cases when developing Flutter applications is associated with additional challenges.

AUGMENTED REALITY (AR) SOLUTIONS

Augmented reality (AR) engines function differently depending on the platform, and Flutter can’t guarantee platform-independent logic. For AR app development, building separate native applications can offer advantages in terms of productivity, cost-effectiveness, and maintenance. This approach ensures a more streamlined development process and better compatibility with platform-specific AR engines, enabling optimal performance.

Flutter also has limitations for certain cases, such as creating web games, due to its 2D nature and performance degradation when used with many moving objects. The upcoming Flutter 4 release will introduce a new rendering engine for 3D models, potentially addressing these limitations.

WEARABLE, APPLE/GOOGLE CAR

Although it’s still not possible to create an app for platforms like WatchOS, and Apple/Google Car using Flutter, we can find some creative solutions. For example, we can easily build a Flutter app and connect it to a native WatchOS app. If the main focus of the application is on WatchOS, native development will likely be more appropriate, but in scenarios where this is not a key feature, such a solution is possible.

If you need help creating a tech vision for your product, planning an effective architecture, and developing an optimal development roadmap, you can turn to our tech consulting services. 

USE MOBIDEV’S FLUTTER DEVELOPMENT EXPERTISE TO MEET YOUR BUSINESS NEEDS

Flutter’s demand in the market leaves you with several options for hiring engineers. You can build an in-house workforce, delegate development to a software provider, or go for a hybrid approach. 

At MobiDev, we offer several cooperation options to meet your immediate needs and provide long-term value. If you’re looking for experienced engineers to augment your in-house development team, our Flutter developers can seamlessly jump in at any stage of product development and work under your supervision. At the same time, we can provide you with a dedicated team of cross-functional specialists who take full responsibility for product delivery and quality. 

Whether you require tech consulting to determine the optimal solution, assistance with ongoing development tasks, or support in bringing your product to market, we are well-prepared to meet your needs and help you achieve your business goals.

Learn more about cooperation options and how you can accelerate the development process by hiring our Flutter Engineers or a Dedicated Development Team of cross-functional software experts. Feel free to reach out to us using your preferred method of communication.