Flutter framework introduced:
Flutter is Google's mobile UI framework, we can quickly build high-quality native user interface on iOS and Android. Flutter can work with existing code. In the world, Flutter is being used by a growing number of developers and organizations, and Flutter is completely free, open source. It is also building the future of the main ways Google Fuchsia applications.
Flutter assembly constructed using modern response frame, which is from React inspiration obtained, the central idea is to build your UI with components (widget). Element describes the way in which given their current configuration and status display. When the state change component, the component will reconstruct its description (Description), will be described before Flutter contrast, the render tree to determine the underlying transition from the current state to the next state changes to the minimum required.
-------Baidu Encyclopedia
Flutter seemingly very recently saw the way the fire and decided to learn a science, as something new, not many online tutorials, but fortunately there is, technical fat production tutorials or learn a school's worth ........
Programming tools VSCode, Flutter environment configuration based on step by step tutorial settings like, skip here .........
The first Hello World program
Take a quick write a simple structure, the interface contains only two parts, the contents of the blue bar strip and middle of the screen area of the head of the order. (See below Code)
This code is written in the 根目录\lib\main.dartdocument, which is Flutter master file.
import 'package:flutter/material.dart';//导入material风格的包
//主函数（入口函数）
void main() {
runApp(MyApp());
}
//声明MyApp类继承-StatelessWidget：具有不可变状态(state)的Widget(窗口小部件).
class MyApp extends StatelessWidget{
//重写build方法
@override
Widget build(BuildContext context) {
//返回一个material风格的组件
//MaterialApp:代表使用纸墨设计（Material Design）风格的应用
return MaterialApp(
title: 'Welcome to Flutter', //title ： 在任务管理窗口中所显示的应用名字
//Scaffold:实现了基本的 Material 布局,可以理解为一个布局的容器
home: Scaffold( //home ： 应用默认所显示的界面 Widget
//创建一个显示在界面顶部的一个AppBar，并添加文本
appBar: AppBar(
title: Text('Welcome to Flutter'),
),
//body:当前界面所显示的主要内容
//在主体的中间区域，添加一个Hello World
body: Center(
child: Text('Hello World'),
),
),
);
}
}After writing open terminal input: flutter run Run
Note that the code knowledge:
1, Dart syntax Function Function
Dart is object-oriented languages, even if the function is the object, and belongs to the object of type Function. This means that functions can be assigned to a variable or passed as parameters to other functions. Of course, you can also like JavaScript, like calling a function.
For example, we write in row 3 Hello World, it is a function.
void main() =>runApp(MyApp());Because the body of the function, only one line of code, it can be used directly =>to omit {}only the function body only when his party, before they can use, or use the braces.
(Ps: learning the syntax you have to remember a Dart, Dart where everything is an object, including numbers and function .......)
2、StatefulWidget和StatelessWidget
- StatefulWidget: Widget (widget) has a variable state (state), that is, you can change at any time when the application in use, such as our common progress bar, along with the ever-changing schedule. State (state) is the synchronization information can be read and may change during the life cycle Widget when building Widget. Widget's responsibility is to achieve in the state changed by State.setState . Immediate notification state, when the user interface portion of your described object itself does not depend on the configuration information and wherein the member is inflated BuildContext , the stateless useful widget . For the combination can be dynamically changed, for example due to the driving state has an internal clock, or depending on the state of certain systems, consider using StatefulWidget . StatefulWidget instance itself is immutable, and stored in a state variable createState independent process creates a state object, or stored in the state of the subscription subject, e.g. Stream or ChangeNotifier objects, which are stored in the reference StatefulWidget the final field in itself. The framework simply call a StatefulWidget invokes createState , which means that if the widget has been inserted into a plurality of positions in the tree, then multiple StateObjects may be associated with the same StatefulWidget association. Similarly, if StatefulWidget removed from the tree, when the tree was later inserted again, the framework calls createState then create a new national goal to simplify the life cycle status of the object.
- StatelessWidget: immutable status widget, that is, you can not change in use, such as fixed text (after the write in there, does not become a dead). Stateless widget is a widget, it is to be more specifically described by constructing a series of other user interface widgets, such that a portion of the user interface description. Build process continues recursively until the user interface is fully described specifically (e.g., entirely RenderObjectWidget composition, which describes the specific RenderObject ). When you describe the user interface portion is not dependent on the object itself, and wherein the configuration information is exaggerated member BuildContext , the stateless widget useful. For the combination can be dynamically changed, for example due to the driving state has an internal clock, or depending on the state of certain systems, consider using StatefulWidget . Stateless widget constructs usually only called in the following three cases: the first widget is inserted into the tree, first change its configuration and the second parent in the widget InheritedWidget when it depends to change. If a parent widget widget configuration changes on a regular basis, or if it relies on inherited widgets that change frequently, so optimization of building performance of the method in order to maintain smooth rendering performance is very important.
The HelloWorld code window inherits immutable member StatelessWidget.
3, VSCode how hot load
Flutter with VSCode write bad thing is to be loaded manually update the application, at least personally feel this will reduce the operating efficiency of 10%.
When we run flutter runafter, there will be a red letter tips, description of the things we can do.
To hot reload changes while running, press "r". To hot restart (a
nd rebuild state), press "R".
An Observatory debugger and profiler on Android SDK built for x86 is
available at: http://127.0.0.1:64590/
You can dump the widget hierarchy of the app (debugDumpApp) by pressing "w".
To dump the rendering tree of the app (debugDumpRenderTree), press "t".
For layers (debugDumpLayerTree), use "L"; for accessibility (debugDumpSemantics), use "S" (for traversal order) or "U" (for inverse hit test order).
To toggle the widget inspector (WidgetsApp.showWidgetInspectorOverride), press "i".
To toggle the display of construction lines (debugPaintSizeEnabled),
press "p".
To simulate different operating systems, (defaultTargetPlatform), press "o".
To display the performance overlay (WidgetsApp.showPerformanceOverlay), press "P".
To save a screenshot to flutter.png, press "s".
To repeat this help message, press "h". To detach, press "d"; to quit, press "q".We look at a few of focus:
- r button: Click thermal load, it will be reloaded.
- p key: Show Grid, this can be a good grasp of the layout, the work is useful.
- o Key: switching the preview mode android and ios.
- q key: Exit preview mode debugging.
4, Scaffold Layout Control Introduction
Scaffold Material achieve the basic layout. As long as the layout of the control elements defined in the Material single interface display, can be used to draw Scaffold. And provides a showcase drawers (drawers, for example: the left column), notice (snack bars) and the bottom button (bottom sheets). We can Scaffold understood as a layout container. We can draw the user interface in this container.
Scaffold main Property Description :
appbar: a display interface AppBar top.
body: The main contents of the current screen is displayed.
floatingActionButton: a defined function buttons in the Material.
persistentFooterButtons: fixed button below.
drawer: sidebar controls.
bottomNavigationBar: show navigation bar button bar at the bottom. You can view the document: Flutter learning to make the bottom of the menu navigation.
backgroundColor: background color.
resizeToAvoidBottomPadding: whether the body content control interface to avoid re-layout the bottom is covered.
5, Flutter controls MaterialApp
Paper and ink design (Material Design) style applications MaterialApp representatives. Which contains the basic controls paper and ink design required for the application.
MaterialApp main attributes are as follows:
- title: Application name in the Task Manager window is displayed
- Topic: UI theme colors used in a variety of applications
- color: color main value of the application (primary color), that is, apply the color Android Task Manager window is displayed
- home: apply the default interface displayed Widget
- routes: the top navigation application form, this is a multi-page application to control the jump page URL similar to the page
- initialRoute: The first route name suggests, the default value Window.defaultRouteName
- onGenerateRoute: generate routes callback function, when naming the route of navigation time, will use this to generate interface
- onLocaleChanged: When the system changes the language of the time, this will trigger a callback å
- navigatorObservers: Application Navigator listeners
- debugShowMaterialGrid: paper and ink design basis whether to display a grid layout, UI tools for debugging
- showPerformanceOverlay: Tags display performance, https: //flutter.io/debugging/#performanceoverlay
- checkerboardRasterCacheImages, showSemanticsDebugger, debugShowCheckedModeBanner various debugging