Flutter

PS：本文会随着自己学习和编写项目过程中、一直持续跟新

一、简介

Flutter 是谷歌2018年发布的跨平台移动UI框架。作为谷歌的开源移动UI框架，Flutter可以快速在iOS和Android上构建高质量的原生用户界面，2019年，Google I/O 大会宣布了 flutter 支持 web 开发。flutter 目前的目的就是全平台开发，一套代码同时运行在 iOS 、Android、web和桌面端。Flutter 作为 Google 最新推出的原生应用解决方案，其目标是让创建原生移动应用更快速、简单，且经有很多公司在应用。

 

二、资源

github：https://github.com/flutter/flutter
官网：https://flutter.dev/
中文官网：https://flutter-io.cn/
中文文档：https://flutter-io.cn/docs

Flutter下载地址：https://flutter.dev/docs/get-started/install（https://flutter.dev/docs/get-started/install/windows）
中国必读（镜像）：https://flutter.dev/community/china
实操一下：https://flutter.dev/docs/get-started/test-drive

VS Code 插件安装：https://flutter.dev/docs/get-started/editor?tab=vscode
VS Code 中 Flutter 插件的使用文档：https://flutter.dev/docs/development/tools/vs-code

视频教程：http://video.mobiletrain.org/course/index/courseId/655

视频教程：http://jspang.com/posts/     标签选择 Flutter

Flutter的优秀学习资源汇总：https://github.com/Solido/awesome-flutter

Flutter 学习的一些基础知识 https://book.flutterchina.club/chapter1/chapter1/chapter1/install_flutter.html

三、学习步骤

1.Dart 语言上手
2.Flutter UI开发
3.数据交互
4.打包发布

四、flutter学习中的一些功能点的概要

状态管理、

五、flutter学习一些记录

1.0 colum  中包含tabBar 和tabBarView 出现页面白屏

   通过给tabBar加固定高度和  tabBarView嵌套Expand解决； 目前不知道原因

2.0  三种方式实现页面切换后保持原页面状态

 IndexedStack、Offstage、AutomaticKeepAliveClientMixin三种方式实现

3.0 flutter 中 使用_来作为参数 

  匿名函数作为参数aa((){}) 参数名是可以随便取名字的 所以可以用下划线代替（如果这个参数方法内没有使用的话）

4.0 android studio 函数有参数是带参数匿名函数  编辑器的ctrl +p 提示不能提示到
  addPostFrameCallback((_) async {
//在下划线那个位子就提示不到 });

5.0 图片背景和边框圆角的设置

可以使用Container的 decoration属性 选择BoxDecoration()来完成背景设置 和borderRadius完成边框圆角设置

6.0 文本输入控件 textFile 有很多的问题

  border使用OutlineInputBorder会出现内容多了以后只显示一半的问题 ，使用UnderlineInputBorder解决

  内容的居中等等需要使用contentPadding来解决

7.0 关于宽度可以这样设置 使得填充满 宽度或者高度

width: double.infinity,  //maxFinite、minPositive、nan、negativeInfinity

8.0 监听事件  空参数方法  传入method（）这个就不行  传入method就行

9.0 关于dio 接口请求后解析 报错 Flutter FormatException: Unexpected character (at character 2)

 这个是因为 dio  设置的responeType有问题 

BaseOptions options = new BaseOptions(
    baseUrl: "https://****/api/", connectTimeout: 5000, receiveTimeout: 3000);
options.responseType = ResponseType.plain;//设置为这个就可以 总共三种 json plain（文本） stream
Dio dio = new Dio(options);

10.0 关于状态管理 Provider 

https://juejin.im/post/5d414d08f265da03b8103c12#heading-34 这篇文章讲解是最好的  这篇也可以参考   MultiProvider使用

10.0 Container设置里固定的大小  内面内容设置了一个固定的比外层小的宽高值  但是内层还是会伸缩到外层大小

解决方法   设置外层Container的 aligment属性后就解决

11.0 row 中包含text文本 文本多的时候会出现超出屏幕的现象 

使用expand 包含text 这样就能拿够自动换行

12.0 输入法键盘弹出状态时 pop页面  会出现页面溢出的问题

解决办法是   在pop页面的按钮操作前先关闭键盘

FocusScope.of(context).requestFocus(FocusNode());//关闭键盘  防止pop页面时出现页面溢出

13.0 colum 中包裹lsitviev等可滚动的控件时  会出现白屏

解决方法：为可滚动的控件添加一个expand

14.0 flutter去掉Container的默认边线问题  PS:Listview同样存在默认padding问题  手动设置padding为0解决

解决办法：border: Border(bottom: BorderSide(color: Color(0XFF302F4F),width: 0.0)) width其实没啥用 主要还是修改颜色

15.0 flutter 吸顶功能和 Slivers大家族

吸顶一  吸顶二  Slivers