Creating custom design system similar to material by reusing the flutter/material as part of a package

[msbasanth]

Hi,

We are trying get very specific customization possibility than what material design provides by default. One approach of course is to create a design similar to flutter material. But creating entire design system from scratch is cumbersome. So we are trying to reuse flutter material and then customize it with minimal changes.

Steps to Reproduce

1. Copied material folder from flutter. https://github.com/flutter/flutter/tree/master/packages/flutter/lib/src/ to a test package.
2. Copied material.dart to src of test package and commented "export 'widgets.dart';"

3. Created a new widget TestInputField and imported both local material.dart and flutter/widgets.

import 'package:flutter/widgets.dart';
import '../../material.dart';

4. Added a demo app and included a new widget TestInputField in it.
5. Execute flutter run on demo (https://github.com/msbasanth/test_widgets)
6. Getting error "No material widget found textfield widgets require a material widget ancestor". We tried wrapping with Scaffold/Material no help. At the same time if we switch to package:flutter/material instead of locally copied one it works fine.

3. ...

Expected results:
It is good if we could customize flutter/material by keeping a copy of material locally.

Actual results:
Using Material layer locally creates issues, and it always expects base widgets from package:flutter/material.

Code sample
https://github.com/msbasanth/test_widgets

flutter doctor -v

[√] Flutter (Channel stable, 2.5.3, on Microsoft Windows [Version 10.0.18363.1801], locale en-US)
    • Flutter version 2.5.3 at C:\Users\IC013086\Documents\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 18116933e7 (10 days ago), 2021-10-15 10:46:35 -0700
    • Engine revision d3ea636dc5
    • Dart version 2.14.4

[!] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at C:\Users\IC013086\AppData\Local\Android\sdk
    X cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    X Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/windows#android-setup for more details.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[√] Android Studio (version 2020.3)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)

[√] VS Code, 64-bit edition (version 1.52.1)
    • VS Code at C:\Program Files\Microsoft VS Code
    • Flutter extension version 3.20.0

[√] Connected device (3 available)
    • sdk gphone x86 (mobile) • emulator-5554 • android-x86    • Android 11 (API 30) (emulator)
    • Chrome (web)            • chrome        • web-javascript • Google Chrome 95.0.4638.54
    • Edge (web)              • edge          • web-javascript • Microsoft Edge 95.0.1020.30

How best we ca reuse the flutter/material for creating a new design system with out a custom design from scratch.

[maheshmnj]

@msbasanth Thanks for filing the issue. Probably modifying and using flutter/material as a part of project is not a good idea could you please share an example of what you are trying to build which you think wouldn't be possible with the existing design system?

Thanks

[msbasanth]

Thanks @maheshmnj for the reply.

Now we have a design system in Web (HTML) and we would like to bring similar design concepts and user experiences to Flutter design without loosing the design advantages Flutter gives.
And we are looking for providing a common UI experience across Android, iOS, Web and Desktop applications. I could see Material design works nicely in Desktop & Web too.

But after watching the session from Todd Volkert (https://www.youtube.com/watch?v=z6PpxO7R0gM) we started looking into cases where we need existing Web look and feel to be ported to new Flutter design system.
The example (custom spinner widget) explained in the talk explains a valid usecase which would come in our case also. i.e. a custom UI which is closer to Native Desktop/Web but we are unable to customize using flutter material.

One option is to replace material with own design system which means we have to write everything from scratch. But in our case we could reuse Material for many components & user experiences.

So now I am checking is it possible to reuse Material and then customize the material widgets for the specific customization needs. With reusing material and customizing locally we have advantages like starting with Stateful/Stateless widgets, accessibility, focusability etc. without loosing the specific customization possibility.

Let me know your thoughts on this.

[maheshmnj]

So now I am checking is it possible to reuse Material and then customize the material widgets for the specific customization needs. With reusing material and customizing locally we have advantages like starting with Stateful/Stateless widgets, accessibility, focusability etc. without loosing the specific customization possibility.

I am not sure if this is possible Because even if you do, you might lose on any future updates to the material, But I am not really sure.

Keeping this issue open for further investigation.