flutterdartflutter-dependenciesdart-html

Flutter 'timezone' package does not work on Flutter web when built for release (works when debugging locally)

I am building an app for Flutter web and attempting to use the timezone package.

When building locally for debugging in Chrome, the package works perfectly. However, when I deploy the app for release, in my case to the Azure app service, the Flutter app fails with

Invalid argument(s): Invalid typed array length: 1008813135

main.dart

import 'package:timezone/browser.dart' as tz;

Future<void> _setup() async {
    await tz.initializeTimeZone();     
  }

  // This method fails with 'Invalid typed array length'.
  void _getTime() {
    setState(() {
      var newYork = tz.getLocation('America/New_York');
      _now = tz.TZDateTime.now(newYork);
    });
  }

I built the web app with 'flutter build web'. The way I deployed the app is by just copying the contents in \build\web to a folder under wwwroot on my web server (app service). The error I am seeing is:

To share full details, I created a minimum repro Flutter project, which is found in this GitHub repo. Please note that this project works when run locally. The problem occurs when the release version is deployed on a web server.

I see instructions specific to the Flutter web in pub.dev and I should have followed it but the error still occurs in the minimum project.

Also, I see a discussion around the timezone package.

One workaround I see in the GitHub discussion is to add below in pubspec.yaml.

  assets:
      - packages/timezone/data/latest_10y.tzf

And then load the timezone database with:

 await tz.initializeTimeZone('assets/packages/timezone/data/latest_10y.tzf');

This changed the error message to below.

enter image description here

On the web server, I do see the tzf file. So, I don't understand why the database file is not found.

enter image description here

Any tips will be appreciated!

Solution

  • I just deployed the same files built with 'flutter build web' as the Azure Static Web App and the workaround below worked.

     assets:
      - packages/timezone/data/latest_10y.tzf

    Load the timezone database with:

    await tz.initializeTimeZone('assets/packages/timezone/data/latest_10y.tzf');

    This workaround did not work when the same files were deployed as Azure App Service. I am still interested to know if there is a way to make it work on the App Service, in case someone figured it out.