Flutter 装修计划——将开发中常用的封装一下

种类

• 封装flutter_screenutil屏幕适配插件
• 开发常用Dio请求

---

Flutter1.20之后的版本封装已修改

---

flutter_screenutil

只是封装了几个常用的，如果您自己有需要，可以再次往里面封装
封装目的：
如果插件作者更改了代码后，只需要更改自己的库就行，而不需要找到每一个dart页面更改代码

import 'package:flutter_screenutil/flutter_screenutil.dart';

//  封装屏幕适配类

class ScreenAdaper {
  // 初始化
  static init(context){
    ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);
  }
  // 设置高度
  static setWidth(double n){
    return ScreenUtil.getInstance().setWidth(n);
  }

  // 设置宽度
  static setHeight(double n){
    return ScreenUtil.getInstance().setHeight(n);
  }

  // 获取屏幕宽度
  static getScreenWidth(){
    return ScreenUtil.screenWidthDp;
  }

  // 获取屏幕高度
  static getScreenHeight(){
    return ScreenUtil.screenHeightDp;
  }

}import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

//  封装屏幕适配类

class ScreenAdapter {
  // 初始化
  static init(context){
    //设置字体大小根据系统的“字体大小”辅助选项来进行缩放,默认为false
    ScreenUtil.init(context, designSize: Size(750, 1334), allowFontScaling: true);
  }
  // 设置高度
  static setWidth(double n){
    return ScreenUtil().setWidth(n);
  }

  // 设置宽度
  static setHeight(double n){
    return ScreenUtil().setHeight(n);
  }

  // 获取屏幕像素宽度(实际宽度dp与设计吃水px之比)
  static getScreenWidth(){
    return ScreenUtil().scaleWidth;
  }

  // 获取屏幕像素高度(实际高度dp与设计吃水px之比)
  static getScreenHeight(){
    return ScreenUtil().scaleHeight;
  }

  // 获取屏幕宽度
  static getPxWidth(){
    return ScreenUtil().screenWidth;
  }

  // 获取屏幕高度
  static getPxHeight(){
    return ScreenUtil().screenHeight;
  }

  // 适配字体高度
  static size(double size){
    return ScreenUtil().setSp(size);
  }
}

Dio

创建三个Dart文件
api_url：统一存放文件路径
api.dart：请求方法
httpHeaders.dart：自定义请求头

api_url

const base_url = 'http://www.baidu.com';      // 测试接口

const path = {
  'swiperData':base_url + '/banner',             // 轮播图数据
};

api.dart

import 'package:dio/dio.dart';
import 'package:project/config/httpHeaders.dart';
import 'package:project/config/api_url.dart';
import 'dart:async';                  // 异步的包
import 'dart:io';                     // 设置属性的时候使用的包

// import 'package:project/pages/model/SwiperModel.dart';

// 为什么要用Future： https://segmentfault.com/a/1190000014396421?utm_source=tag-newest
// Future：可以指定返回值的类型，提高代码可读性

class Api {

  Dio dio = new Dio();
  // 统一Get请求
  Future getData(url, {formData}) async {
    try{
      Response response;
      // dio.options.contentType=ContentType.parse("application/x-www-form-urlencoded")    // 设置数据返回格式
      if(formData == null){
        response = await dio.get(path[url]);
      }else{
        response = await dio.get(path[url], queryParameters:formData);
      }
      
      return response;
    }catch(e){
      return print('ERROR:======>${e}');
    }
  }
  
  // 统一Post请求
  Future postData(url, {formData}) async {
    try{
      Response response;
      dio.options.headers = httpHeaders;      // 设置请求头
      if(formData == null){
        response = await dio.post(path[url]);
      }else{
        response = await dio.post(path[url], data:formData);
      }
      
      return response;
    }catch(e){
      return print('ERROR:======>${e}');
    }
  }
}

httpHeaders

const httpHeaders={
  'Accept': 'application/json, text/plain, */*',
  'Accept-Encoding': 'gzip, deflate, br',
  'Accept-Language': 'zh-CN,zh;q=0.9',
  'Connection': 'keep-alive',
  'Content-Type': 'application/json',
  'Cookie': '_ga=GA1.2.676402787.1548321037; GCID=9d149c5-11cb3b3-80ad198-04b551d; _gid=GA1.2.359074521.1550799897; _gat=1; Hm_lvt_022f847c4e3acd44d4a2481d9187f1e6=1550106367,1550115714,1550123110,1550799897; SERVERID=1fa1f330efedec1559b3abbcb6e30f50|1550799909|1550799898; Hm_lpvt_022f847c4e3acd44d4a2481d9187f1e6=1550799907',
  'Host': 'time.geekbang.org',
  'Origin': 'https://time.geekbang.org',
  'Referer': 'https://time.geekbang.org/',
  'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.77 Safari/537.36'
};

在自己的Dart中使用：
Home.dart
因为首页的代码太多，我只是把重要的复制出来，在开头的时候 记得引入

import 'dart:convert';								// json.decode() 需要
import 'package:project/config/api.dart';			// api接口方法
import 'package:flutter_spinkit/flutter_spinkit.dart';		// loading等待插件

// FutureBuilder 可以完美的解决异步请求，不用setState改变，就可以渲染
return FutureBuilder(
      future: api.getData('swiperData'),			// 调用api接口传入api_url中定义的路径
      builder:(context, snapshot){
        // 判断是否有值
        if(snapshot.hasData){
        // 这里的数据由于我的后台给我的就是字符串，我就用最简单的办法json.decode序列化了。
        // 如果你不喜欢用这种方法，可以使用model数据 去序列化后台返回的数据，这样你就可以通过 . 来调用数据了
          var data = json.decode(snapshot.data.toString());   // 转为List

          List swiper = data;
          
          return ListView(
            children: <Widget>[
              SwiperWidget(swiperDataList: swiper)			// 传给Swiper
            ],
          );
        }else{
          return Center(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                SpinKitFadingCircle(
                  color: Colors.grey,
                  size: 50.0,
                  // controller: AnimationController(vsync: context, duration: const Duration(milliseconds: 1200)),
                ),
                Text('正在加载中请稍后')
              ],
            )
          );
        }
      }
    );