150 lines
5.1 KiB
Markdown
150 lines
5.1 KiB
Markdown
<!--
|
|
* Copyright (C) 2023 WYATT GROUP
|
|
* Please see the AUTHORS file for details.
|
|
|
|
* This program is free software: you can redistribute it and/or modify
|
|
* it under the terms of the GNU General Public License as published by
|
|
* the Free Software Foundation, either version 3 of the License, or
|
|
* any later version.
|
|
|
|
* This program is distributed in the hope that it will be useful,
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
* GNU General Public License for more details.
|
|
|
|
* You should have received a copy of the GNU General Public License
|
|
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
|
-->
|
|
|
|
# Wyatt UI Components
|
|
|
|
<p align="left">
|
|
<a href="https://git.wyatt-studio.fr/Wyatt-FOSS/wyatt-packages/src/branch/master/packages/wyatt_analysis"><img src="https://img.shields.io/badge/Style-Wyatt%20Analysis-blue.svg?style=flat-square" alt="Style: Wyatt Analysis" /></a>
|
|
<img src="https://img.shields.io/badge/SDK-Flutter-blue?style=flat-square" alt="SDK: Flutter" />
|
|
</p>
|
|
|
|
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](https://git.wyatt-studio.fr/Wyatt-FOSS/wyatt-packages/src/branch/master/packages/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. You can utilize multiple components of the same type, such as having multiple top app bars or distinct cards. However, it's necessary to distinguish them using identifiers. Extensions are provided to make your life easier. Note that it's not obligatory to assign an identifier to a component if there's only one of its kind. Here's an example:
|
|
|
|
```dart
|
|
class AppThemeComponent {
|
|
static ComponentThemeData get components => ComponentThemeData.raw(
|
|
topAppBars: const {
|
|
'root': CustomRootAppBar(),
|
|
'second': CustomSecondAppBar(),
|
|
}.registry(),
|
|
bottomNavigationBars: const CustomBottomNavigationBar().registry(),
|
|
errors: const CustomErrorWidget().registry(),
|
|
loaders: const CustomLoaderWidget().registry(),
|
|
);
|
|
}
|
|
```
|
|
|
|
I've rephrased the sentence while maintaining the original meaning and intent.
|
|
|
|
### Provider
|
|
|
|
In you main file, before calling router, call `ComponentTheme` widget and give your app as child. For example :
|
|
|
|
```dart
|
|
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 :
|
|
|
|
```dart
|
|
context.components,
|
|
```
|
|
|
|
For example :
|
|
|
|
```dart
|
|
context.components.topAppBarComponent()(),
|
|
```
|
|
|
|
or
|
|
|
|
```dart
|
|
appBar: context.components.topAppBarComponent().call(),
|
|
```
|
|
|
|
If you require specific settings or want to pass parameters to your component, simply provide them when you call your component.
|
|
|
|
```dart
|
|
context.components.loaderComponent()(
|
|
colors: const MultiColor.single(Colors.green),
|
|
),
|
|
```
|
|
|
|
And if you have only one parameter to modify, you can directly call it as shown below:
|
|
|
|
```dart
|
|
context.components.loaderComponent().
|
|
colors(const MultiColor.single(Colors.green)),
|
|
```
|
|
|
|
## Default implementation
|
|
|
|
To use this package, you have to create your own implementation of the components. You can check out [Wyatt UI Kit](https://git.wyatt-studio.fr/Wyatt-FOSS/wyatt-packages/src/branch/master/packages/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`
|