flutter项目初始化

0、flutter 官方插件网址

flutter官方链接
数据模型转换

注意：使用 flutter 的时候一定要把数据放在父组件中（主要是指Dio数据请求），往子组件传展示

1、flutter项目环境配置

待做

2、flutter数据本地存储（shared_preferences）

1、dependencies:
shared_preferences: ^2.2.2

2、utils 包里面创建文件：
shared_preferences.dart

import 'dart:convert';

import 'package:shared_preferences/shared_preferences.dart';

class JSpUtil {
   
    JSpUtil._internal();
    factory JSpUtil() => _instance;
    static final JSpUtil _instance = JSpUtil._internal();


    static late SharedPreferences _preferences;
    static Future<JSpUtil> getInstance() async {
   
        _preferences = await SharedPreferences.getInstance();
        return _instance;
    }


    /// 通用设置持久化数据
    static setLocalStorage<T>(String key, T value) {
   
        String type = value.runtimeType.toString();

        switch (type) {
   
            case "String":
                _preferences.setString(key, value as String);
                break;
            case "int":
                _preferences.setInt(key, value as int);
                break;
            case "bool":
                _preferences.setBool(key, value as bool);
                break;
            case "double":
                _preferences.setDouble(key, value as double);
                break;
            case "List":
                _preferences.setStringList(key, value as List<String>);
                break;
        }
    }

    /// 获取持久化数据
    static dynamic getLocalStorage<T>(String key) {
   
        dynamic value = _preferences.get(key);
        if (value.runtimeType.toString() == "String") {
   
            if (_isJson(value)) {
   
                return json.decode(value);
            }
        }
        return value;
    }



    /// 获取持久化数据中所有存入的key
    static Set<String> getKeys() {
   
        return _preferences.getKeys();
    }

    /// 获取持久化数据中是否包含某个key
    static bool containsKey(String key) {
   
        return _preferences.containsKey(key);
    }

    /// 删除持久化数据中某个key
    static Future<bool> remove(String key) async {
   
        return await _preferences.remove(key);
    }

    /// 清除所有持久化数据
    static Future<bool> clear() async {
   
        return await _preferences.clear();
    }

    /// 重新加载所有数据,仅重载运行时
    static Future<void> reload() async {
   
        return await _preferences.reload();
    }

    /// 判断是否是json字符串
    static _isJson(String value) {
   
        try {
   
            const JsonDecoder().convert(value);
            return true;
        } catch(e) {
   
            return false;
        }
    }   
}

3、入口函数加上两句话，不然报错

void main() async {
   
    // 下面两句是持久化数据用的
    WidgetsFlutterBinding.ensureInitialized();
    await JSpUtil.getInstance();
    
    runApp(const ApplicationApp());
} 

4、使用

// 1、取值
JSpUtil.getLocalStorage('token');

// 2、存值
JSpUtil.setLocalStorage("token", "需要存的值");

3、GetX 中的数据响应式配合本地存储使用

1、创建 store 仓库

// 根目录下创建 store/store.dart 文件

// store.dart 文件里面
import 'package:get/get.dart';
import 'package:hook_up_rant/utils/shared_preferences.dart';

class StoreIndex {
   
	// 变量（首先从本地储存取，没有的话就定义一个） 
   static var token = JSpUtil.getLocalStorage("token").toString() == "null" ? "".obs :  (JSpUtil.getLocalStorage("token").toString()).obs;
    
    static void updateToken(String str) {
   
    	// 改变状态
        token.value = str;
        // 同时持久化到本地存储
        JSpUtil.setLocalStorage("token", str);
    }
}

2、使用

// 存储数据并且持久化
StoreIndex.updateToken('存储的数据');

// 取出数据
StoreIndex.token.value;
// 在页面上渲染需要使用 Obx(() => Container()) 包裹, 使数据具有响应式

4、Dio 封装使用详解

1、安装 Dio

dio: ^4.0.0

2、封装 Dio

// 在 utils 包里面创建 http 目录
// 然后创建四个文件


// 1、 http_request.dart 核心文件
import 'package:dio/dio.dart';
import 'package:hook_up_rant/utils/http/http_interceptor.dart';
import 'package:hook_up_rant/utils/http/http_options.dart';

// http 请求单例类
class HttpRequest {
   
    // 工厂构造方法
    factory HttpRequest() => _instance;
    // 初始化一个单例实例
    static final HttpRequest _instance = HttpRequest._internal();
    // dio 实例
    Dio? dio;
    // 内部构造方法
    HttpRequest._internal() {
   
        if (dio == null) {
   
            // BaseOptions、Options、RequestOptions 都可以配置参数，优先级别依次递增，且可以根据优先级别覆盖参数
            BaseOptions baseOptions = BaseOptions(
                baseUrl: HttpOptions.BASE_URL,
                connectTimeout: HttpOptions.CONNECT_TIMEOUT,
                receiveTimeout: HttpOptions.RECEIVE_TIMEOUT,
                headers: {
   },
            );
            // 没有实例 则创建之
            dio = Dio(baseOptions);
            // 添加拦截器
            dio!.interceptors.add(HttpInterceptor());

            // 打印日志
            // dio!.interceptors.add(LogInterceptor(responseBody: true));
        }
    }

    /// 初始化公共属性 如果需要覆盖原配置项 就调用它
    ///
    /// [baseUrl] 地址前缀
    /// [connectTimeout] 连接超时赶时间
    /// [receiveTimeout] 接收超时赶时间
    /// [headers] 请求头
    /// [interceptors] 基础拦截器
    // void init({ String? baseUrl, int? connectTimeout, int? receiveTimeout, Map? headers, List? interceptors }) {
   
    //     print("许潇111 --- $baseUrl  --   $connectTimeout  ---   $receiveTimeout  --- $headers  --  $interceptors");
    //     dio!.options.baseUrl = baseUrl ?? "";
    //     dio!.options.connectTimeout = connectTimeout ?? 10000;
    //     dio!.options.receiveTimeout = receiveTimeout ?? 10000;
    //     dio!.options.headers = headers;
    //     if (interceptors != null && interceptors.isNotEmpty) {
   
    //         dio!.interceptors.addAll(interceptors);
    //     }
    // }

    /// 设置请求头
    void setHeaders(Map<String, dynamic> headers) {
   
        dio!.options.headers.addAll(headers);
    }

    final CancelToken _cancelToken = CancelToken();
    /*
    * 取消请求
    *
    * 同一个cancel token 可以用于多个请求
    * 当一个cancel token取消时，所有使用该cancel token的请求都会被取消。
    * 所以参数可选
    */
    void cancelRequests({
   CancelToken? token}) {
   
        token ?? _cancelToken.cancel("cancelled");
    }

    /// GET
    Future get(String path, {
   Map<String, dynamic>? params, Options? options, CancelToken? cancelToken, ProgressCallback? onReceiveProgress}) async {
   
        

        Response response = await dio!.get(
            path,
            queryParameters: params,
            options: options,
            cancelToken: cancelToken ?? _cancelToken,
            onReceiveProgress: onReceiveProgress
        );
        return response.data;
    }

    /// POST
    Future post(String path, {
    Map<String, dynamic>? params, Options? options, CancelToken? cancelToken, ProgressCallback? onSendProgress, ProgressCallback? onReceiveProgress}) async {
   
        
        Response response = await dio!.post(
            path,
            data: params,
            options: options,
            cancelToken: cancelToken ?? _cancelToken,
            onSendProgress: onSendProgress,
            onReceiveProgress: onReceiveProgress
        );
        return response.data;
    }

    /// 文件上传
    Future postFormData(String path, {
    Map<String, dynamic>? params,