The Ultimate Guide to Becoming a Flutter Expert — Part 5: Advanced Flutter Developer Guide to Expert

13 min readFeb 28, 2023

by Isaac Adariku (LinkedIn, Twitter, Website)

This article is part of the “Ultimate Guide to Becoming a Flutter Expert” series, designed to help you grow and develop into an Expert Flutter Developer. In this particular article, you will explore advanced concepts in Flutter such as custom rendering, desktop and web development, and more, discovering how to use them to build better Flutter applications. As an Intermediate Flutter developer, you will be equipped to master these advanced concepts and progress to becoming an Expert Flutter Developer.

This journey towards expertise in Flutter is not a straightforward path, as the saying goes, “The more you learn, the more you realize how much you don’t know”. This is also true for Flutter developers too. As you keep learning, you will realize that there are a lot of things you don’t know and you will have to learn them to be able to build better apps and solve complex problems that will help you and the community to learn and grow.

In case you missed the previous articles, here are the links to them:

👉🏾 Part1 — Getting Started in Tech
👉🏾 Part2 — Thinking of learning or using Flutter
👉🏾 Part3 — Beginner Flutter developer guide to Expert
👉🏾 Part4 — Intermediate Flutter developer guide to Expert
👉🏾 Part5 — Advanced Flutter developer guide to Expert (You are here)
👉🏾 Part6 — Flutter Expert to More Opportunities

With that said, let’s get started! 🚀🚀🚀

Who is an Advanced Flutter developer? 🤔

Look at the warning below ⚠️⚠️⚠️

I/Choreographer(23948): Skipped 590 frames! The application may be doing too much work on its main thread.

Do you have concerns about it, or will you ignore it since it didn’t cause any problems with the app? 😆

I understand that you may have concerns, but since it didn’t affect the app’s functionality, you might choose to ignore it. 😜

So, an advanced Flutter developer is skilled not only in building functional apps but also in optimizing app performance. They constantly seek ways to enhance app performance, minimize skipped frames, and report their findings to the Flutter team.

Sorry for the joke 😂😂😂 — I tend to make light of technical terms.

Let me rephrase — An advanced Flutter developer possesses the ability to build complex Flutter apps with a wide range of features, and troubleshoot complex issues such as advanced rendering and animation, binding Flutter to native code, and more. Additionally, they have a thorough understanding of Flutter’s history and community, enabling them to contribute to the community and mentor others towards growth.

This is precisely what an Advanced Flutter developer is capable of.

Now, let’s delve into what is the actual advanced Flutter concepts and explore how to leverage them to develop better apps.

What is the Advanced Level of Flutter development?

These advanced Flutter concepts may be new to you, but don’t worry — this article will teach you how to use them.

The concepts include:

Understanding Flutter’s history ✔
Creating custom and advanced layouts and rendering ✔
Be comfortable developing for Flutter Desktop and Web ✔
Creating advanced animations and gestures ✔
Implementing Accessibility & Internationalization ✔
Integrating Flutter with native code ✔
Implementing Federated Plugins ✔
Adding Flutter to an existing app ✔
Properly managing apps in production ✔

Let’s begin!

How to Become an Advanced Flutter Developer

It’s worth noting that many Flutter developers at this level prefer to learn through use cases. Due to the complexity of certain concepts, they choose to learn as they go. Therefore, it’s recommended that 60% of your learning is spent on building fun projects, while the remaining 40% should be dedicated to learning the concepts. You’ll encounter plenty of new and challenging topics that you may not use in your professional projects, so it’s essential to learn them in your spare time and apply them through fun projects.

Without further ado, let’s explore some advanced Flutter concepts! 🤩

1. Know the History of Flutter

Understanding the history of Flutter is crucial as it provides insights into the decisions made by the Flutter team and their future plans. Having this knowledge enables you to make informed career decisions and stay updated on the future of Flutter.

Here are some resources to learn about Flutter’s history:

Watch Eric Seidel, the co-founder of Flutter, discuss “Sky” (Flutter’s initial code name) at DartConf and his talk at Strange Loop about Flutter’s potential as the UI framework of the future.
Ian Hickson, another co-founder of Flutter, shares why widgets exist and provide valuable insights into Flutter’s design.
Adam Barth’s talk on Flutter’s rendering pipeline provides a comprehensive understanding of the technology.
The Flutter roadmap outlines Flutter’s future plans.
The Dart language funnel offers a glimpse into Dart’s future developments.

2. Implementing Advanced layout and rendering

To implement advanced layout and rendering in Flutter, it’s important to understand key concepts such as the widget tree, custom widgets, layout algorithms, and custom painting. Flutter is built on top of the Skia graphics library, which provides APIs for creating vector and raster graphics as well as other advanced features.

You remember Everything in Flutter is a widget, and custom widgets can be created to build complex UI elements. The Layout algorithms, including Flex, Stack, and Table, are used to arrange widgets on the screen. Additionally, custom painting with Skia can be used to create data visualizations and other complex graphics.

Here are some recommended resources to help you learn about implementing advanced layouts and rendering in Flutter:

Explore Flutter Community’s blog posts on CustomPainter.
Read Romain Rastel’s blog post on creating your own rendered object.
Check out JideGuru’s open-source project for examples of custom painting and advanced rendering. Don’t forget to follow him on Twitter for more cool updates.

3. Be comfortable with Flutter Desktop and Web Development

If you have been using Flutter for mobile development, you may already be comfortable with it. However, it is essential to note that Flutter is not just limited to mobile app development. Flutter fully supports desktop and web development, which are both available in the stable channel. Therefore, it is time to become proficient in Flutter desktop and web development.

To become proficient in Flutter desktop and web development, here are some fundamental concepts to keep in mind while developing for desktop and web:

Platform-specific code: It is essential to remember that some code is platform-specific when developing for desktop and web. This means that certain codes will only function on one platform and not on others. For example, on desktop and the web, users interact with the app differently than on mobile. On desktop and web, you use the mouse and keyboard to interact with the app, but on mobile, you use touch gestures. So, you must keep this in mind while developing for desktop and web.

UI Layout: Unlike mobile apps, the UI layout of desktop and web apps provides more room for customization. This means that you can design more complex and rich layouts that are not possible on mobile.

Responsive design: While developing for desktop and web, it is important to consider that the app will be used on a variety of different devices and screen sizes. As a result, you must focus on responsive design and ensure that the app looks great on all devices and screen sizes.

Navigation: Navigation is a crucial part of any app, and it is important to keep in mind that the way users navigate through the app is different on desktop and web than it is on mobile. Material and Cupertino navigation will not suffice on desktop and web, so you must customize the navigation to fit the platform.

By mastering these concepts and applying them to developing Flutter desktop and web apps, you will become comfortable and proficient in Flutter desktop and web development. This will enable you to take advantage of the growing demand for multi-platform apps and the opportunities that come with them.

Here are some recommended resources to help you become proficient in Flutter desktop and web development:

Check out the Flutter guide for desktop development.
Use the Flutter desktop codelab to learn how to build a desktop app.

4. Advanced animations and gestures

Advanced Flutter developers are skilled at creating beautiful, engaging, and interactive apps, and one way to achieve this is through advanced animations and gestures.

Marcin Szalek emphasized the importance of maximizing the use of animations in Flutter, which can greatly enhance user experience. During his talk at Flutter Europe — “We only use 10% of our flutter” 😀

Animations

For creating advanced animations, the explicit animation API is the recommended approach, as it allows for complex and highly customizable animations that are visually appealing and performant. The Flutter in Focus series on animation and Doing Animations Right are excellent resources for learning about advanced animations in Flutter.

And I often recommend Marcin Szalek’s talk on Implementing Complex UI, which covers easy ways to get complex animations done.

Marcin Szalek’s Flutter animation implementation

Check out some Animation samples and the staggered animations example from the Flutter Team.

Gestures

When it comes to advanced gestures, the gesture detector widget is a useful tool for detecting basic gestures such as taps, swipes, and long presses. However, to create more customized and intuitive gestures, you will need to go beyond the basic capabilities of the gesture detector widget.

Resources for learning about advanced gestures in Flutter include:

Flutter’s gesture system guide.
Guillaume Diallo’s talk on Understanding Flutter’s handling of gestures at Flutter Vikings.
Jose Alba's article on Handling web gestures in Flutter.

5. Implementing Accessibility & Internationalization

Accessibility and Internationalization are important parts of any app. They allow you to create apps that can be used by everyone all over the world. Implementing Accessibility and Internationalization in Flutter makes your app accessible to people with disabilities and adapts it to different languages and cultures.

Accessibility focuses on designing apps that can be used by people with a wide range of disabilities, including those with visual, hearing, or motor impairments. This involves adding features like high-contrast themes, screen reader support, and text-to-speech capabilities.

Meanwhile, Internationalization involves adapting your app to different languages and cultures, making it easier for users from diverse backgrounds to use your app with ease. This includes identifying text that needs translation, creating message catalogues, and selecting the appropriate locale for the user’s language preference

Flutter’s built-in support for Accessibility and Internationalization makes it easier for you to implement these features in your app, allowing you to create an inclusive and personalized experience that can reach a global audience regardless of their abilities or language preferences.

To learn more about how to implement Internationalization and Localization in your Flutter app, you should check out the following resources:

Flutter’s guide on accessibility and internationalization.
My article on utilizing Flutter’s built-in support for “a11y”.
An article on understanding app localization in Flutter by Caleb.

We are almost there, Let’s Keep Going! 😁

6. Integrating Flutter with native code

You can enhance the capabilities of your Flutter apps by integrating them with native libraries. By doing so, your app can directly access native C functions and data types from your Dart code. Flutter provides a powerful feature called the Dart Foreign Function Interface (FFI), which enables you to connect to C/C++ APIs. This feature can be used to extend the functionalities of your Flutter app and build more powerful cross-platform solutions.

Dart FFI is supported on a range of platforms including Android, iOS, Windows, macOS, and Linux. For web applications, you can use Dart’s JS Interop.

To begin integrating your apps with native C/C++ libraries, you can start by:

Referring to this — Introductory guide for Dart and various platforms such as Android, iOS, Windows, macOS, Linux and web apps(Using Dart’s JS Interop).
Explore the series of sample apps that demonstrate calling the C library from Dart code.
Additionally, you can use the FFI codelab to develop a mobile and desktop app that uses a C library.

7. Build Federated plugins for Flutter apps

Flutter plugins provide a way to add platform-specific APIs to your Flutter app and leverage native platform features. However, the current plugin system has some limitations, including inflexibility and difficulty in adding new platforms to existing plugins. Federated plugins offer a solution to these limitations by providing a new plugin architecture.

So what are Federated Plugins?

Federated plugins allow you to organize and share functionality between multiple plugins, creating modular and reusable code that can be used on various platforms, including Android, iOS, and the web. With federated plugins, you can create a single plugin that works on all platforms, simplifying plugin maintenance and updates.

To learn more about federated plugins, consider the following resources:

Flutter’s federated plugins guide and implementation proposal for historical context.
Source code for examples of federated plugins such as shared_preferences and url_launcher, as well as a sample app demonstrating how to use them.
Watch the Flutter lessons for federated plugins development below

8. Integrate Flutter into an existing app and create a hybrid app

In your professional journey, you may encounter situations where your client or boss asks you to upgrade their existing iOS or Android app to Flutter, but they don’t want to start from scratch. Instead, they want to use the existing app as the foundation for the new app and gradually rewrite it in Flutter.

Before you insist on rewriting the entire app in Flutter, consider whether this approach is practical. In some cases, it may not be. To address this, you can add Flutter to an existing app and create a hybrid app. Using the add-to-app feature in Flutter, you can utilize the existing app’s code and functionality while rendering part of it with Flutter UI and functionality.

To learn more about how to add Flutter to an existing app:

Read the overview guide and limitations.
Check out the currently supported platforms — the Android guide and the iOS guide.
Watch Gonçalo Palma explains how to add Flutter to an existing mobile app with his talk at Flutter Heros.
Explore the add-to-app samples to familiarize yourself with the feature.
Use the method channel typesafe code generator pkg:pigeon to generate add-to-app code.

9. Fly with your Apps in production

After deploying your Flutter apps to any of the various app stores, it’s important to ensure maximum stability and a great user experience. To achieve this, you can learn how to catch exceptions and log errors with Crashlytics from Firebase and use flavors for Flutter to create different versions of your app for different environments.

Crashlytics from Firebase is a powerful tool that allows you to log errors and exceptions in your Flutter apps. It also helps you monitor app performance and gain insights into how users are interacting with your app. By identifying and fixing bugs, you can improve the user experience of your app. Check out Caleb Jesussegun’s article on why Crashlytics is important for Flutter apps.

To learn how to log errors and exceptions with Crashlytics from Firebase:

Read the guide on how to integrate Crashlytics with your Flutter app.

Product flavours for Flutter is another feature that lets you create different versions of your app for different environments. This allows you to have a version for development, staging, and production, which helps to prevent bugs from being released to production and ensures that the right version of the app is being used in the right environment.

To learn how to use product flavors for Flutter:

Read the Flutter Team’s guide on how to create flavors for Flutter.
Check out Andrea’s tutorial on setting up Flutter flavors with multiple Firebase environments using FlutterFire and Very Good CLI.

The End! 😄

And with that, we’ve come to the end of our discussion. However, before we part ways, here are some bonus tips 🚀 to help you take your Advanced Flutter skills to the Next Level.

Bonus Tips 🚀

🚀 — Hack the Flutter source code

Dive deeper into Flutter source code, by hacking the codebase. You will gain a deeper understanding of how Flutter operates, allowing you to fix bugs and issues. Begin by cloning the repository and carefully reading through the codebase. This way, you will be better equipped to contribute to the Flutter SDK by improving documentation, adding new features, and fixing bugs.

To become a contributor, start by reading the contribution guide, and make sure to watch the repository to receive notifications of new issues that arise.

🚀 — Community! Community!! Community!!!

Collaboration is key to the success of Flutter, and the community plays an essential role in driving the project forward. One way to get involved and meet other Flutter enthusiasts is by joining or creating a Flutter meetup in your area. This is an excellent opportunity to network, learn from others, and inspire new developers to join the community.

Becoming a Google Developer Expert (GDE) is another fantastic way to showcase your expertise and knowledge in Flutter. As a GDE, you’ll have the chance to connect with other experienced Flutter developers, gain more opportunities in the Flutter community, and share your skills with others. To learn more about becoming a GDE, you can check out Pooja Bhaumik’s article and talk.

🚀 — Attend and Follow Flutter Events (Conferences and Meetups)

Make sure to stay up-to-date with Flutter events, such as conferences and meetups happening worldwide. Attending or following these events online is a great way to expand your knowledge, connect with other developers and stay inspired.

In addition to upcoming events, don’t forget to check out previous conferences and meetups as they often contain valuable content and insights from other Flutter developers.

Here are some of the Flutter events you can attend or follow online:

Keep an eye 👀 out for announcements and updates on social media, community forums, or the official Flutter website.

Conclusion

In conclusion, it’s time to take the knowledge you’ve gained and share it with others by inspiring them with fun Flutter projects. Share your creations on social media and tag @FlutterDev, @nlycskn, @craig_labenz, and me @AdarikuIsaac. You can also showcase your skills by creating an actual Flutter app and uploading it to the Its All Widget catalogue.

But remember, learning Flutter is an ongoing process, so keep exploring and stay curious.

💙 Happy Fluttering! 💙

I hope you found this article helpful and informative!

In the last part of this series, I will explore what it takes to become a true Flutter expert and how to leverage this status to unlock more opportunities within the Flutter community and beyond.

I look forward to having you join me for this exciting conclusion! 🤩

👉🏾 Part6 — Flutter Expert to More Opportunities

Help contribute to this article by:
📢 Spreading it with your friends, family, and colleagues.
👏🏾 Tapping the clap button below to show your appreciation and motivation.
📝 Sharing your thoughts and inquiries by leaving a comment below.
➕ Follow me on Medium to receive notifications when I release new articles.
😍 Connecting with me on Twitter and LinkedIn and I would be delighted to provide assistance.

Every day is another opportunity to gain Mastery! 💙 — Isaac Adariku (Eternity)