wyatt-packages/packages/wyatt_ui_components

Wyatt UI Components

Wyatt UI Components for Flutter. This package defines all the components used in Wyatt Studio with their set of properties. But there is no implementation of the components. You have to create your own or check out Wyatt UI Kit package.

Usage

Configuration

First create all your custom components in domain/entities folder. For exemple :

├── domain
│ ├── entities
│ │ ├── custom_app_bar.dart
│ │ ├── custom_bottom_navigation_bar.dart
│ │ └── ...
│ └── ...
└── ...

Run flutter pub run build_runner build to generate your components.

Then, add your components to ComponentThemeData class.

Provider

In you main file, before calling router, call ComponentTheme widget and give your app as child. For example :

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) => ComponentTheme(
        componentThemeWidget: AppThemeComponent.components,
        child: MaterialApp(
          title: 'Wyatt Ui Layout Example',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: const ..,
        ),
      );
}

Call

Then you're ready to call all your components from everywhere in your app using :

context.components,

For example :

  @override
  Widget build(BuildContext context) => Scaffold(
    appBar: context.components.appBar,
    body: ...
  )

If you need specific settings, or pass parameters to your component, call copyWith.call method.

  @override
  Widget build(BuildContext context) => Scaffold(
    appBar: context.components.appBar.copyWith.call({title: 'New Title !'}),
    body: ...
  )

Default implementation

To use this package, you have to create your own implementation of the components. You can check out Wyatt UI Kit package for an example.

But default theme extensions (used in all implementations as fallback for styles) are available in lib/src/domain/theme_extensions folder.

Development

Common to this, and Wyatt UI Kit packages.

Add a new component :

Wyatt UI Components side

1. Create a new file in lib/src/domain/entities folder.
2. Add your component class.
3. Add your component class to ComponentThemeData abstract class.
4. Run flutter pub run build_runner build to generate your component proxy properties.

Wyatt UI Kit side

1. Create a new file in lib/src/components folder.
2. Add your component class, styles, (and logic if needed)
3. Run flutter pub run build_runner build to generate your component copy with method.
4. Add a theme extension to your component class in lib/src/domain/
5. Add your component class wyattComponentThemeData static property in lib/src/features/wyatt_component_theme_data.dart