最近闲来无事学习flutter模仿开发一个应用用来练手, 准备将学习过程记录成一系列文章备忘, 本文为该系列第(1)篇, 全部代码已上传: github 主要为基础准备说明
导航
- flutter 安装
- 开发IDE
- 接口数据调用
- 项目结构
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
