Flutter - The flutter project adds web support

demo address: https://github.com/iotjin/jh_flutter_demo
代码不定时更新，请前往github查看最新代码

Reference:
Official: Building Flutter Web Applications
Flutter Desktop Support

The flutter project adds web support

In the root directory of the project run: flutter create .command

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.

[Solution]
Android and iOS package names are inconsistent, replace them with the same

Let Flutter support web and run commands

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

Precautions for packaging on the web side:

• 1. First clear the historical data:

flutter clean
flutter pub get

• 2. Check whether the web terminal is supported:

flutter config -h

does not support running

flutter config --enable-web

• 3. Add web support to existing projects

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

• 4. Compile

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

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

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

Note:

I found index.html, and opened a blank page with a browser.
This is a normal phenomenon, unlike the normal front-end web, you can click index.html to access it.
It cannot be accessed directly in flutter, it must be placed in the container to access, such as: GitHub pages, tomcat, etc.

web packaging error

[Flutter] Flutter Web practice for mobile developers (using GitHub Pages for deployment)

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

Modify the base tag in the index.html file in the build result, and change it to the name of your github warehouse, otherwise the relative path resource file will not be associated.

Manual modification:

<base href="$FLUTTER_BASE_HREF">changed from original to<base href="/jh_flutter_demo/">

Packaging commands are automatically modified, plus--base-href=/jh_flutter_demo/

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

some problems

1. The web side does not supportPlatform

Error: Unsupported operation: Platform._operatingSystem

used Platform.isAndroidor Platform.isIOS, `Platform' is not supported on the web

[solution]

First use kIsWebto determine whether it is a web terminal, and then usePlatform

2. Network request certificate verification

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

[solution]

Add a judgment on the web side, not used on the web side

更新: dio5.xIt is gone after the upgrade DefaultHttpClientAdapter, press the following

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

3. Use the Scrollbar and SingleChildScrollView consoles to report errors at the same time

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 The Scrollbar’s ScrollController has no ScrollPosition attached

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. Picture spanning

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]

I just check the function on the web side here, it is not necessary,
so I use a custom picture component, if it is a network picture, load a default local picture to ensure that the default picture can be seen on the web side

Several other solutions on the Internet:

Use the flutter_widget_from_html plugin:
This plugin can use HTML tags in Flutter Web to display images and avoid cross-domain issues. For details, see: https://pub.dev/packages/flutter_widget_from_html

Set up Cross-Origin Resource Sharing (CORS) on the server side:
Set response headers on the server side to allow Flutter web applications to load images from other domains.
For details, see: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Use base64 data URI: convert the image to base64 format data URI, and then insert it into HTML, avoiding cross-domain problems.
But this approach increases page load time.

Use a proxy server: Use a proxy server to load images instead of the Flutter web application, so that cross-domain issues can be avoided.
But this method will increase the burden on the server.