从今年五月一之后就开始学习Flutter了，接触到Flutter之后，才发现Flutter的方便，强大；api对开发者来说真是太友好了，断断续续学了一个月后，对FLutter有了一定得了解，总结了一些心得体会；这边总结存放许久，今天发出来记录一下，以防丢失，方便自己以后查看复习。
#Widget everything is widget
StateLessWidget 无状态Widget build();构建展示页面 ，
StatefulWidget 有状态Widget，
lifecycle：
//the lifecycle of [State]
enum _StateLifecycle {
created,->State.initState() 当前页面被添加时被调用
initialized,->State.didChangeDependencies() 当前页面的初始化
State.deactivate()准备移除当前页面
ready,
State.dispose()当前页面被移除
defunct,
}
其他：didUpdateWidget()有新widget被添加，热重载时调用, setState（）更新页面数据 ->build()构建展示页面 ，
#Scaffold ##demos/LayoutApp.dart
Scaffold ：脚手架，相当于Android的Activity，Fragment，实现基本材料设计视觉布局结构。
bottomNavigationBar:底部导航栏
###在Android上：该应用导航到目标的顶级屏幕。重置任何先前的用户交互和临时屏幕状态，例如滚动位置，选项卡选择和内联搜索。
在iOS上（CupertinoTabBar）：目的地反映了用户之前的互动。如果用户先前访问过应用程序的该部分，则会返回到查看的最后一个屏幕（如果可能，保留其先前状态）。否则，应用程序会导航到顶级屏幕。
floatingActionButton：悬浮按钮
drawer：左边抽屉
endDrawer：右边抽屉
bottomSheet：底部提示抽屉（静态，不可消失）
appBar:标题栏
##demos/tab/TabBar.dart
TabBar 一个显示水平选项卡的Material Design widget。
TabBarView 显示与当前选中的选项卡相对应的页面视图。通常和TabBar一起使用。
#Container ##demos/container/ContainerDemos.dart
相当于Android里的LinearLayout
Row 行 在水平方向上排列子widget的列表
Column 列 在垂直方向上排列子widget的列表。
Stack 可以允许其子widget简单的堆叠在一起 （Android FrameLayout）
Container 一个拥有绘制、定位、调整大小的 Widget容器，本身也是Widget
Center 将其子widget居中显示在自身内部的widget
Wrap 包括容器
Card 带阴影，圆角的容器
Padding 一个widget, 会给其子widget添加指定的填充
#Widgets Button: ##demos/LayoutApp.dart
RaiseButton: Material :Design中的button， 一个凸起的材质矩形按钮 (相当于一个有点击事件的容器，一般包含一个Text child，onPressed 处理点击事件，)
FlatButton，一个没有阴影的材质设计按钮。（一般只有文案，用于Dialog对话框底部按钮）
IconButton，用于创建仅包含图标的按钮。（跟 RaiseButton有点类似，只是child换成了icon图标）
DropdownButton，一个显示可供选择的选项的按钮。（能弹出一个类似Dialog样式的弹窗）
InkWell，实现平面按钮的墨水飞溅部分。（用法较麻烦，效果不是很明显）
FloatingActionButton，材质应用程序中的圆形按钮。(悬浮按钮，优先级别较大，一般用于BottomBar上，或者主页上，作为比较重要的逻辑入口)
#国际化 ## demos/international/International.dart
#resources 资源 demos/res/Resources.dart
pubspec.yaml文件中声明 assets: - images/**.jpg ; assets: - images/这种声明只适合1.0中有的文件
pubspec.yaml 文件 声明的资源都会被打包到apk中
#自定义字体 demos/res/Resources.dart
#输入框 demo/input_select_widgets/InputSelectBox.dart
TextField ：文本字段允许用户输入文本，可以使用硬件键盘，也可以使用屏幕键盘。
#选择框 demo/input_select_widgets/InputSelectBox.dart
CheckBox：复选框，允许用户从一组中选择多个选项。（不带文字，图标描述）
CheckboxListTile：它将此小部件与ListTile结合使用，以便您可以为复选框指定标签。（带文字，图标描述）
##demo/input_select_widgets/InputSelectBox.dart
Radio：单选框，允许用户从一组中选择一个选项。（不带文字，图标描述）
RadioListTile：它将此小部件与ListTile结合使用，以便您可以为单选按钮指定标签。（带文字，图标描述）
##demo/input_select_widgets/InputSelectBox.dart
Switch ：On/off 用于切换一个单一状态（不带文字，图标描述）
SwitchListTile，它将此小部件与ListTile结合使用，以便为交换机提供标签。（带文字，图标描述）
##demo/input_select_widgets/InputSelectBox.dart
Slider：滑块，允许用户通过滑动滑块来从一系列值中选择。
Date & Time Pickers：日期&时间选择器
#Dialog demo/dialog/Dialog.dart
SimpleDialog ：简单对话框可以显示附加的提示或操作
AlertDialog ：一个会中断用户操作的对话款，需要用户确认
BottomSheet：是一个从屏幕底部滑起的列表（以显示更多的内容）。你可以调用showBottomSheet()或showModalBottomSheet弹出
ExpansionPanel：扩展面板包含创建流，允许对元素进行轻量级编辑。expanpanel与ExpansionPanelList结合使用。
SnackBar ： 具有可选操作的轻量级消息提示，在屏幕的底部显示。
#标签， ## demo/message_widget/MessageWidget.dart
Chip：一个Material widget。 它可以将一个复杂内容实体展现在一个小块中，如联系人。
InputChip：一种芯片，以紧凑的形式表示复杂的信息，例如实体（人，地方或事物）或会话文本。
ChoiceChip：允许从一组选项中进行单一选择。选择芯片包含相关的描述性文本或类别
## demo/message_widget/MessageWidget.dart
LinearProgressIndicator：线性进度条，
CircularProgressIndicator：圆形进度条
## demo/message_widget/MessageWidget.dart
Stepper：一个Material Design 步骤指示器，显示一系列步骤的过程
inputChip:
演示视频 ：https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F12UiMVkjIJrWLKyDljDbbSgJQSuTs5vZR%2Fentry-chip-behavior-editable.mp4
https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1UpLaNgayWmHV8gIGOybjBMGXfsm2KrU2%2Fentry-chip-behavior-expandable.mp4
https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1yP4gEV5gaomMWK30xoTCO3mSPFwvi7Wv%2Fentry-chip-behavior-draggable.mp4
https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1fa62nXcCK1CgMTZ28nE0KfE-vkH1aHsm%2Fentry-chip-placement-scrolling.mp4
https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1fD_fhRHOQl0yc9BtWmzPbtj3gU9qFG4s%2Fentry-chip-behavior-stackable.png
##############################################################################################################################################
Flutter 进阶总结
1.bottomNavigationBar:底部导航栏
###在Android上：该应用导航到目标的顶级屏幕。重置任何先前的用户交互和临时屏幕状态，例如滚动位置，选项卡选择和内联搜索。
在iOS上（CupertinoTabBar）：目的地反映了用户之前的互动。如果用户先前访问过应用程序的该部分，则会返回到查看的最后一个屏幕（如果可能，保留其先前状态）。否则，应用程序会导航到顶级屏幕。
#IndexedStack
# 可以用OffStage控件解决 用法见 lib/youluedu/NavigationBottomBar.dart
Offstage的布局行为完全取决于其offstage参数
## Offstage的作用很简单，通过一个参数，来控制child是否显示，日常使用中也算是比较常用的控件。
当offstage为true，当前控件不会被绘制在屏幕上，不会响应点击事件，也不会占用空间；
当offstage为false，当前控件则跟平常用的控件一样渲染绘制；
***另外，当Offstage不可见的时候，如果child有动画，应该手动停掉，Offstage并不会停掉动画。
2.开屏页空白
# 官网在android/app/res/values/styles中提供了LaunchTheme主题支持，在清单文件中，设置在MainActivity上，
##LaunchTheme
Flutter draws its first frame -->
@drawable/launch_background
## launch_background
android:gravity="center"
android:src="@mipmap/lake" />
3. RefreshIndicator
## RefreshIndicator(
notificationPredicate: (scrollNotification){
print('----------------depth = ${scrollNotification.depth}');
return scrollNotification.depth==0;
},
semanticsLabel: 'seman label',
semanticsValue: 'seman value',
color: Colors.lightBlueAccent,
backgroundColor: Colors.redAccent,
child: ListView(...)
);
4.WillPopScope
##注册一个回调函数，以否决用户试图取消所附内容的尝试
###简单理解：就是在退出页面前，需要做的一些逻辑（表单数据未保存提醒，连续按两次返回键程序退出）
####系统控件 自动实现
WillPopScope({
Key key,
@required this.child,//child是页面具体内容Widget
@required this.onWillPop,//是一个（）{}无参回调函数，做逻辑处理，返回false不退出，返回true退出
}) : assert(child != null)
#### 手动注册方式实现(下面这一套代码复制到页面就行) eg:注意是在当前页面，不是跳转页
ModalRoute _route;
Future callBack() async{ return true; }
@override
void didChangeDependencies() {
super.didChangeDependencies();
_route?.removeScopedWillPopCallback(callBack);
_route = ModalRoute.of(context);
_route.addScopedWillPopCallback(callBack);
}
@override
void dispose() {
_route.removeScopedWillPopCallback(callBack);
_route = null;
super.dispose();
}
5. flutter隐藏状态栏，
SystemChrome.setEnabledSystemUIOverlays([]);
6.Redux
#Action : 区分要操作的逻辑分类（一般是 enum 类型 ）
#StoreProvider ：包装你的MaterialApp或WidgetsApp。这将确保所有路由都可以访问
##StoreConnector ： 将存储连接到呈现当前计数的文本小部件，为您的小部件构建一个专门的' ViewModel '(而不是遍历整个[Store])
##StoreBuilder ：通过直接将[Store]传递给Build函数来构建小部件。将整个Store对象传过去，并且不需要初始化后的Store变量
# T xxxReducer(T state, dynamic action) ：当State状态变化时候的回调函数，它会通知StoreProvider去通过热重载更新最新数据（不是重新走build函数，重建页面），
# store.dispatch(Actions)：响应相关动作，更新数据（发送更新数据通知给 reducer 函数）
总结：每次按下按钮挥着数据更新，就会发出一个动作并通过reducer运行。在reducer更新状态之后，小部件将自动使用最新的计数重新构建（热重载）
7. webview_flutter
## WebView
initialUrl:初始加载url
javascriptMode:控制javaScript开关
onWebViewCreated：webView创建后的回调
javascriptChannels：与WebView交互的函数集合
navigationDelegate：如何处理导航操作(加载URL之前拦截处理)
onPageFinished：页面加载完后的回调
### WebViewController 控制WebView页面的控制器
loadUrl() : 加载Url页面
reload() :刷新
goBack():返回
goForward():前进
clearCache():清除缓存
......
8. FutureBuilder 基于与[Future]交互的最新snapshot(数据)构建自身的小部件。继承StatefulWidget
用途：在做一个耗时异步请求时，可以根据不同的状态构建不同的Widget,eg:网络请求，请求时展示等待Progress,结束时返回想要构建的界面
future:异步操作对象Future类型，
builder：(context, AsyncSnapshot snapshot) {
snapshot：
snapshot.connectionState：枚举类
enum ConnectionState {
//future还未执行的快照状态
none,
//连接到一个异步操作，并且等待交互，一般在这种状态的时候，我们可以加载个菊花
waiting,
//连接到一个活跃的操作，比如stream流，会不断地返回值，并还没有结束，一般也是可以加载个菊花
active,
//异步操作执行结束，一般在这里可以去拿取异步操作执行的结果，并显示相应的布局
done,
}
snapshot.data ;拿到请求到的数据model
snapshot.error://错误信息
}
9.SliverList
other：
##Share (plugin),发送文件，不是分享，只是发出去一个Action,吊起系统的文件发送界面
##EventBus (plugin),轻量级页面间通讯，（比自己实现callBack简单，比Redux效率高）
由于编写的Demo含有公司的部分信息，不方便发出来，后期会做些修改分享出来；
