Flutter: el proyecto flutter agrega soporte web

dirección de demostración: https://github.com/iotjin/jh_flutter_demo
代码不定时更新，请前往github查看最新代码

Referencia:
Oficial: Crear aplicaciones web de Flutter
Flutter Desktop Support

El proyecto flutter agrega soporte web

En el directorio raíz del proyecto ejecute: flutter create .comando

flutter create .

// 指定平台
flutter create --platforms=windows,macos,linux .
flutter create --platforms=web .

Error:
Ambiguous organization in existing files: {com.jh, com.example}. The --org command line argument must be specified to recreate project.

[Solución]
Los nombres de los paquetes de Android e iOS son inconsistentes, reemplácelos con el mismo

Permita que Flutter admita web y ejecute comandos

flutter config --enable-web
flutter run -d chrome

Precauciones para el embalaje en el lado web:

• 1. Primero borre los datos históricos:

flutter clean
flutter pub get

• 2. Compruebe si el terminal web es compatible:

flutter config -h

no soporta correr

flutter config --enable-web

• 3. Agregue soporte web a proyectos existentes

// 只添加web端
flutter create --platforms=web .
// 其他平台
flutter create --platforms=windows,macos,linux .
// 默认
flutter create .

• 4. Compilar

// 打开速度一般,兼容性好
flutter build web
flutter build web --release

// 打开速度快，兼容性好
flutter build web --web-renderer html

// 打开速度慢，对于复杂的页面兼容性好
flutter build web --web-renderer canvaskit

Nota:

Encontré index.html y abrí una página en blanco con un navegador.
Este es un fenómeno normal, a diferencia del front-end web normal, puede hacer clic en index.html para acceder a él.
No se puede acceder directamente en flutter, debe colocarse en el contenedor para acceder, como: páginas de GitHub, tomcat, etc.

error de empaquetado web

[Flutter] Práctica web de Flutter para desarrolladores móviles (usando páginas de GitHub para la implementación)

index.html:46 Uncaught ReferenceError: _flutter is not defined
    at index.html:46

Modifique la etiqueta base en el archivo index.html en el resultado de la compilación y cámbielo por el nombre de su almacén de github; de lo contrario, el archivo de recursos de la ruta relativa no se asociará.

Modificación manual:

<base href="$FLUTTER_BASE_HREF">cambiado de original a<base href="/jh_flutter_demo/">

Los comandos de empaquetado se modifican automáticamente, además--base-href=/jh_flutter_demo/

flutter build web --web-renderer html --base-href=/jh_flutter_demo/

algunos problemas

1. El lado web no es compatiblePlatform

Error: Unsupported operation: Platform._operatingSystem

usado Platform.isAndroido Platform.isIOS'Plataforma' no es compatible con la web

[solución]

Primero use kIsWebpara determinar si es un terminal web, y luego usePlatform

2. Verificación de certificado de solicitud de red

Error: Expected a value of type 'DefaultHttpClientAdapter', but got one of type 'BrowserHttpClientAdapter'

[solución]

Agregue un juicio en el lado web, no se usa en el lado web

更新: dio5.xSe ha ido después de la actualización DefaultHttpClientAdapter, presione lo siguiente

dio.httpClientAdapter = IOHttpClientAdapter()
  ..onHttpClientCreate = (client) {
    
    
    client.badCertificateCallback = (X509Certificate cert, String host, int port) => true;
    return client;
  };

3. Use las consolas Scrollbar y SingleChildScrollView para informar errores al mismo tiempo

The Scrollbar's ScrollController has no ScrollPosition attached.

The following assertion was thrown while notifying status listeners for AnimationController:
The Scrollbar's ScrollController has no ScrollPosition attached.

A Scrollbar cannot be painted without a ScrollPosition. 

The Scrollbar attempted to use the provided ScrollController. This ScrollController should be associated with the ScrollView that the Scrollbar is being applied to.When providing your own ScrollController, ensure both the Scrollbar and the Scrollable widget use the same one.

[solución]

添加ScrollController
Flutter El ScrollController de la barra de desplazamiento no tiene ScrollPosition adjunto

final yourScrollController = ScrollController();

Scrollbar(
  isAlwaysShown: true,
  thickness: 10,
  controller: yourScrollController, // Here 
  child: ListView.builder(
    padding: EdgeInsets.zero,
    scrollDirection: Axis.vertical,
    controller: yourScrollController, // AND Here
    itemCount: yourRecordList?.length
    ....
  )
)

4. Expansión de imágenes

Access to XMLHttpRequest at 'https://xxx.png' from origin 'http://localhost:54604' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. js_util_patch.dart:80 GET https://xxx.png net::ERR_FAILED 302

[solución]

Solo verifico la función en el lado web aquí, no es necesario,
así que uso un componente de imagen personalizado, si es una imagen de red, cargue una imagen local predeterminada para asegurar que la imagen predeterminada se pueda ver en el lado web

Varias otras soluciones en Internet:

Use el complemento flutter_widget_from_html:
este complemento puede usar etiquetas HTML en Flutter Web para mostrar imágenes y evitar problemas entre dominios. Para obtener más información, consulte: https://pub.dev/packages/flutter_widget_from_html

Configure el uso compartido de recursos de origen cruzado (CORS) en el lado del servidor:
establezca encabezados de respuesta en el lado del servidor para permitir que las aplicaciones web de Flutter carguen imágenes de otros dominios.
Para obtener más información, consulte: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Use URI de datos base64: convierta la imagen a URI de datos de formato base64 y luego insértela en HTML, evitando problemas entre dominios.
Pero este enfoque aumenta el tiempo de carga de la página.

Use un servidor proxy: use un servidor proxy para cargar imágenes en lugar de la aplicación web Flutter, de modo que se puedan evitar problemas entre dominios.
Pero este método aumentará la carga del servidor.