Mac系统下Flutter SDK的安装和配置

文档地址

1、下载安装Flutter SDK:

官方下载地址：https://docs.flutter.dev/development/tools/sdk/releases?tab=macos
Github下载地址：https://github.com/flutter/flutter

2、设置Flutter镜像源、环境变量：

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=$PWD/flutter/bin:$PATH

3、刷新环境变量、验证环境变量、创建Flutter应用：

source ~/.bash_profile
flutter --version
flutter create app_name

4、常用命令、插件(flutter、dart、code runner)

flutter --version
flutter doctor
flutter create msb_app
flutter run
flutter run --no-sound-null-safety
flutter devices
open -a Simulator
dart --version
which dart
flutter pub get

5、注意

常用布局：
1、row/column占据父组件宽度是整个行，主轴上的大小默认为能占多大就占多大，即：mainAxisSize: MainAxisSize.max，如果想要主轴宽度包裹内容则设置mainAxisSize: MainAxisSize.min。交叉轴默认包裹内容,如果想要row交叉轴高度拉伸到最大空间,将所有子widget交叉轴的高度拉伸到最大则crossAxisAlignment: CrossAxisAlignment.stretch；
2、stack默认大小包裹内容，alignment:从什么位置开始布局所有子组件，fit:expand将子元素拉伸尽可能大，overflow：超出部分如何处理；
3、listview/gridview 查看源码是只要不是继承于widget那么就是一个普通的类，继续查看父类，直到看到是继承于widget；一旦看到widget就去看build方法，因为build方法才是真正返回所使用的东西，然后查看build返回的对象是否继承与RenderObjectWidget，如果是那么就是真正渲染的的东西，flutter引擎渲染Render树里面相对应的RenderObjectWidget，最终代码真正的渲染到屏幕里面，listview/gridview本质都会调用buildSlivers方法，slivers才是真正可以滚动的东西，buildSlivers方法是个抽象方法，需要ScrollView的子类去实现，子类有BoxScrollView和CustomScrollView，BoxScrollView类中buildSlivers方法有个buildChildLayout抽象方法，需要子类listview/gridview去实现，listview中在buildChildLayout实现方法中创建返回了SliverFixedExtentList或者SliverList，gridview中在buildChildLayout实现方法中创建返回了SliverGrid。

常用
1、SizeBox(height:8);设置间隔
2、Divider(height: 1);分割线
3、ClipRect();将 child 剪裁为给定的矩形大小
4、ClipRRect();将 child 剪裁为圆角矩形
5、ClipOval();如果 child 为正方形时剪裁之后是圆形，如果 child 为矩形时，剪裁之后为椭圆形
6、ClipPath();将 child 按照给定的路径进行裁剪
7、CustomClipper();并不是一个widget，但是使用CustomClipper可以绘制出任何我们想要的形状
8、Text.rich();富文本,可换行
9、double.infinity;尽可能宽的
10、identical(a,b);比较两个对象是否是同一个对象
11、设置Row内部组件相同的高度，就在Row外部包装一层IntrinsicHeight()
12、封装打印日志区分debug模式打印release模式不打印<文件、行号、列号、内容>
13、UniqueKey();创建唯一随机数，其本质是用当前的对象生成哈希code；
14、默认情况下只要是创建widget，它都可以绑定一个key;
15、在父widget里面去拿子widget某个对象的属性或者方法就是通过globalKey进行获取；属于组件之间的相互引用；
16、element对两个东西有引用即为有两个属性分别是_widget、_renderObject; _widget会保存一个key,如果element._widget和widget树中的widget类型相同并且key也相同的话，那么完全没有必要重新创建element，那么也完全没必要去重新创建renderObject，只是更新element/renderObject里面的属性即可，但是widget树中的widget是重新创建的,这样最大的好处是用最小的开销来更新renderObject，flutter引擎下一次来解析renderObject的时候只需要发现renderObject属性发生改变了，只需要用最小的开销把这个renderObject重新做一个渲染就可以了，所以element树层类似于一个虚拟DOM，主要就是看一下当前页面的改变，然后用我们最小的开销做一个对比，然后用最小的开销来更新renderObject；
17、Widget描述和配置子树的样子，Element是一个Widget的实例，而Element实际去配置在Element树中特定的位置，RenderObject渲染树上的一个对象，RenderObject层是渲染库的核心。
18、组件Widget：不会生成RenderObject，例如Container->StatelessWidget-Widget；渲染Widget：会生成RenderObject，例如Padding->SingleChildRenderObjectWidget->RenderObjectWidget<核心抽象方法createRenderObject()>->Widget；Widget里面抽象方法Element createElement();所有的Widget都会创建一个对应的Element对象；
StatelessElement;
StatefulElement; ->_state引用；而_state对Widget有引用；

19、Widget常见子类有StatelessWidget、StatefulWidget、RenderObjectWidget；RenderObjectWidget里面有个核心抽象方法createRenderObjectWidget()，该抽象方法被它的子类的子类所实现创建RenderObject对象，例如Padding类实现了createRenderObjectWidget()方法，总之是RenderObjectWidget类里面实现了createRenderObjectWidget()方法，创建了RenderObject对象，所以我们知道他们之间存在这样的关系；

20、
1)、自己写Widget；
2)、某些Widget中会创建RenderObject；
3)、每一个Widget都会创建一个Element对象,会调用mount方法；
4)、Element类里面有个mount方法，当Element对象创建完成之后flutter引擎自己会去调用mount方法，mount方法里面会调用_firstBuild()方法<表示第一次构建方法>，_firstBuild()方法里面去调用rebuild()方法<表示重新构建>，rebuild()方法里调用performRebuild()抽象方法，去查看它的实现，例如ComponentElement里面实现performRebuild()的方法中调用了方法build()会生成一个Widget即Widget built = build()，也就是说在Element里面调用了build()方法，build()方法是一个抽象方法，去看它的实现例如StatelessElement里面的build()方法，即Widget = build() => widget.build(this);（例如1、ComponentElement执行过程：mount方法->firstBuild->rebuild->performBuild->build->_widget.build(this)，this就是当前Element，所以BuildContext就是Widget对应的Element对象，主要作用是执行build方法去构建更多的东西。2、RenderObjectElement执行过程：mount方法 -> _renderObject = widget.createRenderObject会被挂载到RenderObjectElement一个属性），主要作用是创建RenderObject;这既是1和2两者的最主要的区别。3、stateFulWidgetElement继承自ComponentElement，所以父类有点东西子类都有，在stateFulWidgetElement构造器的初始化列表里面调用了_state = widget.createState()，_state._widget = widget）。Element对_widget、_randerObject、_state都有引用;
总结：每一个Widget都会创建一个Element对象，会调用element里面的一个mount方法，mount方法经过一列方法调用方法之后会调用Widget的build(BuildContext context)方法，Element会用属性_widget来引用刚创建出来的Widget；如果Element是一个RunderElement，它主要做得事情是会创建一个RunderObject，RunderElement会用属性_runderObject引用刚创建出来的这个RunderObject；如果Element是一个stateFulElement那么会使用_state = widget.createState()，_state._widget = widget。

21、FittedBox()，自动适当放大缩小，放置组件越界报错;占据尽可能大的宽度；跟图片widget使用有点类似；
22、IgnorePointer();指针忽略；
23、EventBus:时间总线；国外有个人写的一个三方event_bus;
24、路由管理：所有的页面在进行路由跳转之前必须把页面进行包装，包装到路由里面，包裹成一个路由对象，flutter的navigatater才会帮我们管理路由；MaterialPageRoute：用的最多的路由包裹类；Navigator()：负责管理所有的Route的Widget,通过一个数据结构Stack栈结构来进行管理的；
25、WillPopScope();
26、flutter重写操作符
27、.of什么意思？
28、

https://javiercbk.github.io/json_to_dart/
https://app.quicktype.io
29、http://123.207.32.32:8001/api/meal
30、ListView在父容器里面占据尽可能大的空间、Column希望所有的子widget有一个明确的高度；注意容易报hasSize错误；设置ListView的属性shrinkWrap:true;physics:NeverScrollableScrollPhysics;padding:EdgeInsets.zero;
31、共享状态管理
32、生命周期
StatelessWidget
1)构造函数
2)build
StatefulWidget
1)构造函数
2)initState
3)didChangeDependencies
4)build
5)dispose

父组件不设置宽度，则宽度是内容宽度，如果内容宽度超过屏幕测上色栏杆报错，应在父组件外包裹一层Expened()组件；
如何配置类似iOS的pch文件