1. What is Flutter?
Flutter is Google's open source UI toolkit, which helps developers to efficiently build multi-platform beautiful applications through a set of code bases, supporting mobile, web ([early access][]), desktop and embedded platforms.
Flutter aims to help developers create high-performance applications comparable to native ones, and complies with the different scrolling behaviors, typographic layouts, and icon styles of each platform.
This is a sample application called Gallery. 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.
No mobile development experience is required before starting development. The application is developed using Dart. If you have ever used Java or JavaScript, then Dart will look familiar. The experience of object-oriented programming will undoubtedly help development, but even if you are not a programmer, you can make Flutter applications!
2. Why use Flutter?
What are the advantages of Flutter? It can help you:
high efficiency
-
Try to modify the code and reload while the application is running (via hot reload)
Fix the crash and continue debugging from where the app stopped
Develop iOS and Android applications with a single code base
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 beautiful, highly customized user experience
-
Benefit from the rich Material Design and Cupertino (iOS style) widgets built with the Flutter framework
Achieve customized, beautiful, brand-driven design, not limited by the collection of OEM widgets
3. Core Principles
Flutter includes a modern responsive framework, a 2D rendering engine, ready-made widgets and development tools. These components work together to help you design, build, test, and debug applications. All of this is organized around a few 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 display of the final user interface. Different from other frameworks and platforms-separate other attributes such as views, view controllers, layouts, etc. Flutter has a unified object model: widgets.
A widget can be defined:
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)
and many more……
Widgets form a hierarchical structure through combination, and each widget is nested in it, inheriting attributes from its parent node. 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 interaction, by telling the framework to replace one widget with another in the hierarchy. The framework will compare the old and new widgets and update the user interface in time.
3.1.1 Combination is greater than inheritance
Widgets themselves are often composed of many small, single-purpose widgets, which can be combined to produce powerful effects. For example, it Container is a commonly used widget, which consists of several widgets responsible for layout, drawing, positioning, and size. Specifically, Container is made LimitedBox, ConstrainedBox, Align, Padding, DecoratedBox and Transform widgets composition. You can combine these with other small and simple widgets in novel ways instead of subclassing Container to generate custom effects.
The class hierarchy is shallow and broad to support as many combinations as possible.
You can also control the layout of a widget by combining other widgets . 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. These layout widgets themselves have no visual performance. On the contrary, their only purpose is to control the layout of another widget in certain aspects. To understand why a widget is presented in a certain way, it is often helpful to look at its neighboring widgets.
3.1.2 The layered cake is very delicious
The Flutter framework consists of a series of layers, each layer is built on top of the previous layer.
The upper layer of the frame will be used more frequently than the lower layer. For the complete set of libraries that make up the Flutter hierarchical framework, please refer to our API documentation.
The purpose of this is to help you do more with less code. For example, the Material layer is constructed by combining basic widgets in the widgets layer, while the widgets layer itself is built by combining low-level objects from the Rendering layer.
These levels provide many options for building applications. Choose a custom method to unleash the full expressiveness of the framework, or use the building blocks in the widgets layer, or mix and match. You can combine the ready-made widgets provided by Flutter or use the same tools and techniques that the Flutter team used when building the framework to build your custom widgets.
No content can escape 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.2 Build widget
You can build() define the characteristics of a widget by completing the 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 may have a constructor that returns some horizontal layout text and various buttons. The framework will recursively build these widgets until it reaches the lowest level, fully concrete widgets, and then stitch them into a tree.
The construction function of a widget should have no side effects. Whenever it is called, the widget should always return a new widgets tree, no matter what it has 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 enables high-performance interactive applications. The build function is designed to simplify the code by focusing on declaring the composition of the widget instead of dealing with the complexity of updating the user interface state.
3.3 Handling user interaction
If the characteristics of a widget need to be changed 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 the value changes, you need to rebuild the widget to update the UI.
These widgets inherit from StatefulWidget(not StatelessWidget) and store their mutable state in State a subclass.
Whenever you manipulate a State object (for example, increment a counter), you must call a setState() method to notify the framework to update the user interface by calling the State's construction function again. For an example of state management, you can view the MyApp template generated with any new Flutter project.
Separating the state from the widgets object allows other widgets to handle stateless and stateful widgets in the same way, without worrying about losing state. Different from maintaining state by maintaining a child node, the parent node can freely create child node instances without losing the persistent state of the child node. The framework will do all the work of finding and reusing existing state objects in due course.
4. Try it!
Now that you are familiar with the basic structure and principles of the Flutter framework, and how to build applications and make them interactive, you are ready to start development and iteration.
(1) Try Flutter layout basic tutorial (no need to download Flutter or Dart)
(2) Install Flutter SDK ( Linux , Windows and macOS )
(3) View Flutter tutorial (cookbook)
Link: https://flutter.cn/docs/cookbook
(4) Try some Flutter examples
Link: https://github.com/flutter/samples/blob/master/INDEX.md
(5) Try some Flutter codelabs
Link: https://flutter.cn/docs/codelabs
(6) Try these Flutter tutorials
Link: https://flutter.cn/docs/reference/tutorials
(7) Check out our Widgets introduction document
(8) Check out these Flutter technical videos
Link: https://flutter.cn/docs/resources/videos
5. Get support
Flutter is open source, and we encourage open dialogue, but we need to read our code of conduct.
Ask and answer other developers’ questions on Stack Overflow
Online discussions with Flutter engineers and other developers on Discord (recommended) and gitter
Discuss the best practices and application development of Flutter in the mail group of flutter-dev.
Follow and subscribe to flutter-announce mail group to get information about changes to the Flutter framework
Submit bugs, new feature requests, documentation issues suggestions, etc. on GitHub
Follow us on Twitter
@flutterdev