Flutter 裝修計劃——將開發中常用的封裝一下

種類

• 封裝flutter_screenutil屏幕適配插件
• 開發常用Dio請求

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;
  }

}

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('正在加載中請稍後')
              ],
            )
          );
        }
      }
    );