noureldinshobier / carbon-flutter Goto Github PK
View Code? Open in Web Editor NEWFlutter UI library based on IBM's Carbon Design System ๐
License: MIT License
Flutter UI library based on IBM's Carbon Design System ๐
License: MIT License
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 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".
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),
],
),
)
],
),
),
),
);
}
}
flutter pub add carbon_flutter
main.dart
and the notification.dart
files according to the examples, importing directly instead of using index.dart
flutter run -d chrome
The SVG assets should load correctly, and no errors should be thrown.
Multiple errors are thrown, indicating that the SVG assets cannot be loaded, and the server responds with an HTTP status of 404.
carbon_flutter
package version: 0.11.1If there are any known workarounds or if additional information is required, please let me know.
Hello, it says in the README that this is the start of a Dart package to publish to the flutter registry; what needs to be done in order to make this available there?
Hi @NourEldinShobier - We've been successful in using your Carbon-Flutter package (excellent, Thanks!) in the OpenEEW Provisioner app
https://github.com/openeew/openeew-provisioner
I'm trying to add some error warnings when the user inputs an incorrect value.
How can I change the border outline of CTextField ?
I tried adding
border: new OutlineInputBorder(
borderSide: new BorderSide(color: CColors.red60)
)),
Hi @NourEldinShobier could you add some example screenshot to your Readme file to demonstrate how this looks, please?
Btw, brilliant that you took the time to put this together. Thank you!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.