Flutter学习
常用网址
免费下载 ！《AliFlutter 体系化建设和实践》
Flutter 开发文档
Flutter实战
Dart 编程语言概览
pub仓库
main函数使用了(=>)符号, 这是Dart中单行函数或方法的简写。
// =>是return语句的简写
add3(a, b) => a + b;
变量以下划线（_）开头，在Dart语言中使用下划线前缀标识符，会强制其变成私有的。
Widget
Activity、Fragment、view 在Flutter中等价于Widget.
与Android view区别
- Android中View是可变的，当用户交互或数据更新时，可直接调用View的invalidate方法重绘，达到更新UI的目的。
- Flutter的widget是不可改变的因此不能直接更新，而必须使用Widget的状态。Flutter的widget分为有状态和无状态两种。它们的核心特性是相同的,每一帧它们都会重新构建，不同之处在于有状态的Widget有一个State对象，它可以跨帧存储状态数据并恢复它。
Stateless widgets 是不可变的, 这意味着它们的属性不能改变 ，所有的值都是最终的.
Stateful widgets（有状态的部件） 持有的状态可能在widget生命周期中发生变化. 实现一个 stateful widget 至少需要两个类:
- 一个 StatefulWidget类。
- 一个 State 类。 StatefulWidget类本身是不变的，但是 State类在widget生命周期中始终存在.
stateful widget将自身的构建委托给State对象，State对象的build函数负责构建该Widget，当用户交互或数据发生变化时，Widget状态发生改变，调用State的 setState 方法通知它，而后State根据当前的状态信息，重新构建Widget tree
- 在Android中，您可以从父级控件调用addChild或removeChild以动态添加或删除View。 在Flutter中，因为widget是不可变的，所以没有addChild。相反，您可以传入一个函数，该函数返回一个widget给父项，并通过 布尔值控制该widget的创建。
- 在Flutter中，一个自定义widget通常是通过组合其它widget来实现的，而不是继承
- 某些widget属性需要单个widget（child），而其它一些属性，如action，需要一组widgets(children），用方括号[]表示。
布局
Flutter中通过Row和Column来实现线性布局，类似于Android中的LinearLayout控件
row水平，Column竖直
- 对于线性布局，有主轴和纵轴之分，如果布局是沿水平方向，那么主轴就是指水平方向，而纵轴即垂直方向；如果布局沿垂直方向，那么主轴就是指垂直方向，而纵轴就是水平方向。在线性布局中，有两个定义对齐方式的枚举类MainAxisAlignment和CrossAxisAlignment，分别代表主轴对齐和纵轴对齐。
- mainAxisSize：表示Row在主轴(水平)方向占用的空间，默认是MainAxisSize.max，表示尽可能多的占用水平方向的空间，此时无论子widgets实际占用多少水平空间，Row的宽度始终等于水平方向的最大宽度；
- 而MainAxisSize.min表示尽可能少的占用水平空间，当子组件没有占满水平剩余空间，则Row的实际宽度等于所有子组件占用的的水平空间
- textDirection：表示水平方向子组件的布局顺序(是从左往右还是从右往左)，默认为系统当前Locale环境的文本方向(如中文、英语都是从左往右，而阿拉伯语是从右往左)。
- Row和Column都只会在主轴方向占用尽可能大的空间，而纵轴的长度则取决于他们最大子元素的长度
- 如果Row里面嵌套Row，或者Column里面再嵌套Column，那么只有最外面的Row或Column会占用尽可能大的空间，里面Row或Column所占用的空间为实际大小
Stack类似FrameLayout很像，都是可以叠加的现实View
flutter中默认组件尺寸单位都是dp
double.infinity，可以使宽度占用尽可能多的空间
常用Widget和属性
- Container：父view，宽高、背景色、圆角、margin
- Padding：EdgeInsets.fromLTRB
- Center：居中
- TextField：输入框（TextEditingController）
- Expanded：填充剩余布局，组件有个参数flex,可以实现比例分配。
height如果不设置 界面显示会有问题，如果要设置，又不能准确的计算出结果,可以使用Expanded - BoxDecoration:圆角，需要放在Container里，实现边框、圆角、阴影、形状、渐变、背景图像
- ShapeDecoration:实现四个边分别指定颜色和宽度、底部线、矩形边色、圆形边色、体育场（竖向椭圆）、 角形（八边角）边色
- UnderlineTabindicator:下划线
- EdgeInsets.only
- Flutter 中官方提供CustomScrollView，让我们能够作何Appbar折叠的效果，并且很容易就能实现下拉刷新和加载更多。
点击
- 在Flutter中，添加触摸监听器有两种方法:如果Widget支持事件监听，则可以将一个函数传递给它并进行处理。例如，RaisedButton有一个onPressed参数
- 如果Widget不支持事件监听，则可以将该Widget包装到GestureDetector中，并将处理函数传递给onTap参数。
- InkWell：点击
MaterialApp
MaterialApp是我们使用 Flutter开发中最常用的符合Material Design设计理念的入口Widget。你可以将它类比成为网页中的html标签，且它自带路由、主题色等功能。
Scaffold
Scaffold通常被用作MaterialApp的子Widget，它会填充可用空间，占据整个窗口或设备屏幕。Scaffold提供了大多数应用程序都应该具备的功能，例如顶部的appBar，底部的bottomNavigationBar，隐藏的侧边栏drawer等。
const Scaffold({
Key key,
this.appBar, // 标题栏
this.body, // 用于显示当前界面主要内容的Widget
this.floatingActionButton, // 一个悬浮在body上的按钮，默认显示在右下角
this.floatingActionButtonLocation, // 用于设置floatingActionButton显示的位置
this.floatingActionButtonAnimator, // floatingActionButton移动到一个新的位置时的动画
this.persistentFooterButtons, // 多状态按钮
this.drawer, // 左侧的抽屉菜单
this.endDrawer, // 右'侧的抽屉菜单
this.bottomNavigationBar,// 底部导航栏。
this.bottomSheet, // 显示在底部的工具栏
this.backgroundColor,// 内容的背景颜色
this.resizeToAvoidBottomPadding = true, // 控制界面内容 body 是否重新布局来避免底部被覆盖，比如当键盘显示的时候，重新布局避免被键盘盖住内容。
this.primary = true,// Scaffold是否显示在页面的顶部
})
AppBar属性
leading 返回键
iconTheme Appbar 上图标的颜色、透明度、和尺寸信息。默认值为 ThemeData.primaryIconTheme
centerTitle 标题是否居中显示，默认值根据不同的操作系统，显示方式不一样。
Flutter AppBar（顶端栏）
Button
RaisedButton ：凸起的按钮，其实就是Android中的Material Design风格的Button ，继承自MaterialButton
FlatButton ：扁平化的按钮，继承自MaterialButton
OutlineButton ：带边框的按钮，继承自MaterialButton
IconButton ：图标按钮,继承自StatelessWidget
SizedBox
- 一般是用来限制孩子控件的大小。
- 还有这么一种场景也可以使用SizeBox，就是可以代替padding和container，然后 用来设置两个控件之间的间距，比如在行或列中就可以设置两个控件之间的间距 主要是可以比使用一个padding或者container简单方便 （在Flutter中可能用不同的控件可以实现到相同的目的，尽量使用越简单的widget来实现）
- 控件在整个手机屏幕中间对齐：ConstrainedBox、SizedBox、Center
banner+list三种实现方式
listView
CustomScrollView
ScrollView
debugPrint('classList-' + classList.toString());
Intents
Navigator.push跳页面
- 在Android中，Intents主要有两种使用场景：在Activity之间切换，以及调用外部组件。 Flutter不具有Intents的概念，但如果需要的话，Flutter可以通过Native整合来触发Intents。
- 要在Flutter中切换屏幕，您可以访问路由以绘制新的Widget。 管理多个屏幕有两个核心概念和类：Route 和 Navigator。Route是应用程序的“屏幕”或“页面”的抽象（可以认为是Activity）， Navigator是管理Route的Widget。Navigator可以通过push和pop route以实现页面切换。
- 在Flutter中，导航器管理应用程序的路由栈。将路由推入（push）到导航器的栈中，将会显示更新为该路由页面。 从导航器的栈中弹出（pop）路由，将显示返回到前一个路由。
Flutter路由&pop()&Push()全面解析
异步
- flutter没有UI线程，也没有子线程。也就是说，无论是网络请求，数据处理，页面渲染，都是在同一个线程里面，那怎么保障页面渲染不会anr呢？
- Dart是一个单线程的语言，遇到有延迟的运算（比如IO操作、延时执行）时，线程中按顺序执行的运算就会阻塞，用户就会感觉到卡顿，于是通常用异步处理来解决这个问题。当遇到有需要延迟的运算（async）时，将其放入到延迟运算的队列（await）中去，把不需要延迟运算的部分先执行掉，最后再来处理延迟运算的部分。(
延迟队列) - 在Flutter可以利用多个CPU内核来执行耗时或计算密集型任务。这是通过使用Isolates来完成的。是一个独立的执行线程，它运行时不会与主线程共享任何内存。这意味着你不能从该线程访问变量或通过调用setState来更新你的UI。
聊一聊Flutter Engine线程管理与Dart Isolate机制
异步async、await和Future的使用技巧
我们需要用到 async，await，Future 三兄弟来进行处理。
async ，它是一个延迟计算的标志，标志了把这个任务放到了延迟运算的队列（await）中，通过Future进行返回。
比如说我们的网络请求：
// post请求
static Future<Map> post(String url,
{Map<String, String> params, bool saveCookie = false}) async {
if (params == null) {
params = new Map();
}
String _url = Api.BASE_URL + url;
if (OsApplication.cookie != null) {
params['Cookie'] = OsApplication.cookie;
}
http.Response res = await http.post(_url, body: params);
return _dealWithRes(res, saveCookie: saveCookie);
}
在Dart中，有await标记的运算，其结果值都是一个Future对象，Future不是String类型
Dart规定有async标记的函数，只能由await来调用，比如这样：
String data = await getData();
//get请求，请求返回值为Future<String>类型，即其返回值未来是一个String类型的值
getData() async {
//async关键字声明该函数内部有代码需要延迟执行
return await http.get(Uri.encodeFull(url), headers: {"Accept": "application/json"}); //await关键字声明运算为延迟执行，然后return运算结果
}
then
await会阻塞流程，等待紧跟着的的Future执行完毕之后，再执行下一条语句，而如果用了Future.then这个api，那么就不会等待，直接执行下面的语句，等Future执行完了，再调用then这个方法。
dynamic ，var、object
dynamic
所有dart 对象的基础类型，在大多数情况下，不直接使用它 通过它定义的变量会关闭类型检查，这意味着 dynamix x= ‘hal’; x.foo();这段静态类型检查不会报错，但是运行时会crash，因为x 并没有foo（） 方法，所以建议大家在编程时不要直接使用dynamic；
var
是一个关键字，意思是"我不关心这里的类型是什么"，系统会自动判断类型 runtimeType;
object
是Dart 对象的基类，当你定义： object o =xxx ;时这个时候系统会认为o是个对象，你可以调用o的toString()和hashCode()方法因为Object 提供了这些方法，但是如果你尝试调用o.foo()时，静态类型检查会运行报错。综上不难看出dynamic 与object 的最大的区别是在静态类型检查上。
MethodChannel与原生交互
将 Flutter 集成到现有应用
Flutter 与 Android 的相互通信
File > New > New Module > flutter 新建到自己项目目录下
可以从Native层调用flutter层的dart代码，也可以在flutter层调用Native的代码，而作为通讯桥梁就是MethodChannel，这个类在初始化的时候需要注册一个渠道值。这个值必须是唯一的，并且在使用到的Native层和Flutter层互相对应。
flutter调用Android
注册
static const nativeChannel =
const MethodChannel('com.example.flutter/native');
flutter
Map<String, dynamic> result = {'message': '我从Flutter页面回来了'};
nativeChannel.invokeMethod('goBackWithResult', result);
Android
MethodChannel nativeChannel = new MethodChannel(flutterEngine.getDartExecutor(), CHANNEL_NATIVE);
nativeChannel.setMethodCallHandler((methodCall, result) -> {
switch (methodCall.method) {
//回调
case "goBackWithResult":
// 返回上一页，携带数据
ActivityManager.getInstance().finishActivity(FlutterActivity.class);
Toast.makeText(this, (String) methodCall.argument("message"), Toast.LENGTH_SHORT).show();
break;
case "getSendParams":
result.success(getSendParams());
break;
default:
result.notImplemented();
break;
}
});
异步
Future getSendParams() async {
String params = await _SendFeedBackState.nativeChannel
.invokeMethod('getSendParams', "");
print("getSendParams：" + params);
}
Android调用flutter
Android
Map<String, Object> result = new HashMap<>();
result.put("message", message);
// 创建MethodChannel
MethodChannel flutterChannel = new MethodChannel(flutterEngine.getDartExecutor(), CHANNEL_FLUTTER);
flutterChannel.invokeMethod("onActivityResult", result);
flutter
@override
void initState() {
super.initState();
Future<dynamic> handler(MethodCall call) async {
switch (call.method) {
case 'onActivityResult':
Fluttertoast.showToast(
msg: call.arguments['message'],
toastLength: Toast.LENGTH_SHORT,
);
break;
case 'goBack':
// 返回上一页
if (Navigator.canPop(context)) {
Navigator.of(context).pop();
} else {
nativeChannel.invokeMethod('goBack');
}
break;
}
}
flutterChannel.setMethodCallHandler(handler);
}
其他
使用 ‘尾随逗号’
Flutter中如何使用原生控件或组件
Flutter代码通常涉及构建相当深的树状数据结构，例如在一个build方法中。 为了获得良好的自动格式化，我们建议您采用可选的尾部逗号。添加尾随逗号很简单：始终在函数、方法和构造函数的参数列表末尾添加尾随逗号，以便保留您的编码格式。 这将有助于自动格式化程序为Flutter样式代码插入适当的换行符。
Eventbus
监听特定的
eventeventBus.on<UserLoggedInEvent>().listen((event) {
print(event.user);});
监听所有的
eventeventBus.on().listen((event) {
print(event. runtimeType);});
发送一个
eventeventBus.fire(new UserLoggedInEvent(myUser));
写text先写padding
child: new Padding(
padding: new EdgeInsets.all(10.0),
child: new Text(
'马上登录',
style:
new TextStyle(color: Colors.white, fontSize: 16.0),
),
)),
