flutter的入门实践到可开发

摘要：继上一篇关于的介绍，是仿照微信界面，因为作为前端开发，有一定的基础，所有写起来，也不是很吃力。班门弄斧之作，若有大神见到，敬请指教，有不对不合理之处，敬请指出我是迩伶贰环境准备以系统为例。

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

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

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

以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，忽略第一条，按照第二条提示的安装环境；

安装编辑器vscode，这里使用vscode,

安装vscode 插件flutter

打开vscode, command+shift+p;

初始化之后，如下

debugger 模式下，跑起来：

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

-- 组件封装

网络请求封装:

    在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

调用：
请求类型封装

具体位置使用：

具体使用，不赘述，请查看相关代码；
这里的接口调用依旧是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提示操作即可实现。
使用如下：

效果如下：

代码：

效果：

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

使用websocket，搭建聊天系统；

通讯录页面，分组归类，这个主要得是后端接口来完成；

上拉下拉的手势动作；

。。。

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

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