Flutter多平臺適配機制就是這麼簡單

咱們都知道到Flutter在表現層作到了多端一致性，經過Android、iOS各自平臺下的渲染實現了一致的UI效果。 那麼若是你只是要開發一個適配Android, iOS, Web的三方庫，有什麼好的簡單思路？

Flutter網絡請求

在開發Flutter的時候可使用http核心庫。也可使用社區的其餘封裝類庫，好比dio。二者的底層實現都是http_parser

若是開發者不當心在flutter中直接使用了平臺相關的類庫，則會致使擴平臺運行出錯，好比使用io包下的http在瀏覽器下執行確定會報錯。

http核心庫已經爲咱們作好了平臺適配，下面看一下他是怎麼作的適配：

import 'package:flutter/cupertino.dart';
import 'package:http/http.dart' as http;
void hello(){
  print('a.dart => hello');
  http.get('http://127.0.0.1:8080').then((response){
    debugPrint('response => ${response.statusCode} ${response.body}');
  });
}

這段代碼能夠跑在移動設備，也能夠跑在瀏覽器設備，獲得一致的輸出效果。

http核心庫

如今咱們以get請求爲例，看一下他的內部邏輯：

在http接口類中，最終會執行_withClient來選用Client的實現類，相似靜態代理效果。

具體來講，在編譯爲web使用時，最終導包使用的是src/browser_client.dart, 其底層實現是，dart:html下的HttpRequest, 最終用的是前端的ajax技術：XMLHttpRequests。

/// Used from conditional imports, matches the definition in `client_stub.dart`.
BaseClient createClient() => BrowserClient();

/// A `dart:html`-based HTTP client that runs in the browser and is backed by
/// XMLHttpRequests.
///
/// This client inherits some of the limitations of XMLHttpRequest. It ignores
/// the [BaseRequest.contentLength], [BaseRequest.persistentConnection],
/// [BaseRequest.followRedirects], and [BaseRequest.maxRedirects] fields. It is
/// also unable to stream requests or responses; a request will only be sent and
/// a response will only be returned once all the data is available.
class BrowserClient extends BaseClient

針對非瀏覽器使用的是io類庫，src/io_client.dart, 其底層實現是dart:io下的HttpClient

/// Used from conditional imports, matches the definition in `client_stub.dart`.
BaseClient createClient() => IOClient();

/// A `dart:io`-based HTTP client.
///
/// This is the default client when running on the command line.
class IOClient extends BaseClient

條件導包

這裏有個比較有意思的語法：

http核心庫是如何作到的的平臺差別？

經過觀察src/client.dart的導包狀況，能夠看到以下代碼：

// ignore: uri_does_not_exist
import 'client_stub.dart'
    // ignore: uri_does_not_exist
    if (dart.library.html) 'browser_client.dart'
    // ignore: uri_does_not_exist
    if (dart.library.io) 'io_client.dart';

這裏實際上使用的dart中的特殊語法:條件導包。 相關詳情能夠查閱dart文檔。

簡單來講就是利用有條件的import/export，在編譯期間，差別化導包，從而能夠實現平臺適配。

使用條件導包的具體作法以下：

• 首先定義一個接口，用於多端實現；
• 接口類中利用import/export按需導入，導出對應的實現類庫

export 'src/hw_none.dart' // Stub implementation
    if (dart.library.io) 'src/hw_io.dart' // dart:io implementation
    if (dart.library.html) 'src/hw_html.dart'; // dart:html implementation

運用場景

利用該機制能夠方便的進行多平臺適配。相似的dio也有一段導包差別邏輯src/dio.dart。

import 'entry_stub.dart'
// ignore: uri_does_not_exist
    if (dart.library.html) 'entry/dio_for_browser.dart'
// ignore: uri_does_not_exist
    if (dart.library.io) 'entry/dio_for_native.dart';

順便看下dio和http的依賴狀況。dio是一個http上傳的封裝庫，提供了較多便捷的api，固然相對的也帶了學習成本，具體是否採用就看項目的實際須要。

|-- dio 3.0.7
|   |-- http_parser 3.1.3
|   |   |-- charcode...
|   |   |-- collection...
|   |   |-- source_span...
|   |   |-- string_scanner...
|   |   '-- typed_data...
|   '-- path...

|-- http 0.12.0+2
|   |-- async...
|   |-- http_parser...
|   |-- path...
|   '-- pedantic...