Shulou(Shulou.com)06/02 Report--

This article mainly introduces "what is the core principle of Flutter". In daily operation, I believe many people have doubts about what the core principle of Flutter is. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubt of "what is the core principle of Flutter?" Next, please follow the editor to study!

1. What is Flutter?

Flutter is Google's open source UI toolkit that helps developers efficiently build beautiful multi-platform applications through a set of code bases that support mobile, Web ([early access] []), desktop and embedded platforms.

Flutter aims to help developers create high-performance applications comparable to the original, and comply with different scrolling behavior, layout, icon styles, etc., on each platform.

This is a sample application called Gallery, and Gallery is a collection of Flutter sample applications that can be run immediately after installing Flutter and configuring the environment. Shrine has high-quality scrolling pictures, interactive cards, buttons, drop-down lists and a shopping cart page.

There is no need for mobile development experience before starting development. Applications are developed in Dart, and Dart will look familiar if you have ever used the Java or JavaScript language. Experience in object-oriented programming will undoubtedly be helpful to development, but even programmers can make Flutter applications!

two。 Why use Flutter?

What are the advantages of Flutter? It can help you:

high efficiency

Try to modify the code and reload it while the application is running (through hot overloading)

Fix the crash and continue debugging from where the application stops

Using a single Code Base to develop iOS and Android applications

Even on a single operating system, you can write less code and do more by using modern, expressive languages and declarative methods

Prototype and easy iteration

Generate a beautiful and highly customized user experience

Benefit from the rich Material Design and Cupertino (iOS style) widget built with the Flutter framework

Achieve customized, aesthetic, brand-driven design that is not limited by OEM widget collections

3. Core principles

Flutter includes a modern responsive framework, a 2D rendering engine, off-the-shelf widget, and development tools. These components work together to help you design, build, test, and debug your application. All of this is organized around several core principles.

3.1 everything is Widget

Widget is the basic building unit of Flutter application user interface, and each widget is closely related to the final display of the user interface. Unlike other frameworks and platforms, which separate other attributes such as views, view controllers, layouts, and so on, Flutter has a unified object model: widget.

A widget can define:

A structural element (such as a button or menu)

A style element (such as a font or color scheme)

An aspect of the layout (such as padding)

Wait a minute...

Widget combines to form a hierarchy in which each widget is nested and inherits attributes from its parent. There is no separate "application" object in Flutter, and the corresponding functions are undertaken by root widgets.

You can respond to events, such as user interactions, by telling the framework to replace one widget in the hierarchy with another. The framework will compare the old and new widget and update the user interface in a timely manner.

3.1.1 combination is greater than inheritance

Widgets itself is often made up of many small, single-purpose widget that combine to produce powerful effects. For example, Container is a commonly used widget, consisting of several widget responsible for layout, drawing, positioning, and size. Specifically, Container is made up of LimitedBox, ConstrainedBox, Align, Padding, DecoratedBox, and Transform widgets. Instead of subclassing Container to produce custom effects, you can combine these with other small and simple widgets in novel ways.

The class hierarchy is shallow and broad to support as many combinations as possible.

You can also control the layout of a widgets by combining other widget. For example, to center a widget, you can wrap it in a Center widget. There are also widgets for setting spacing, alignment, rows, columns, and grids, which have no visual representation themselves. Instead, their sole purpose is to control the layout of another widget in some way. To understand why an widget is presented in some way, it is often helpful to look at its proximity to the widgets.

3.1.2 layered cake is very delicious

The Flutter framework consists of a series of layer structures, each of which is based on the previous layer.

The upper layer of the framework is used more frequently than the lower layer. Refer to our API documentation for the complete set of libraries that make up the Flutter hierarchical framework.

The goal is to help you do more with less code. For example, the Material layer is built by combining the underlying widgets in the widgets layer, while the widgets layer itself is composed of low-level objects from the Rendering layer.

These levels provide a number of options for building applications. Choose a custom method to release the full expressiveness of the framework, or use the building blocks in the widgets layer, or mix and match. You can combine the off-the-shelf widgets provided by Flutter or use the same tools and techniques that the Flutter team uses to build the framework to build your custom widgets.

Nothing can get out of your sight, so you can benefit from a high-level, unified widget concept in terms of productivity without sacrificing your ability to go deeper.

3.2Building widget

You can define a feature that widget has by perfecting the build () function, which returns a widget tree (or hierarchy). The tree represents the widget part of the user interface in a more specific way. For example, a toolbar widget might have a build function that returns some horizontal layout text and various buttons. The framework recursively builds these widget until it reaches the lowest fully representational widgets, and then splices them into a tree.

A widget builder should have no side effects. Whenever called, widget should always return a new widgets tree, no matter what it previously returned. The framework carefully compares the previous build with the current build and determines what changes need to be made to the user interface.

This automatic comparison is very effective and can achieve high-performance interactive applications. The builder is designed to simplify the code by focusing on declaring the composition of the widget rather than dealing with the complexity of updating the user interface state.

3.3 handle user interaction

If the characteristics of a widget need to change based on user interaction or other factors, then the widget is stateful. For example, if a widget contains a counter that increments as the user clicks a button, the value of the counter is the state of the widget. When this value changes, you need to rebuild the widget to update the UI.

These widget inherits from StatefulWidget (not StatelessWidget) and stores their mutable state in a subclass of State.

Whenever you manipulate a State object (for example, an increment counter), you must call the setState () method to tell the framework to update the user interface by re-calling the State builder function. For an example of state management, you can view the MyApp templates generated with any new Flutter project.

Separating state from widgets objects allows other widgets to handle stateless and stateful widget in the same way without worrying about losing state. Instead of preserving state by maintaining a child node, the parent node is free to create instances of the child node without losing the persistent state of the child node. The framework does all the work of finding and reusing existing state objects at the appropriate time.

At this point, the study of "what are the core principles of Flutter" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.