最近項目中，用到了flutter中的webview加載帶有echarts控件的html文件，但是發現圖表一直無法顯示，通過查詢相關資料，分析apk包文件，知道了是由于flutter項目中的文件打包后的路徑發生變化，造成找不到相關依賴，特此記錄一下，使用下面這個方法便可以解析出Android和IOS打包后的apk中資源文件的實際位置。

///獲取打包后的資源文件實際路徑
///如assets/files/index.html
String getAssetsPath(String path) {
  if (defaultTargetPlatform == TargetPlatform.android) {
    return 'file:///android_asset/flutter_assets/' + path;
  } else {
    return 'file://Frameworks/App.framework/flutter_assets/' + path;
  }
}

例如，你的資源文件是在flutter項目的根目錄下的 'assets/files/echart-pie.html',
那 'getAssetsPath('assets/files/echart-pie.html')'才是打包成apk后，資源文件的實際路徑。

image.png

image.png

按照上面的操作，你會發現在android設備上已經可以正常顯示本地html頁面了，但是IOS設備上還是一臉懵逼；不要慌，這塊是由于webview_flutter本來就不支持加載本地文件，這時我們還需要修改下插件IOS部分的源碼，FlutterWebView.m文件：

image.png

- (bool)loadUrl:(NSString*)url withHeaders:(NSDictionary<NSString*, NSString*>*)headers {
    NSURL* nsUrl = [NSURL URLWithString:url];
    if (!nsUrl) {
        return false;
    }
    NSMutableURLRequest* request = [NSMutableURLRequest requestWithURL:nsUrl];
    [request setAllHTTPHeaderFields:headers];

    //判斷url的加載方式
    if([url hasPrefix:@"http"]) {
        [_webView loadRequest:request];
    }else{
        // 我自己項目中傳過來的路徑中含有@"file://"，所以需要替換為空，實際應以當前項目為主
        url = [url stringByReplacingOccurrencesOfString:@"file://" withString:@""];
        if (@available(iOS 9.0, *)) {
            NSURL *findUrl = [NSURL fileURLWithPath:[NSString stringWithFormat:@"%@/%@", [[NSBundle mainBundle] bundlePath], url]];

            [_webView loadFileURL:findUrl allowingReadAccessToURL:[findUrl URLByDeletingLastPathComponent]];
        } else {
            // Fallback on earlier versions
            NSLog(@"webview_flutter:  loadFileUrl error");
        }
    }
    return true;
}

通過以上騷操作，就可以實現webview_flutter在android和ios設備上加載本地html文件了。

最后：推薦一個插件，已經在官方的基礎上進行了優化
webview_flutter_plus