Flutter: What? Why? How? Where?

Automatic Summary

Understanding Flutter: A Comprehensive Guide for Developers and Organizations


Hello everyone! I'm Anna Da Ma, a Google Developer Expert in Dart and Flutter. Today we’ll deep dive into understanding what Flutter is, its distinctiveness in the tech ecosystem and why it should possibly be on your radar as a technology solution for your company.

Flutter at a Glance


According to the flutter.dev website, "Flutter is Google's UI toolkit for building beautiful, natively compiled applications for mobile, web and desktop from a single codebase.”

But what exactly does that mean? Flutter SDK is a modern React-style framework that includes a rich set of UI components implementing Material Design and iOS Cupertino styles. It incorporates an optimized, mobile-first 2D rendering engine to the underlying operating system.

Applications developed in Flutter are packed similarly to other native applications – they're compiled into 32 bit and 64 bit ARM machine code for iOS and Android, Javascript for the web, and Intel X64 for desktop devices.

Think of it as a one-code solution for a versatile set of platforms.

What Is Unique About Flutter?


Firstly, it avoids the performance issues associated with cross-platform frameworks by minimizing abstraction over the underlying UI library. This increases performance as there is less interaction between the framework and the platform UI code. This offers a product that runs as smoothly as native apps.

Secondly, Flutter offers unlimited extensibility. Designers and developers have the freedom to expressively design the UI without restrictions, making flutter a design-centric solution.

Why You Should Consider Flutter

  1. Flutter for Aesthetics: Flutter has its own implementation of UI components, meaning developers are not limited to extensions provided by the system. Moreover, Flutter implements platform-specific adaptations where required.
  2. Fast and fluid: Flutter is designed to support glitch-free, high speed performance on any device.
  3. Portability: The architecture enables a single codebase to be used on multiple platforms, saving on development costs.
  4. Productivity Booster: With features such as hot reload, designers and developers can iterate quickly without needing a full recompile or restart.
  5. Open-Source: While Google is a leading contributor, many technology giants such as Toyota, Sony, Samsung, and Microsoft have also contributed towards the growth of Flutter.

However, it's important to note that deep earth web experiences like SEO-optimized pages and deeply immersive augmented reality may not necessitate Flutter.

How to Get Started with Flutter


Flutter development can be accomplished on any OS. The Flutter SDK comes with command line tools allowing for development in any text editor. However, for a pleasant, productive development experience, use Android studio, Visual Studio code or Intellij Idea with Dart and Flutter plugins.

Flutter in Action: Who’s Using It?


Now, as for who's using Flutter, the answer is simple: many big players. Over 200,000 apps use Flutter in the Google Play Store alone. Some notable examples are:

  • Google Pay, which after adopting Flutter, reported a 35% decrease in codebase size, 20% increase in productivity, and 90% per engineer decrease in tech debt.
  • Toyota, which partnered with Flutter for their vehicle infotainment systems.
  • ByteDance, the company behind TikTok, which increased the speed of shipping new apps by 30% with Flutter.

Overall, Flutter offers a compelling case for developers wanting speed, aesthetics, and portability. This guide has only scratched the surface of what Flutter can do, so feel free to explore more and have your own "fluttering" experience.

Reaching Out


Have questions or comments? Feel free to visit the Flutter dev website or reach out and connect with me on LinkedIn or Twitter via 'Anna Da Ma' handle. Have you Fluttering!


Video Transcription

Hello, Ian, I'm Anna Da Ma. I am a mobile development expert specializing in cross platform frameworks like Zimmern and Flatter. I'm also a Google developer expert in Dark and Flutter.Currently, I work as a senior mobile engineer at Tim Go and so there excitement about this technology Flutter as you might have get from the talk title, we are going to address several specific questions. What Flutter is, why you should consider it as a technology choice in your company or why not, how you can start incorporating it into your projects and look at the companies where it is already successfully applied. But first, I'd like you to meet Dash. There is a mascot for the Flatter framework and the dark, which is used in flight or development today. This will show us some style and will help me answer these questions. Oh, and just in case if it wasn't clear from the first glance dash is the heir. So let's start from the beginning. What is Flatter according to the flatter dev website, Flatter is Google's U I toolkit for building beautiful natively compiled applications for mobile web desktop and embedded devices from a single code base. What does it mean? Flatter SDK is a modern React style framework which includes a rich set of U I components, implementing material design and IOS Copertino styles and heavily optimized. Mobile first two D rendering engine to the underlying operating system.

Flutter applications are packaged in the same way as any other native application. They are compiled to 32 bit and 64 bit em machine code for A S and Android, javascript for the web and Intel X 64 for desktop devices. Flatter apps run on this variety of platforms with little or no change to a single code base using a single programming language dart. And finally, Flatter is a Google's product. Although Google is not the only one contributing to it. What makes flatter so special and if latter is a cross platform framework, then how can it offer a comparable to native apps performance? Well, cross platform frameworks typically work by creating an abstraction layer over the underlying native U I libraries struggling to work around inconsistencies of each platform representation of what is written in one language which then interacts with the native system libraries written with another language to display U I.

This adds an overhead when there is a lot of interaction between U I and the up logic. By contrast, flatter minimizes those abstractions by passing the system U I widget libraries in favor of its own widget set. This approach has several benefits. It avoids a significant performance bottleneck by allowing flatter to composite the entire scene at once without transitioning back and forth between flatter code and the platform code. It decouples application behavior from any operating system dependencies. The application looks and feels the same on all versions of the operating system, even if it change the implementation of its controls and it provides unlimited extensibility. This way, designers and developers can create expressive and flexible y where nothing limits their imagination.

I hope it's now clear and how it is unique and we are now ready to move on to our next question. Why you should consider it as a technology choice in your company. Well, I have at least five reasons for you. Flatter allows building beautiful. Y as I mentioned, Flatter has its own implementations of he I control rather than using those provided by the system. For example, there is a pure d implementation of both the is switch control and the Android equivalent. And actually any variant of the speech control can be created as developers are not limited to the extension points provided by the operating system. At the same time, Blatter has platform specific adaptations where it is required like scrolling, physics, text editing, typography or page navigation, flutter is fast.

It is architected to support glitch free gree graphics at the native speed of the device. It is powered by scan the same hardware accelerator to the graphics livery that supports chrome and android, the dark code that paints lighter visuals is compiled into native code which uses ska for rendering. As I've explained previously. Flatter user interfaces are built laid out composited and painted by flatter itself. Flatter performs one layout operation per frame during layout. The only information that flows from parent to child are the constraints and the only information that flows from child to parent is the geometry.

This way layout algorithm works in the single part. There are also optimizations aiming to process only the part of the screen that needs it ensuring that only dirty U I elements and a limited part of the sub tree around them are visited during layout. Flatter is portable. Traditionally, when building apps, the first decision you have to make is where my app is going to run with light. You can start with experience you want to create and then ship it to any device you want to target. Here is how it is achieved. This is a simplified schema of flatter architectural layers. Typically developers interact with flatter framework. It is a reactive U I framework providing a rich set of widgets layouts and foundational libraries. Flatter engine is a core which support lowest level primitives necessary for all flatter applications including input graphics, text rendering subsystems. The engine is platform agnostic presenting a stable application binary interface that provides a platform embed with a way to set up and use platform.

And finally, the platform embeded is a native OS application that acts as a glue between flatter and the host operating system. Flatters decay already includes platform embeds for Android, IOS, Windows, Mac Os and Linux. And it's also possible to create a custom platform embed like Toyota did for their cars. Infotainment system. Also using the embed flatter code can be integrated into an existing native mobile application with a feature called add to app Flutter is productive. One of the flatters main advantage is that it saves engineering resources by letting developers create apps for all these platforms with the same code based. Also flatter development experience is great. The majority of the flatter framework itself is built with the same language that we as users work with D A. So there is no need to for switching when you want to check out the framework or the vs implementation. Latter offers state for hot reload for mobile and desktop applications allowing developers to make changes to the code and see the results instantly without needing a full recompile, restart or losing each state. This means developers can quickly iterate on a screen deeply nested in the app without starting from the home screen. After every reload. Flier comes with visual behavioral and motion rich wis implementing material design guidelines. Yes, Cupertino styles.

So designers and Flutter developers can speak the same language and finally Flutter is open sourced. While Google is the primary contributor, a broader ecosystem grows around Flatter Toyota canonical Sony Samsung Microsoft surface team are contributing to a greater user experience on their platforms and devices.

Flatter has a massive community support with thousands of contributors adding to the core framework and extended the packages ecosystem. There are now over 15,000 packages for Flatter and Dart from big companies like Amazon, Adobe Huawei, Alibaba, ebay and square individual developers to recap flutter is beautiful fast, portable, productive and open source. Hope I have managed to wake up some curiosities to the framework and you add flatter to the list of options for your next project or we'll consider it as a technology choice for the next iteration of an existing product. Now, a few words on why you may want to choose another framework. For example, not every web page would make sense in flutter. It is perfectly suited for centric experiences like progressive web apps, search engine, optimized pages like blogging platforms is not a strong flatters point for now or if you are building a deeply immersive augmented reality experience, I'm not saying it is impossible in flatter, but using it won't be as beneficial as for other products.

Also, you should look at your current team experience and strengths if it makes more sense to qualify them for another cross platform framework, go for it. All right. Moving on to the next question for today. How exactly it is done? Platter development can be done on any operating system. Flatter DK comes with common line tools which allows development of flatter apps in any text editor. But of course, having syntax highlights and con completion makes development experience much more pleasant and productive.

The most common common approach is to use Android studio, visual, studio code or intelligent idea with dark and flatter plugins. And DARPA is an online code editor for dark language. In addition to executing regular dark programs, it can run flatter programs and show graphic output.

Flatters decay also contains packages and tools for testing, debugging and profiling apps. A suit of performance and debugging tools called Flatter deaf tools is actually written in flatter. So where to start with slattern development for someone who is already a mobile developer.

Flatter documentation contains a great section explaining what are the flatter equivalents of entities familiar for Android I OS react native Xamarin and web developers. I remember this was the first flatter resource I read when switching from Zer in the and for complete newness, there are great dark and flatter videos, code, labs, tutorials and recommended courses. Sounds encouraging to me. Now, I'd like to share a few examples of projects that are using Flatter. Overall, there are already over 200,000 apps using Flatter in the Google Play Store alone like wechat my BMW and grab a recent mobile developer study shows that Flatter is now the most popular framework for cross platform development. With 45% of developers selecting it in the last 30 days.

More than one in eight of the new apps in the Play Store are built with Flatter within Google. Flatter is used in more than 30 teams. And by over 1000 of engineers, these apps that you see here are already shipping using Flatter. One of the largest app amongst them is Google Pay. The product is implemented on two platforms, Android and is launched in over 30 countries. 150 million plus users monthly. It had two code bases of total 1.7 million lines. They faced feature disparity because feature are implemented at a different rate. And the adv accumulated twice faster. After weighing pros and cons, they had decided to rewrite everything using flatter as a result, they ended up with 35% smaller quad ways. Engineers became 20% more productive in terms of new features implementation and the tech debt went down 90% on a per engineer basis because of their right. They were also able to merge all the duplicate release process experimentation, the launch process and security reviews.

And now all engineers are working on the same code base which gives engineering efficiency boost. I am quoting the vice president of engineering for Google pay. If I had to go back, I would absolutely make this decision all over again and I would recommend it to any team that it builds on multiple platforms. Another example is Toyota, the world's biggest selling automaker, Toyota is partnering with Flatter to bring a best in market digital experience to vehicles by building infotainment systems powered by Flatter. According to the chief engineer at Toyota Motor, North America, flatter immediately caught their attention for a number of reasons. Flatters rendering engine provides good performance in a constrained environment and features like ahead of time compilation, give the consistency they've been looking for in an innovative technology first from touch mechanics feels right no matter where they run flatter developers experience, even though they target a single platform, they have leveraged the flatters advantage of multi platform support desktop support with hot reload enabled fast development workflow support of mobile devices such as android and is tablets was useful for all sorts of physical and digital user testing and the web support improved field by cycle with product designers, U as in flatter to create a tighter overall in their design and engineering processes, faster iteration cycles allowed to collect and integrate feedback earlier and more often which helped create the best customer experience by the company behind Tik Tok is using flatter in more than 70 apps.

Switching to flatter has allowed them to ship new apps and features 30% faster. The flatter development team at BMW group is one of the world's largest after Google, bringing together a total of 300 employees at New Bank. They decided to use flatter as the main technology for mobile development found flight or development experience to be superior with better hot reload capabilities. Very strong official documentation and a more stable api, Tencent, ebay, Grab Alibaba group, the New York Times have apps created with flatter.

You can check the flatter death show case section for even more examples of successful flatter applications. And this was the last topic for today to recap. We've talked about what is flatter and how it is special, why it might be worth giving it a chance in your product, how flatter development is done and where to start and saw some examples of companies that already use flutter in production. If you have any doubts about the flatter left, feel free to visit Flatter deaf website, especially as the showcase section. If you are a developer, check out his documentation, code labs and a guide to getting started as well as videos and online courses. And if you simply like the cute dash transformations like we saw today, it's called Dash Atar and you can visit Dash Atar dev web app to create your own personalized dish. By the way that website is employed web framework. If you are interested in an example of a quality of web apps that can be created with Flatter also, feel free to reach out and connect with me on linkedin or Twitter via on the message handle. Have you flattering?