最近闲来无事学习flutter模仿开发一个应用用来练手, 准备将学习过程记录成一系列文章备忘, 本文为该系列第(1)篇, 全部代码已上传: github 主要为基础准备说明

导航

1. flutter 安装
2. 开发IDE
3. 接口数据调用
4. 项目结构

flutter 安装

   关于flutter安装这里就不详细说明了. 按照flutter官网进行即可. 这里备注一点关于android studio在flutter docter里会要求安装,但实际只需要安装android模拟器即可. 因为本人开发环境是macbook pro 2016 所以并没有安装android studio只是安装了android的模拟器

开发IDE

   VS Code 安装方便,只需要在应用市场下载flutter插件即可

接口数据调用

   关于后端数据调用,使用了dio库.将request做了简单的封装.封装代码是网上早的(具体地址忘了😓)

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

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

  /// default options
  static const String API_PREFIX = 'http://xxxxxx/v1';
  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,Map<String,dynamic> queryParameters}) async {
    data = data ?? {};
    queryParameters = queryParameters ?? {};
    method = method ?? 'GET';

    /// restful 请求处理
    /// /gysw/search/hist/:user_id        user_id=27
    /// 最终生成 url 为     /gysw/search/hist/27
    data.forEach((key, value) {
      if (url.indexOf(key) != -1) {
        url = url.replaceAll(':$key', value.toString());
      }
    });
    /// 打印请求相关信息：请求地址、请求方式、请求参数
    print('请求地址：【' + method + '  ' + url + '】');
    print('请求参数：' + data.toString());
    print('请求参数：' + queryParameters.toString());
    Dio dio = createInstance();
    var result;
    try {
      Response response = await dio.request(url,
          data: data,
          queryParameters:queryParameters,
          options: new Options(method: method));
      result = json.decode(response.data.toString());
      /// 打印响应相关信息
      print('响应数据：' + response.toString());
    } on DioError catch (e) {
      /// 打印请求失败相关信息
      print('请求出错：' + e.toString());
    }
    return result;
  }

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

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

实际使用方式实例

 Future<IndexData> data() async {
    var data =await HttpUtils.request("/micro/index/data",
    method: HttpUtils.GET);
    var ret = new IndexDataResp.fromJson(data);
    if(ret.code == 0) {
      return ret.data;
    }
    return ret.data;
  }

由于不熟悉dart语言,在最开始返回json数据处理纠结了很久,最终找到一个JSONFormat4Flutter代码生成工具才得以解决工具地址: github地址

项目结构

项目结构.png