noureldinshobier / carbon-flutter

Flutter UI library based on IBM's Carbon Design System 💎

<👋 Hello, World! />

I wear different hats. I’m a full-stack developer and a Flutter enthusiast who has been playing with it ever since it was Beta. I love exploring new tech stacks 💻 and leveraging them to build cool stuff 🛠️.

In my spare time, I like to watch anime or listen to Adele and Of Monsters and Men.

🧐 More About Me:

• 🌱 I’m currently improving my skills in DevOps
• 📫 How to reach me: Linkedin, or [email protected]
• 😄 Pronouns: He/Him
• ⚡ Fun fact: I love watching anime

---

⛳️ Open Source Projects

🎁 Projects	⭐ Stars	📚 Forks	🛎 Issues	📬 Pull requests
Flutter Carbon
PMVVM
Scalable Flutter App

---

✏️ Recent Blog Posts

• Building scalable Flutter apps (Architecture, Styling, Conventions, State management)
• Intro to MVVM architecture in Flutter using PMVVM package

---

⚡ Talk With Me About:

• Creating scalable apps and improving their performance.
• Cool full-stack projects.
• Anime! 😆.

---

🧰 Languages & Tools

---

carbon-flutter's Issues

Some screenshot examples to demonstrate the look and feel in readme

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!

Publish to flutter registry?

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?

SVG Assets Load Error (Web, Chrome)

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.

CTextField error border color

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)
    )),