flutter的入门实践到可开发

flutter 的入门记录

前言：

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

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

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

1. 环境准备

以 ios 系统为例。

• 安装 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，若有大神见到，敬请指教，有不对不合理之处，敬请指出！我是迩伶贰！