Flutter-CheatSheet
📌 本文很多内容源于
Flutter 官方文档。本文主要是对于应用开发中常见的考虑进行汇总。
Flutter CheatSheet
谷歌的
Technical Overview | 架构概览
Flutter has a functional-reactive framework that is inspired by React. Though Flutter is written in Dart, it also takes the best features of React and helps the developers build a beautiful, cross-platform mobile app.
Everything’s a Widget. Widgets are the basic building blocks of a Flutter app’s user interface. Each widget is an immutable declaration of part of the user interface. Unlike other frameworks that separate views, view controllers, layouts, and other properties, Flutter has a consistent, unified object model: the widget.
Composition > inheritance. Widgets form a hierarchy based on composition. Each widget nests inside, and inherits properties from, its parent. There is no separate “application” object. Instead, the root widget serves this role. You can respond to events, like user interaction, by telling the framework to replace a widget in the hierarchy with another widget. The framework then compares the new and old widgets and efficiently updates the user interface.
You can also control the layout of a widget by composing it with other widgets. For example, to center a widget, you wrap it in a Center widget. There are widgets for padding, alignment, row, columns, and grids. These layout widgets do not have a visual representation of their own. Instead, their sole purpose is to control some aspect of another widget’s layout. To understand why a widget renders in a certain way, it’s often helpful to inspect the neighboring widgets. The Flutter framework is organized into a series of layers, with each layer building upon the previous layer.
The goal of this design is to help you do more with less code. For example, the Material layer is built by composing basic widgets from the widgets layer, and the widgets layer itself is built by orchestrating lower-level objects from the rendering layer.
If the unique characteristics of a widget need to change based on user interaction or other factors, that widget is stateful. For example, if a widget has a counter that increments whenever the user taps a button, the value of the counter is the state for that widget. When that value changes, the widget needs to be rebuilt to update the UI. Whenever you mutate a State object (e.g., increment the counter), you must call setState() to signal the framework to update the user interface by calling the State’s build method again. Having separate state and widget objects lets other widgets treat stateless and stateful widgets in the same way, without being concerned about losing state. Rather than needing to hold on to a child to preserve its state, the parent is free to create a new instance of the child without losing the child’s persistent state. The framework does all the work of finding and reusing existing state objects when appropriate.
入门开发
开发环境配置与 lib/main.dart 即可以在模拟器中打开，并且进入调试模式。
# 创建新项目
$ flutter create minimal
# 打开 iOS 模拟器
$ open -a Simulator
# 运行当前应用程序
$ flutter run
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Welcome to Flutter',
home: new Scaffold(
appBar: new AppBar(
title: new Text('Welcome to Flutter'),
),
body: new Center(
child: new Text('Hello World'),
),
),
);
}
}
如果需要引入第三方依赖，首先需要在 pubspec.yaml 文件中添加依赖项声明；在flutter packages get 进行手动抓取。
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^0.1.0
english_words: ^3.1.0
在需要使用的地方导入所需要的包体，
import 'package:english_words/english_words.dart';
...
// 创建随机字符串
final wordPair = new WordPair.random();
....
// 创建新的 Text 控件
body: new Center(
//child: new Text('Hello World'), // Replace the highlighted text...
child: new Text(wordPair.asPascalCase), // With this highlighted text.
),
class CountPage extends StatefulWidget {
CountPage({Key key, this.title}) : super(key: key);
final String title;
@override
_CountPageState createState() => new _CountPageState();
}
这里的 _CountPageState 是包含了状态数据的对象，
class _CountPageState extends State<CountPage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {...}
}
对于值的引用允许使用占位符访问变量：
new Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
可以使用将响应函数绑定到内置的手势事件中：
floatingActionButton: new FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: new Icon(Icons.add),
),