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

 

 

 

安装FLUTTER
Flutter中的Dart地址：.../flutter/bin/cache/dart-sdk
官方教程：
https://codelabs.flutter-io.cn/codelabs/first-flutter-app-pt1-cn/index.html#1

下载Flutter的SDK（https://storage.googleapis.com/flutter_infra/releases/stable/windows/flutter_windows_v1.0.0-stable.zip）

解压后配置好环境变量即可。
配置IDE（ Android Studio）
查看Android Studio的版本：





可以看到，这个版本是181开头的，我们去下载对应的flutter和dart插件：

https://plugins.jetbrains.com/plugin/9212-flutter



下载181开头的即可，然后从磁盘安装插件。

插件安装好后，会有如下展示，能创建flutter工程：


检查环境
控制台执行：flutter doctor
> flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, v1.0.0, on Microsoft Windows [Version 10.0.17134.407], locale zh-CN)
[!] Android toolchain - develop for Android devices (Android SDK 28.0.3)
    X Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[√] Android Studio (version 3.2)

可以看到有个X，表示这个是不通过的，可以运行这个命令flutter doctor --android-licenses，然后所有选择都选y通过。

再执行 flutter doctor 就可以看到如下信息：
flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, v1.0.0, on Microsoft Windows [Version 10.0.17134.407], locale zh-CN)
[√] Android toolchain - develop for Android devices (Android SDK 28.0.3)
[√] Android Studio (version 3.2)

新建Flutter项目






下一步后finish即可。
运行项目
1.启动虚拟机
2.修改gradle配置文件
修改android目录下的build.gradle文件：
buildscript {
   repositories {
       maven { url 'https://maven.aliyun.com/repository/google' }
       maven { url 'https://maven.aliyun.com/repository/jcenter' }
       maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
   }

   dependencies {
       classpath 'com.android.tools.build:gradle:3.2.1'
   }
}

allprojects {
   repositories {
      maven { url 'https://maven.aliyun.com/repository/google' }
       maven { url 'https://maven.aliyun.com/repository/jcenter' }
       maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
   }
}

rootProject.buildDir = '../build'
subprojects {
   project.buildDir = "${rootProject.buildDir}/${project.name}"
}
subprojects {
   project.evaluationDependsOn(':app')
}

task clean(type: Delete) {
   delete rootProject.buildDir
}


也就是修改对应的repositories中的内容。

修改flutter解压文件中的flutter\packages\flutter_tools\gradle\flutter.gradle中repositories中的内容：
buildscript {
    repositories {
        //google()
        //jcenter() 修改这里
		maven { url 'https://maven.aliyun.com/repository/google' }
        maven { url 'https://maven.aliyun.com/repository/jcenter' }
        maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }

    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.2.1'
    }
}

运行项目即可，即可启动。

TextField
顾名思义文本输入框，类似于iOS中的UITextField和Android中的EditText和Web中的TextInput。主要是为用户提供输入文本提供方便。相信大家在原生客户端上都用过这个功能，就不在做具体介绍了，接下来还是具体介绍下Flutter中TextField的用法。
以下内容已更新到 github
TextField的构造方法：
  const TextField({
    Key key,
    this.controller,            //控制器，控制TextField文字
    this.focusNode,
    this.decoration: const InputDecoration(),      //输入器装饰
    TextInputType keyboardType: TextInputType.text, //输入的类型
    this.style,
    this.textAlign: TextAlign.start,
    this.autofocus: false,
    this.obscureText: false,  //是否隐藏输入
    this.autocorrect: true,
    this.maxLines: 1,
    this.maxLength,
    this.maxLengthEnforced: true,
    this.onChanged,            //文字改变触发
    this.onSubmitted,          //文字提交触发（键盘按键）
    this.onEditingComplete,  //当用户提交可编辑内容时调用
    this.inputFormatters,
    this.enabled,
    this.cursorWidth = 2.0,
    this.cursorRadius,
    this.cursorColor,
    this.keyboardAppearance,
  })

先来试试最基本的TextField:
/*
 * Created by 李卓原 on 2018/9/7.
 * email: zhuoyuan93@gmail.com
 *
 */
 
import 'package:flutter/material.dart';

class TextFieldAndCheckPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => TextFieldAndCheckPageState();
}

class TextFieldAndCheckPageState extends State<TextFieldAndCheckPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(appBar: AppBar(
      title: Text('输入和选择'),
    ),body:TextField(),
    );
  }
}




这是一个默认的输入框,我们什么都没有做的时候的样子.

然后我们试一下它的属性
TextField(
        keyboardType: TextInputType.number,
        decoration: InputDecoration(
          contentPadding: EdgeInsets.all(10.0),
          icon: Icon(Icons.text_fields),
          labelText: '请输入你的姓名)',
          helperText: '请输入你的真实姓名',
        ),
        onChanged: _textFieldChanged,
        autofocus: false,
      ),


  void _textFieldChanged(String str) {
    print(str);
  }

我们增加一个keyboardType属性，把keyboardType设置为TextInputType.number

可以看到每次我们让TextField获得焦点的时候弹出的键盘就变成了数字优先了。

然后我们为输入框做一些其他的效果，如提示文字，icon、标签文字等。

我们给上面的代码新增decoration属性，设置相关属性，可以发现当我们的TextField获得焦点时，图标会自动变色，提示文字会自动上移。

还可以看到 我加了一个onChanged。

onChanged是每次输入框内每次文字变更触发的回调，onSubmitted是用户提交而触发的回调。

每当用户改变输入框内的文字，都会在控制台输出现在的字符串.与onSubmitted用法相同.
接下来，我们实现一个简单的登录页面:
/*
 * Created by 李卓原 on 2018/9/7.
 * email: zhuoyuan93@gmail.com
 *
 */

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class TextFieldAndCheckPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => TextFieldAndCheckPageState();
}

class TextFieldAndCheckPageState extends State<TextFieldAndCheckPage> {
  //手机号的控制器
  TextEditingController phoneController = TextEditingController();

  //密码的控制器
  TextEditingController passController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('输入和选择'),
      ),
      body: Column(
        children: <Widget>[
          TextField(
            controller: phoneController,
            keyboardType: TextInputType.number,
            decoration: InputDecoration(
              contentPadding: EdgeInsets.all(10.0),
              icon: Icon(Icons.phone),
              labelText: '请输入你的用户名)',
              helperText: '请输入注册的手机号',
            ),
            autofocus: false,
          ),
          TextField(
              controller: passController,
              keyboardType: TextInputType.number,
              decoration: InputDecoration(
                contentPadding: EdgeInsets.all(10.0),
                icon: Icon(Icons.lock),
                labelText: '请输入密码)',
              ),
              obscureText: true),
          RaisedButton(
            onPressed: _login,
            child: Text('登录'),
          ),
        ],
      ),
    );
  }

  void _login() {
    print({'phone': phoneController.text, 'password': passController.text});
    if (phoneController.text.length != 11) {
      showDialog(
          context: context,
          builder: (context) => AlertDialog(
                title: Text('手机号码格式不对'),
              ));
    } else if (passController.text.length == 0) {
      showDialog(
          context: context,
          builder: (context) => AlertDialog(
                title: Text('请填写密码'),
              ));
    } else {
      showDialog(
          context: context,
          builder: (context) => AlertDialog(
                title: Text('登录成功'),
              ));
      phoneController.clear();
    }
  }

  void onTextClear() {
    setState(() {
      phoneController.clear();
      passController.clear();
    });
  }
}



在布局上，我们使用一个Column包含了两个TextField和一个RaisedButton。

在逻辑上，每当我们点击下面的按钮都会判断用户名密码是否符合要求，并且使用控制器清空已经输入的用户名和密码。
当用户输入的手机号码不是11位的时候提示手机号码格式错误，

当用户没有输入密码时，提示填写密码，

用户名和密码符合要求时提示登录成功。
我这里登录成功之后还调了一个方法：phoneController.clear() 清空了用户名输入框中的内容。
代码的逻辑很简单。关于TextField的其他用法就不在一一介绍了，有兴趣的小伙伴可以自己尝试下.
使用decoration美化输入框
先看一下效果：

代码：
TextField(
            controller: accountController,
            decoration: InputDecoration(
              border: OutlineInputBorder(),
              hintText: '请输入账号',
              labelText: '左上角',
              prefixIcon: Icon(Icons.person),
            ),
          )



可以看到，我先添加了一个decoration属性.
decoration属性介绍:
border：增加一个边框，

hintText：未输入文字时，输入框中的提示文字，

prefixIcon：输入框内侧左面的控件，

labelText：一个提示文字。输入框获取焦点/输入框有内容 会移动到左上角，否则在输入框内，labelTex的位置.

suffixIcon: 输入框内侧右面的图标.

icon : 输入框左侧添加个图标
在多个输入框内切换焦点
介绍一下onEditingComplete这个方法:
当用户提交可编辑内容时调用(例如，用户按下键盘上的“done”按钮)。
onEditingComplete的默认实现根据情况执行2种不同的行为:

当完成操作被按下时，例如“done”、“go”、“send”或“search”，用户的内容被提交给[controller]，然后焦点被放弃。
当按下一个未完成操作(如“next”或“previous”)时，用户的内容被提交给[controller]，但不会放弃焦点，因为开发人员可能希望立即将焦点转移到[onsubmit]中的另一个输入小部件。


我们有时候会需要这样的情况, 比如一个登录页面, 需要输入账号和密码 , 自然输入完账号就要输入密码了 , 我们在输入账号结束的时候 , 让密码输入框获取到焦点 .
看一下代码:
...
  FocusNode secondTextFieldNode = FocusNode();
...
Column(
        children: <Widget>[
          TextField(
            /* onChanged: (text) {
          value = text;
          print(value);
        },*/
            autofocus: false, //是否自动获取焦点
            controller: _textController,
            decoration: InputDecoration(
              suffixIcon: Icon(Icons.chevron_right), //输入框内右侧图标
              icon: Icon(Icons.person), //输入框左侧图标
              prefixIcon: Icon(Icons.skip_previous), //输入框内左侧图标
              labelText: 'labelText',
              hintText: 'hintText',
              helperText: 'helperText',
            ),
            onEditingComplete: () =>
                FocusScope.of(context).requestFocus(secondTextFieldNode),
          ),
          TextField(
            focusNode: secondTextFieldNode,
            decoration: InputDecoration(
                contentPadding: EdgeInsets.symmetric(horizontal: 15.0)),
          ),
        ],
      ),

我在顶层创建了一个交电接点并附加给第二个输入框,

在第一个输入框的onEditingComplete方法中是用
FocusScope.of(context).requestFocus(secondTextFieldNode),

方法来让第二个输入框请求获取焦点,

当然你也可以添加个按钮 , 点击按钮执行这个方法来实现切换焦点的功能.
例如:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BjSYHYmc-1573730655449)(https://cdn-images-1.medium.com/max/800/1*vMJw-_qx5DjX7Q3NZ5TTbg.gif)]

代码很简单,我就不贴了.
keyboardType

TextField成为焦点时显示的键盘类型。

TextField(
  keyboardType: TextInputType.number,
),

类型是：

TextInputType.text（普通完整键盘）
TextInputType.number（数字键盘）
TextInputType.emailAddress（带有“@”的普通键盘）
TextInputType.datetime（带有“/”和“：”的数字键盘）
TextInputType.multiline（带有选项以启用有符号和十进制模式的数字键盘）

TextInputAction

更改TextField的textInputAction可以更改键盘本身的操作按钮。

TextField(
  textInputAction: TextInputAction.search,
),

这会导致“完成”按钮被“搜索”按钮替换：

TextCapitalization

TextField提供了一些有关如何使用户输入中的字母大写的选项。



TextCapitalization.sentences : 这是我们期望的正常类型的大写，每个句子的首字母大写。




TextCapitalization.characters:大写句子中的所有字符。


[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4ykAhgu0-1573730655451)(https://cdn-images-1.medium.com/max/800/1*S-cw3fGmFsDasSaECpNnwQ.png)]

TextCapitalization.words : 将每个单词的首字母大写。



更改TextField中的光标

可以直接从TextField小部件自定义游标。

可以更改角落的光标颜色，宽度和半径。

例如，这里我没有明显的原因制作一个圆形的红色光标。
TextField(
  cursorColor: Colors.red,
  cursorRadius: Radius.circular(16.0),
  cursorWidth: 16.0,
),


控制TextField中的大小和最大长度

TextFields可以控制在其中写入的最大字符数，最大行数并在键入文本时展开。

TextField(
  maxLength: 4,
),


通过设置maxLength属性，将强制执行最大长度，并且默认情况下会将计数器添加到TextField。
github源码

重要消息

目前在西瓜视频上免费刊登 Flutter 系列教程，每日更新，欢迎关注接收提醒
【x1】点击查看提示
【x2】各种系列的教程
【x3】flutter 点滴积累 系列文章

flutter 提供了 print(Object object)  来向开发工具的控制 台输出日志信息
print("test");

可以通过插值法直接输出基本数据类型如下 ：
String str ="张三"；
print("测试输出 $str ");

int count = 40;
print("测试输出 $count ");

如果是对象类型的，比如要输出对象的一个属性的值，可以这样做：
 User user = new User(name:"张三");
 
 ///输出name
 print("测试输出 ${user.name} ");


common_utils 工具类已经将pring 封装为工具类
common_utils: ^1.1.1

使用common_utils工具类中的LogUtil
//初始化设置 LogUtil
LogUtil.init(true);
//输出日志
LogUtil.v("test");

当然 LogUtil 的 init 方法可根据是否是生产环境来配置 true 与 false ，如果是 false ,则不输出日志，这样的一个优化也是应用在发版本后可以节省向控制台输出日志信息的消耗。
封装源码如下
class LogUtil {
  static const String _TAG_DEF = "###common_utils###";

  static bool debuggable = false; //是否是debug模式,true: log v 不输出.
  static String TAG = _TAG_DEF;

  static void init({bool isDebug = false, String tag = _TAG_DEF}) {
    debuggable = isDebug;
    TAG = tag;
  }

  static void e(Object object, {String tag}) {
    _printLog(tag, '  e  ', object);
  }

  static void v(Object object, {String tag}) {
    if (debuggable) {
      _printLog(tag, '  v  ', object);
    }
  }

  static void _printLog(String tag, String stag, Object object) {
    StringBuffer sb = new StringBuffer();
    sb.write((tag == null || tag.isEmpty) ? TAG : tag);
    sb.write(stag);
    sb.write(object);
    print(sb.toString());
  }
}



完毕 每日积累 尽在点滴