flutter的入门记录

0.前言：

flutter 的入门demo 已经写好一个星期了，只不过一直都没有整理出博客来。收拾好心情，来整理一下。
继上一篇关于react-native-wx的介绍，是仿照微信界面ui，
因为作为前端开发，有一定的js 基础，所有写起RN来，也不是很吃力。但是这个flutter 用的是一个新的语言 dart作为开发语言，没有学习这个语言，但是不要怕，有开发文档，一切都没有那么难。这个flutter demo，虽然已经写了一个初步的demo，但是你要是问我，这个dart里面的具体的东西，我直言说，‘不会’（因为没有具体去学习这个语言，回过头来说，若深入flutter，必学dart），我一路就是对着开发文档和其他参考资料一路”CV”过来。不禁想起了这个图片~

话不多说，也将继续参考微信界面ui开发，项目名称为 flutter-wx,为了不增加这个入门体验demo的复杂度，只做了几个基本功能页面。项目地址： flutter-wx,欢迎查看！下面截图如下：

文章内，图片很多，占据了一定的篇幅。班门弄斧之作，若有大神见到，敬请指教，有不对不合理之处，敬请指出！我是迩伶贰！

1. 环境准备

以mac 系统为例。

• 安装xcode,这里主要使用的是xcode里面的ios模拟器，笔者不太喜欢用xcode,如何安装，这里不做赘述；
• 使用flutter镜像
  编辑 .bash_profile， 往后追加以下，
  export PUB_HOSTED_URL=https://pub.flutter-io.cn
  export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
• 获取Flutter SDK
• https://flutter.dev/docs/deve…
• 解压SDK 压缩包，将路径写入 .bash_profile
• source ~/.bash_profile
• 检查 flutter 环境
  flutter doctor

上图看出，flutter 需要的环境有的具有，有的不具有，不同的操作系统需要配备不同的软件环境，我们这里是mac,用的是Xcode，因此，我们不需要安装Android Studio，忽略第一条，按照第二条提示的安装环境；

2. 软件安装

• 安装编辑器vscode，这里使用vscode,
• 安装vscode 插件flutter
  

3. 初始化项目

打开vscode, command+shift+p;

初始化之后，如下

debugger 模式下，跑起来：

4. 修改项目

新建文件夹 page, utils, page 下新建多个文件，一个文件表示一个页面，utils 为工具函数， main.dart 为项目的主入口。

5. 添砖加瓦

-- 组件封装

网络请求封装:

    在utils 文件夹新建文件 HttpRequest.dart， 代码写入：

import 'package:dio/dio.dart';
import 'dart:async';

/*
 * 封装 restful 请求
 * 
 * GET、POST、DELETE、PATCH
 * 主要作用为统一处理相关事务：
 *  - 统一处理请求前缀；
 *  - 统一打印请求信息；
 *  - 统一打印响应信息；
 *  - 统一打印报错信息；
 */
class HttpUtils {

  /// global dio object
  static Dio dio;

  /// default options
  static const String API_PREFIX = 'http://18.10.1.115:4000';
  // static const String API_PREFIX = 'http://api.wtodd.wang:4000';
  static const int CONNECT_TIMEOUT = 10000;
  static const int RECEIVE_TIMEOUT = 3000;

  /// http request methods
  static const String GET = 'get';
  static const String POST = 'post';
  static const String PUT = 'put';
  static const String PATCH = 'patch';
  static const String DELETE = 'delete';

  /// request method
  static Future<Map> request (
    String url, 
    { data, method }) async {

    data = data ?? {};
    method = method ?? 'GET';

    /// restful 请求处理   
    data.forEach((key, value) {
      if (url.indexOf(key) != -1) {
        url = url.replaceAll(':$key', value.toString());
      }
    });

    /// 打印请求相关信息：请求地址、请求方式、请求参数
    print('请求地址：【' + method + '  ' + url + '】');
    print('请求参数：' + data.toString());

    Dio dio = createInstance();
    var result;

    try {
      Response response = await dio.request(url, data: data, options: new Options(method: method));

      result = response.data;

      /// 打印响应相关信息
      print('响应数据：' + response.toString());
    } on DioError catch (e) {
      /// 打印请求失败相关信息
      print('请求出错：' + e.toString());
    } 

    return result;
  }

  /// 创建 dio 实例对象
  static Dio createInstance () {
    if (dio == null) {
      /// 全局属性：请求前缀、连接超时时间、响应超时时间
      BaseOptions options = new BaseOptions(
          baseUrl: API_PREFIX,
          connectTimeout: CONNECT_TIMEOUT,
          receiveTimeout: RECEIVE_TIMEOUT,
      );

      dio = new Dio(options);
    }

    return dio;
  }

  /// 清空 dio 对象
  static clear () {
    dio = null;
  }

}

调用：
请求类型封装

具体位置使用：

具体使用，不赘述，请查看相关代码；
这里的接口调用依旧是nodejs 提供的接口， nodejsApi

页面路由控制

目标转移到main.dart,这里是一个项目的主入口文件，为了不增加项目的复杂度，这里也将路由控制的相关代码写入。分步骤解释如下：
导包：

注册路由表：

底部导航显示：

头部及按钮

头部icon: Icon(Icons.add_circle_outline), 这里icon flutter 自带了不少的图标，可以自行选择使用，地址：https://api.flutter.dev/flutt…

动画的实现

定义一个动画类

使用：

调用机器 照相机

安装依赖

pubspec.yaml

在这个文件里面，只要写入相关的package，编辑器vscode 会自动下载。pub.dev, 这个dart语言的包整理平台，相当于 我们熟知的 npm 网站，需要什么package，自己去找相关的api。
相机的调用，比较简单，flutter 提供了这个方法，我们只要按照api提示操作即可实现。
使用如下：

效果如下：

使用webview

安装依赖，如上

代码：

效果：

6.心得

强弱类型语言：我们常写js这种弱类型语言，一上来看这个强类型的dart,未免会有点懵逼，个人认为，学习语言应该先把强类型语言打好基础，如C java，会一个js,以后看别的语言会有局限性；
flutter的语法嵌套： 虽然说方法里面嵌套方法，写起来感觉好难受，项目复杂了，编辑器横向的还会出现滚动条，vscode 针对这点也做了友好性的提示，防止多层括号让人眼迷，估计是在vscode 的flutter 插件中植入的；但是，也是因为这样多级自由的嵌套，提供了一个很灵活的方案，一个布局多种方案，可以用不同的widget实现，同时，这就要多学习几个widget，省的像我们web “一个div打天下”的单一解决方案。

7. TODO

• 使用websocket，搭建聊天系统；
• 通讯录页面，分组归类，这个主要得是后端接口来完成；
• 上拉下拉的手势动作；
• 。。。

9. 参考文章

入门介绍
flutter中文网
图标检索
导航示例
dart package
视频课程讲解

flutter 新手，班门弄斧之demo，若有大神见到，敬请指教，有不对不合理之处，敬请指出！我是迩伶贰！