In this video, I'm going to discuss what goes on under the hood when you create apps with Flutter and how it's different from other approaches.
Nowadays, many apps need to run on multiple platforms, like iOS, Android, and the web. That's why Google made Flutter--
our UI toolkit to build beautiful native apps from a single code base without compromising on quality, speed, or performance.
Let's take a look at how this is possible. Flutter renders your app itself, rather than letting the platform do so. This means your app is super fast and responsive and can run on whatever platform you'd like.
There is never any bridge or context switch needed to go between your app and the platform. All that Flutter requires of the platform is a canvas in which to render the widgets so that they can appear on the device screen, and access events, like finger taps, and to services,
like the camera and geolocation. Let's look at how this contrasts with other ways to build for different platforms. One option is to build a separate app for each platform, which it often involves a separate team for each codebase. In this system, your code can directly call the built-in platform UI elements, but each codebase will be in a different native language. And your teams will need to ensure consistency between the feature sets in each codebase as the app grows. Another approach across platform development uses only one codebase, but it involves either WebViews, in which your app creates HTML and displays it
in a web view on the platform, as you can see here, or building a bridge from code in a common language, like JavaScript, to those native UI components, like buttons and menus. Whenever you access UI elements, which could be as frequently as 60 times a second with actions like swipe animations and transitions, your app's code has to communicate through a bridge, which may have performance implications. As I mentioned before, Flutter eliminates the bridge and moves your rendering into your app.
Internally, Flutter consists of a framework built with Dart and a rendering engine built mostly in C++.
Because everything in the top region is Dart, you get a complete stack trace for better debugging, and you can access and change anything
in all levels of the framework if you want to. With Flutter, everything you see on the screen is called a widget. A widget can define a structural element, like a button or menu, a stylistic element, like a font or color scheme, and even an aspect of layout, like padding.
Let's take a look at some Flutter code. As you can see, the UI is built by composing widgets in the reactive style.
Here's what this code produces. By making use of the functional reactive programming style, Flutter can be efficient in determining which
parts of your UI have changed. This lets you make changes to your app's data and leaf Flutter to efficiently rebuild the app.
Flutter also comes with a rich collection of premade material and Cupertino widgets that can be customized so you do not need to make widgets from scratch.
That Flutter code you were looking at a second ago is written with a programming language called Dart, which is the secret sauce to a great developer experience. Dart is a special language in that
it can be both just-in-time compiled, or jitted, and also
ahead-of-time compiled. Jitting enables a lightning-fast development experience with a feature called hot reload, which allows you to see your code changes in less than a second. When you're ready to release your app to the world, it can be ahead-of-time compiled, which means your app will be fast and responsive for your users. You can get the best of both worlds. So in summary, Flutter allows you to achieve full control
over the entire rendering stack, giving you the ability to create beautiful, customizable widgets, the advantages of reactive use with no bridge, great developer tools with hot reload, thanks to the ability to jit Dart code, fast, smooth, and predictable UI, since Dart code can compile ahead-of-time to native machine code, deployment to multiple platforms with one codebase, and a really fun coding experience. Flutter is free and open-source, so visit flutter.dev today to give it a try.
0 Comments