flutter web开发问题以及修改集

一、跨域名访问图片资源问题。

项目开发接口返回和请求域名不同的图片资源，导致提交线上的时候出现无法访问的问题，

尝试过

• 修改flutter的chrome.dart文件：

结果只是debug直接run的时候chrome给我一个警告提醒，但是对于发布测试环境之后，依然没有效果。还是图片资源无法访问。

• 通过请求图片资源返回unit8list，然后通过unit8list加载资源，结果是请求获取图片的unit8list的时候就有这个跨域问题了，失败

最终解决方案：

创建三个文件original_ui.dart,real_ui.dart,html_img_cors_widget.dart

/*
* original_ui.dart
*/

// ignore: camel_case_types
class platformViewRegistry {
  static registerViewFactory(String viewId, dynamic cb) {}
}

/*
* real_ui.dart
*/

import 'dart:ui' as ui;

// ignore: camel_case_types
class platformViewRegistry {
  static registerViewFactory(String viewId, dynamic cb) {
    // ignore:undefined_prefixed_name
    ui.platformViewRegistry.registerViewFactory(viewId, cb);
  }
}

/*
* html_img_cors_widget.dart
*/


// ignore: avoid_web_libraries_in_flutter
import 'dart:html';
import 'original_ui.dart' if (dart.library.html) 'real_ui.dart' as ui;
import 'package:flutter/material.dart';

class HtmlImgCorsWidget extends StatelessWidget {
  final String imageUrl;
  const HtmlImgCorsWidget({Key? key, required this.imageUrl}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    ui.platformViewRegistry.registerViewFactory(
      imageUrl,
      (int _) => ImageElement()..src = imageUrl,
    );
    return HtmlElementView(
      viewType: imageUrl,
    );
  }
}

在需要的地方使用如下：

HtmlImgCorsWidget(
                    imageUrl: widget.personModel.headImgStr,
                  ),

参考如下：

1.Displaying images on the web：Displaying images on the web | Flutter

HtmlElementView class - widgets library - Dart API 

2.https://github.com/flutter/flutter/issues/41563

3.【flutter】完美解决导入 dart.ui 中缺少 platformViewRegistry.registerViewFactory 方法_圆号本昊的博客-CSDN博客

二、路径转发问题

描述：访问一个html连接，请求之后浏览器内容路径会被转发变为域名+‘#/......’,后面的点点点表示一个新的路径名称，而且原来的url的queryParameters参数也没有了。

解决方案：

首先项目里面lib下看是否已经存在generated_plugin_registrant.dart文件，如果没有存在，你可以在yaml文件中引入connectivity_plus（没有非要说这个，只要有web的桥接三方插件都可以），然后flutter pub get执行后就能看到这个文件，

然后在main.dart里面

import 'package:flutter_web_plugins/flutter_web_plugins.dart';

void main() {
  usePathUrlStrategy(); //加入这个
  runApp(const MyApp());
}