Flutter - Le projet Flutter ajoute un support Web

adresse de démonstration : https://github.com/iotjin/jh_flutter_demo
代码不定时更新，请前往github查看最新代码

Référence :
Officiel : Création d'applications Web Flutter
Prise en charge de Flutter Desktop

Le projet flutter ajoute le support Web

Dans le répertoire racine du projet, exécutez : flutter create .commande

flutter create .

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

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

[Solution]
Les noms de package Android et iOS sont incohérents, remplacez-les par le même

Laissez Flutter prendre en charge le Web et exécuter des commandes

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

Précautions pour l'emballage côté web :

• 1. Effacez d'abord les données historiques :

flutter clean
flutter pub get

• 2. Vérifiez si le terminal Web est pris en charge :

flutter config -h

ne prend pas en charge la course

flutter config --enable-web

• 3. Ajouter un support Web aux projets existants

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

• 4. Compiler

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

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

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

Note:

J'ai trouvé index.html et ouvert une page vierge avec un navigateur.
C'est un phénomène normal, contrairement au Web frontal normal, vous pouvez cliquer sur index.html pour y accéder.
Il n'est pas accessible directement en flutter, il faut le placer dans le container pour y accéder, comme par exemple : les pages GitHub, tomcat, etc.

erreur d'emballage Web

[Flutter] Pratique Flutter Web pour les développeurs mobiles (utilisant les pages GitHub pour le déploiement)

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

Modifiez la balise de base dans le fichier index.html dans le résultat de la construction et remplacez-la par le nom de votre entrepôt github, sinon le fichier de ressources de chemin relatif ne sera pas associé.

Modification manuelle :

<base href="$FLUTTER_BASE_HREF">changé de l'original à<base href="/jh_flutter_demo/">

Les commandes d'emballage sont automatiquement modifiées, plus--base-href=/jh_flutter_demo/

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

quelques problèmes

1. Le côté Web ne prend pas en chargePlatform

Error: Unsupported operation: Platform._operatingSystem

utilisé Platform.isAndroidou Platform.isIOS, `Platform' n'est pas pris en charge sur le Web

[solution]

Utilisez d'abord kIsWebpour déterminer s'il s'agit d'un terminal Web, puis utilisezPlatform

2. Vérification du certificat de demande de réseau

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

[solution]

Ajouter un jugement côté web, non utilisé côté web

更新: dio5.xIl est parti après la mise à niveau DefaultHttpClientAdapter, appuyez sur la touche suivante

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

3. Utilisez les consoles Scrollbar et SingleChildScrollView pour signaler les erreurs en même temps

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.

[solution]

添加ScrollController
Flutter Le ScrollController de la barre de défilement n'a pas de ScrollPosition attaché

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. Enjambement d'image

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

[solution]

Je vérifie juste la fonction côté web ici, ce n'est pas nécessaire,
donc j'utilise un composant d'image personnalisé, si c'est une image réseau, charge une image locale par défaut pour s'assurer que l'image par défaut peut être vue sur le côté web

Plusieurs autres solutions sur Internet :

Utilisez le plugin flutter_widget_from_html :
ce plugin peut utiliser des balises HTML dans Flutter Web pour afficher des images et éviter les problèmes inter-domaines. Pour plus de détails, voir : https://pub.dev/packages/flutter_widget_from_html

Configurez le partage de ressources cross-origin (CORS) côté serveur :
définissez des en-têtes de réponse côté serveur pour permettre aux applications Web Flutter de charger des images à partir d'autres domaines.
Pour plus de détails, voir : https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Utilisez l'URI de données base64 : convertissez l'image en URI de données au format base64, puis insérez-la dans HTML, en évitant les problèmes inter-domaines.
Mais cette approche augmente le temps de chargement des pages.

Utilisez un serveur proxy : utilisez un serveur proxy pour charger des images au lieu de l'application Web Flutter, afin d'éviter les problèmes inter-domaines.
Mais cette méthode augmentera la charge sur le serveur.