SVG Assets Load Error (Web, Chrome)

[sebcrisan]

Description

When using the carbon_flutter package in my Flutter Web application, I encounter multiple errors related to SVG asset loading. The error messages suggest that the Flutter Web engine is unable to fetch the required SVG assets, even though the HTTP requests succeed. The server responds with an HTTP status of 404 for each SVG asset.

Error Logs

Error while trying to load an asset: Flutter Web engine failed to fetch
"assets/packages/carbon/assets/svg/notification/info-lowcontrast.svg". HTTP request succeeded, but the server responded with HTTP
status 404.

══╡ EXCEPTION CAUGHT BY SVG ╞═══════════════════════════════════════════════════════════════════════
The following assertion was thrown resolving a single-frame picture stream:
Unable to load asset: "packages/carbon/assets/svg/notification/info-lowcontrast.svg".
The asset does not exist or has empty data.

When the exception was thrown, this was the stack:
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 288:49  throw_
packages/flutter/src/services/asset_bundle.dart 328:9                         <fn>
dart-sdk/lib/async/zone.dart 1661:54                                          runUnary
dart-sdk/lib/async/future_impl.dart 147:18                                    handleValue
dart-sdk/lib/async/future_impl.dart 784:44                                    handleValueCallback
dart-sdk/lib/async/future_impl.dart 813:13                                    _propagateToListeners
dart-sdk/lib/async/future_impl.dart 584:5                                     [_completeWithValue]
dart-sdk/lib/async/future_impl.dart 657:7                                     callback
dart-sdk/lib/async/schedule_microtask.dart 40:11                              _microtaskLoop
dart-sdk/lib/async/schedule_microtask.dart 49:5                               _startMicrotaskLoop
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 177:15           <fn>

Picture provider: ExactAssetPicture(name:
  "packages/carbon/assets/svg/notification/info-lowcontrast.svg", bundle: null, colorFilter: null)
Picture key: AssetBundlePictureKey(bundle: PlatformAssetBundle#e8693(), name:
  "packages/carbon/assets/svg/notification/info-lowcontrast.svg", colorFilter: null, theme:
  SvgTheme(currentColor: Color(0xff000000), fontSize: 14, xHeight: 7))
════════════════════════════════════════════════════════════════════════════════════════════════════
Error while trying to load an asset: Flutter Web engine failed to fetch
"assets/packages/carbon/assets/svg/notification/close-lowcontrast.svg". HTTP request succeeded, but the server responded with HTTP
status 404.
Error while trying to load an asset: Flutter Web engine failed to fetch
"assets/packages/carbon/assets/svg/notification/error-lowcontrast.svg". HTTP request succeeded, but the server responded with HTTP
status 404.
Error while trying to load an asset: Flutter Web engine failed to fetch
"assets/packages/carbon/assets/svg/notification/warning-lowcontrast.svg". HTTP request succeeded, but the server responded with
HTTP status 404.
Error while trying to load an asset: Flutter Web engine failed to fetch
"assets/packages/carbon/assets/svg/notification/success-lowcontrast.svg". HTTP request succeeded, but the server responded with
HTTP status 404.
Error while trying to load an asset: Flutter Web engine failed to fetch
"assets/packages/carbon/assets/svg/notification/info-highcontrast.svg". HTTP request succeeded, but the server responded with HTTP
status 404.
Error while trying to load an asset: Flutter Web engine failed to fetch
"assets/packages/carbon/assets/svg/notification/close-highcontrast.svg". HTTP request succeeded, but the server responded with HTTP
status 404.
Error while trying to load an asset: Flutter Web engine failed to fetch
"assets/packages/carbon/assets/svg/notification/error-highcontrast.svg". HTTP request succeeded, but the server responded with HTTP
status 404.
Error while trying to load an asset: Flutter Web engine failed to fetch
"assets/packages/carbon/assets/svg/notification/warning-highcontrast.svg". HTTP request succeeded, but the server responded with
HTTP status 404.
Error while trying to load an asset: Flutter Web engine failed to fetch
"assets/packages/carbon/assets/svg/notification/success-highcontrast.svg". HTTP request succeeded, but the server responded with
HTTP status 404.
Another exception was thrown: Unable to load asset: "packages/carbon/assets/svg/notification/close-lowcontrast.svg".
Another exception was thrown: Unable to load asset: "packages/carbon/assets/svg/notification/error-lowcontrast.svg".
Another exception was thrown: Unable to load asset: "packages/carbon/assets/svg/notification/warning-lowcontrast.svg".
Another exception was thrown: Unable to load asset: "packages/carbon/assets/svg/notification/success-lowcontrast.svg".
Another exception was thrown: Unable to load asset: "packages/carbon/assets/svg/notification/info-highcontrast.svg".
Another exception was thrown: Unable to load asset: "packages/carbon/assets/svg/notification/close-highcontrast.svg".
Another exception was thrown: Unable to load asset: "packages/carbon/assets/svg/notification/error-highcontrast.svg".
Another exception was thrown: Unable to load asset: "packages/carbon/assets/svg/notification/warning-highcontrast.svg".
The Flutter DevTools debugger and profiler on Chrome is available at: http://127.0.0.1:9100?uri=http://127.0.0.1:45395/7_I9ZyM9hX4=
Another exception was thrown: Unable to load asset: "packages/carbon/assets/svg/notification/success-highcontrast.svg".

Relevant code

It's just the example you have provided except the index.dart has been omitted and files are imported directly.

main.dart

import 'package:carbon_flutter/carbon.dart';
import 'package:flutter/material.dart';
import 'examples/notification.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return CarbonApp(title: 'Carbon Examples', home: CNotificationExample());
  }
}

notification.dart

import 'package:flutter/material.dart';
import 'package:carbon_flutter/carbon.dart';

class CNotificationExample extends StatelessWidget {
  const CNotificationExample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: CColors.gray100,
      body: SingleChildScrollView(
        child: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              const SizedBox(height: 48),
              CText(
                data: 'Toast notification',
                style: TextStyle(fontSize: 32),
              ),
              const SizedBox(height: 24),
              Row(
                mainAxisSize: MainAxisSize.min,
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Column(
                    children: [
                      CNotification.toast(
                        onCloseButtonTap: () {},
                        title: CText(data: 'Notification title'),
                        subtitle: CText(data: 'Subtitle text goes here.'),
                        caption: CText(data: 'Time stamp [00:00:00]'),
                      ),
                      const SizedBox(height: 8),
                      CNotification.toast(
                        onCloseButtonTap: () {},
                        kind: CNotificationKind.error,
                        title: CText(data: 'Notification title'),
                        subtitle: CText(data: 'Subtitle text goes here.'),
                        caption: CText(data: 'Time stamp [00:00:00]'),
                      ),
                      const SizedBox(height: 8),
                      CNotification.toast(
                        onCloseButtonTap: () {},
                        kind: CNotificationKind.warning,
                        title: CText(data: 'Notification title'),
                        subtitle: CText(data: 'Subtitle text goes here.'),
                        caption: CText(data: 'Time stamp [00:00:00]'),
                      ),
                      const SizedBox(height: 8),
                      CNotification.toast(
                        onCloseButtonTap: () {},
                        kind: CNotificationKind.success,
                        title: CText(data: 'Notification title'),
                        subtitle: CText(data: 'Subtitle text goes here.'),
                        caption: CText(data: 'Time stamp [00:00:00]'),
                      ),
                      const SizedBox(height: 8),
                    ],
                  ),
                  const SizedBox(width: 16),
                  Column(
                    children: [
                      CNotification.toast(
                        onCloseButtonTap: () {},
                        contrast: CNotificationContrast.high,
                        title: CText(data: 'Notification title'),
                        subtitle: CText(data: 'Subtitle text goes here.'),
                        caption: CText(data: 'Time stamp [00:00:00]'),
                      ),
                      const SizedBox(height: 8),
                      CNotification.toast(
                        onCloseButtonTap: () {},
                        contrast: CNotificationContrast.high,
                        kind: CNotificationKind.error,
                        title: CText(data: 'Notification title'),
                        subtitle: CText(data: 'Subtitle text goes here.'),
                        caption: CText(data: 'Time stamp [00:00:00]'),
                      ),
                      const SizedBox(height: 8),
                      CNotification.toast(
                        onCloseButtonTap: () {},
                        contrast: CNotificationContrast.high,
                        kind: CNotificationKind.warning,
                        title: CText(data: 'Notification title'),
                        subtitle: CText(data: 'Subtitle text goes here.'),
                        caption: CText(data: 'Time stamp [00:00:00]'),
                      ),
                      const SizedBox(height: 8),
                      CNotification.toast(
                        onCloseButtonTap: () {},
                        contrast: CNotificationContrast.high,
                        kind: CNotificationKind.success,
                        title: CText(data: 'Notification title'),
                        subtitle: CText(data: 'Subtitle text goes here.'),
                        caption: CText(data: 'Time stamp [00:00:00]'),
                      ),
                      const SizedBox(height: 8),
                    ],
                  ),
                ],
              ),
              const SizedBox(height: 24),
              CText(
                data: 'Inline notification',
                style: TextStyle(fontSize: 32),
              ),
              const SizedBox(height: 24),
              SizedBox(
                width: MediaQuery.of(context).size.width * 0.4,
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    CNotification.inline(
                      onCloseButtonTap: () {},
                      title: CText(data: 'Notification title'),
                      subtitle: CText(data: 'Subtitle text goes here.'),
                      actions: [
                        CNotificationActionButton(
                            child: CText(data: 'Action'), onTap: () {}),
                      ],
                    ),
                    const SizedBox(height: 16),
                    CNotification.inline(
                      onCloseButtonTap: () {},
                      title: CText(data: 'Notification title'),
                      subtitle: CText(
                          data:
                              'Long text. Long text. Long text. Long text. Long text. Long text. Long text. Long text.'),
                      actions: [
                        CNotificationActionButton(
                            child: CText(data: 'Action'), onTap: () {}),
                      ],
                    ),
                    const SizedBox(height: 16),
                    CNotification.inline(
                      onCloseButtonTap: () {},
                      kind: CNotificationKind.error,
                      title: CText(data: 'Notification title'),
                      subtitle: CText(data: 'Subtitle text goes here.'),
                      actions: [
                        CNotificationActionButton(
                            child: CText(data: 'Action'), onTap: () {}),
                      ],
                    ),
                    const SizedBox(height: 16),
                    CNotification.inline(
                      onCloseButtonTap: () {},
                      kind: CNotificationKind.warning,
                      title: CText(data: 'Notification title'),
                      subtitle: CText(data: 'Subtitle text goes here.'),
                      actions: [
                        CNotificationActionButton(
                            child: CText(data: 'Action'), onTap: () {}),
                      ],
                    ),
                    const SizedBox(height: 16),
                    CNotification.inline(
                      onCloseButtonTap: () {},
                      kind: CNotificationKind.success,
                      title: CText(data: 'Notification title'),
                      subtitle: CText(data: 'Subtitle text goes here.'),
                      actions: [
                        CNotificationActionButton(
                            child: CText(data: 'Action'), onTap: () {}),
                      ],
                    ),
                    const SizedBox(height: 16),
                    //
                    CNotification.inline(
                      onCloseButtonTap: () {},
                      contrast: CNotificationContrast.high,
                      title: CText(data: 'Notification title'),
                      subtitle: CText(data: 'Subtitle text goes here.'),
                      actions: [
                        CNotificationActionButton(
                            child: CText(data: 'Action'), onTap: () {}),
                      ],
                    ),
                    const SizedBox(height: 16),
                    CNotification.inline(
                      onCloseButtonTap: () {},
                      kind: CNotificationKind.error,
                      contrast: CNotificationContrast.high,
                      title: CText(data: 'Notification title'),
                      subtitle: CText(data: 'Subtitle text goes here.'),
                      actions: [
                        CNotificationActionButton(
                            child: CText(data: 'Action'), onTap: () {}),
                      ],
                    ),
                    const SizedBox(height: 16),
                    CNotification.inline(
                      onCloseButtonTap: () {},
                      kind: CNotificationKind.warning,
                      contrast: CNotificationContrast.high,
                      title: CText(data: 'Notification title'),
                      subtitle: CText(data: 'Subtitle text goes here.'),
                      actions: [
                        CNotificationActionButton(
                            child: CText(data: 'Action'), onTap: () {}),
                      ],
                    ),
                    const SizedBox(height: 16),
                    CNotification.inline(
                      onCloseButtonTap: () {},
                      kind: CNotificationKind.success,
                      contrast: CNotificationContrast.high,
                      title: CText(data: 'Notification title'),
                      subtitle: CText(data: 'Subtitle text goes here.'),
                      actions: [
                        CNotificationActionButton(
                            child: CText(data: 'Action'), onTap: () {}),
                      ],
                    ),
                    const SizedBox(height: 16),
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

Steps to reproduce

1. Create a new flutter project
2. Run flutter pub add carbon_flutter
3. Create main.dart and the notification.dart files according to the examples, importing directly instead of using index.dart
4. Run the application flutter run -d chrome

Expected behavior

The SVG assets should load correctly, and no errors should be thrown.

Actual behavior

Multiple errors are thrown, indicating that the SVG assets cannot be loaded, and the server responds with an HTTP status of 404.

Environment

• Flutter version: 3.10.6 (Framework revision: f468f3366c) channel stable
• Dart version: 3.0.6
• carbon_flutter package version: 0.11.1
• Browser: Google Chrome (web)
• OS: Ubuntu 22.04.2 LTS

Additional context

If there are any known workarounds or if additional information is required, please let me know.