OK. So let's start. Um I hope everyone is having a great day. Uh Let me introduce myself. First, I am Anna mobile development expert, passionate about quality software from Ukraine. I am Google developer expert in Dart and Flutter. And I recently became a women tech makers ambassador.

I have eight years of experience in cross platter mobile development and I have been dealing with blatter for work and leisure for over three years. Now, I currently work as a senior staff mobile engineer in a fintech company called Tide. And I'm here today to talk about flatter.

According to the official website, Flutter is an open source framework by Google for building beautiful natively compiled multiform applications from a single code base. By the way, uh from time to time you'll see some useful links just in case you decide to dive deeper into the topic.

Flatter was started a few years ago now with the idea to change up development, it combines the iterative development model of the web with hardware accelerated graphics rendering and pixel level control that were previously a privilege of games over the last four years since first flatter releases the flatter team has gradually built on these foundations, adding new framer capabilities and new U I components, deeper integration with the underlying platform, a rich library of packages and many more performance and to improvements, all of which increases development productivity and robustness.

Flatter was built to revolutionize the development. It is an open source toolkit uh supported by Google for building beautiful and fast user experiences. For any platform. It is fast with hardware accelerated graphics, regardless of which platform you are deployed to. And with pixel level control over UU I flatter gives you the ability to create beautiful tailored highly branded experiences. It is built to decrease the traditional edit compile, deploy debug cycle and instead offers productive support for iterative life coding where developers can just put through load changes without restarting that. And finally, flatter lets you write to your eye with a single shared code base, whether you're targeting a web mobile or desktop. So it's portable. So with flutters, teams and companies no longer have to ask what platforms they are targeting. Instead they can focus their effort and energy on their idea and their creativity. If you're a company shipping a product for multiple platforms, you do not have to run at the speed of the lowest steam anymore. Instead all of your engineering resources can be focused in building amazing experiences on all platforms you are targeting with Flatter, you can target six distinct platforms out of the box is and Android mobile and desktop web browsers, windows, macos and Linux. To understand how this portability became possible.

I'd like to talk about each of these platforms, desktop web and mobile for starters. Let's take a look at flatter architecture for windows stable support for which was announced in the last release on top. You see the flatter framework, it is the layer developers typically interact with.

It is a reactive E I framework providing a rich set of BS layouts and foundational libraries. Below it, you see the Flatter engine, it is the core which supports a lowest level primitives necessary for all flatter applications including input graphics and text rendering subsystems.

The engine is blood for agnostic presenting a stable application binary interface that provides a platform embed with a way to set up and use flutter. And finally at the bottom, there is a platform embed which is the native operating system application ZX as a glue between flatter and the host operating system. If you Google flat architecture, you will see a lot of images similar to this one framework and engine layers are always the same and it is the embed the changes from platform to platform. So windows and flutter communicate through an embedded layer that hosts the flutter engine and is responsible for translating and dispatching windows messages flatter coordinates with windows to paint your U I on the screen handles events like window resizing and DP I changes and works with existing windows modalities for internationalization such as input method editors, just as with the support for Android and I OS.

The Windows implementation of Flatter combines ad framework and C++ engine at Google IO. Last month in U Flatter major release was announced Flatter three which brings a stable support for Maco S which means you can now build beautiful custom experiences. And if required, you can also build that fully um avoiding Maco S system look and feel with a special Maco Su I package. And now you can sign your executables so that users don't get warnings about untrusted publishers. A few words about Apple silicon, it is a new processor architecture installed in Apple's latest hardware. Flatter has just worked on Apple Silicon since day one through Rosetta uh which is a software that enables a Mac with Apple Silicon to use apps built for Mark with Intel processor.

But now in native support has been announced when using those machines as your development environment, you'll no longer need to rely on Rosetta when analyzing or compiling code for flatter ups. And it was also announced that Flatter supports building both X 64 and A RM 64 binaries.

Previously flatter could build apps that run on Apple silicon only through a Z translation. Now, however, this is the K liver squad compiled ply for AM 64. So your users can get the speed and stability expected from well made applications with letter three. Also stable support for Linux was announced. Canonical are the organization behind about one of the most popular distributions of Linux UB bantum. So Canonical and Google are collaborating to offer the best highly integrated options for development. Adding a platform uh support requires more than just rendering pixels.

It includes view inputs and interaction models, compilation and build, support, accessibility and internationalization and platform specific integrations. So there is now a suite of packages that had tailored U I and integration with system services as well as comprehensive CMNU I components set for Yaru which is the Ubuntu Lo and Hill. OK. Moving on to the web stable support of Flatter for was announced back in 2021 with Flatter two major release. While the general architectural concept applies uh to all platforms that flatter supports. There are some unique characteristics of Flatters web support that are worth sick of comment.

Dart is a programming language used in Flatter development. So Dart has been compiling two javascript for as long as the language has existed with a tool chain optimized for both development and production purposes because the Flatter framework is written in Dart, compiling it to javascript was relatively straightforward.

However, the Flatter engine written in C++ is designed to interface with the underlying operating system rather than a web browser. A different approach is therefore required on the web. Flatter provides a reim implementation of the engine on top of the standard browser API S.

This is the web version of the architectural layer diagram. Perhaps the most notable difference compared to other platforms that we saw previously is that there is no need for flatter to provide a dark front time. Instead the flatter framework along with any code you write is compiled to javascript, OK, Android and is uh mobile platforms were the first ones targeted and supported by flatter. I took this screenshot from the official website and I think it perfectly describes the advantages of developing mobile applications with flatter. It allows you to reach your users on all platforms including mobile devices. From day one. It also allows you to have one team of professionals with shared expertise in one language art and in one framework platform as opposed to having two teams of native developers and it allows releasing to both platforms simultaneously and reach feature parity for the best experience for all users.

Even though mobile platforms support is the oldest in the framework. The latest Flatter three release also had some new features like support for fold doubles devices and materials, three U I components. The latest, the latest flight release largely completes the work for material design free, allowing developers to take advantage of an adaptable cross platform design system that offers dynamic color schemes and updated visual components. OK? I want to show you something cool.

This year at Google Ion, they presented a breathtaking case study, a great example of how flatter enables beautiful experiences meet the super listed desktop application. Super List provides supercharged collaboration through an application that combines lists tasks and free form content into a to do list and personal planning.

The Super List team selected Pfizer for its ability to deliver a fast highly branded experience. According to Super List co-founder and the head of design. When starting Super List, they us they wanted an amazing design, flawless user experience and an app that felt consistent across devices and operating systems. It quickly became clear for them that flatter was the right foundation for their text with that focus on amazing design that they had in mind. It was critical to have full control over every pixel on the screen. It doesn't matter if it is a static page or animation. Their aim was to make the product delightful and engaging and flatter was the framework that allowed them such a granular control over screens and provided great out of the box animations as well as easy to use mechanism for creating custom ones. Now I quote flatter enabled them to do things they would have never tried in any other platform and help them to create a knob that felt familiar yet special. It was important for them to be cross platform from from the start today. They have a mac desktop application released to beta and they are actively building Windows Android and is support always in the same flutter code base. Isn't that inspiring? All right, I will now share another example, much simpler in terms of U I.

But yet showing the productive developer experience flatter can be done on any desktop operating system. Here, I have the development environment set up on my Macbook. In terms of ID E, you can use VS code Android studio, Intel idea or even build flat applications from the console.

Here you see my personal preference, Android studio, additional tools for native development need to be present on the machine. If you plan to develop for is and Mac Os, then you need X code installed for Android development, you need Android SDK, et cetera. I have a real life uh Flatter project open here. I recently gave a technical talk at Flatter Global Summit and used this application as an example of advanced networking layer implementation in Dart and Flatter. It downloads some data and presents it in a list here. You see folders for all platforms. Android is Linux mac Os web and Windows. Inside of those you will find native applications wr wrapping the flutter code. And there is also a leap a folder where the flatter code is written as well as test a folder where tests for it are here, you see a main file open with just some example of a dark language. You will find Dart uh very similar to many programming languages. And overall it's easy to learn here. I have a list of devices. I can run this application on my machine and I actually have it already running on multiple platforms. So here is the Android and here is the is simulators running. You see the applications look kind of the same but yet slightly different. Check this out on Android. We have a nice over scroll effect with ripple which is typical for material design.

And on I OS, we have bouncing uh feedback which is typical for Cupertino style. Also look at the AAR title it's pinned to the left on the Android and centered on the I OS. So flatter follows some of the typical operating system patterns out of the box. But it also gives you the granular control over all pixels on the screen. So you can customize the title. It has the same position on all platforms and there is also uh ma's desktop version running. You can see uh when the application is in focus, there is even the native menu on top. The nice thing about developing desktop app is that you can easily check all sizes and all form factors of your applications in a single run. And I also have a web version running. Uh Let me show something cool here. I'm going to change the my ankle location to purple. Now I click hot, reload all devices and voila. Um All the applications has immediately reacted to the change and I didn't have to recompile and redeploy my application and the state of the screen was preserved. The cool thing about that is that it supports both just in time and ahead of time compilations. So when developing it is very fast enabling hot reload and when the release time comes, the applications are getting compiled which ensures their stable work in production. Hopefully you've gotten a peek at what flight or developer experience can be like. Now you might think. OK, Anna, I'm sold.

How do I start? Well, the last year I also spoke about flatter at Women Tech Network Global Conference and already shared a bunch of useful links as well as additional information about flatter its architecture principles and also some case studies. So go check it out. Also, I suggest to check out the written workshop from boring to beautiful and the recorded video session from Google Ion where two Googlers take all the steps from this workshop and also comment on the content. Additionally, check out the official website, have you flattering.