114 lines
3.1 KiB
Markdown
114 lines
3.1 KiB
Markdown
<!--
|
|
* Copyright (C) 2022 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/>.
|
|
-->
|
|
|
|
# Flutter - 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.
|
|
|
|
## Usage
|
|
|
|
### Configuration
|
|
|
|
First create all your custom components in `core/design_system/components/`folder. For exemple :
|
|
|
|
├── design_system
|
|
│ ├── components
|
|
│ │ ├── custom_app_bar.dart
|
|
│ │ ├── custom_bottom_navigation_bar.dart
|
|
│ │ └── ...
|
|
│ └── ...
|
|
└── ...
|
|
|
|
You have to override `confgure` method.
|
|
|
|
Then create AppComponentTheme class in `core/design_system/` folder and add all your components. For Example :
|
|
|
|
```dart
|
|
class AppThemeComponent {
|
|
static ComponentThemeData get components => ComponentThemeData.raw(
|
|
appBar: const CustomAppBar(),
|
|
bottomNavigationBar: CustomBottomNavigationBar(
|
|
onTap: (context, index) {
|
|
print('$index');
|
|
},
|
|
),
|
|
);
|
|
}
|
|
```
|
|
|
|
### 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(
|
|
themDataWidget: 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
|
|
@override
|
|
Widget build(BuildContext context) => Scaffold(
|
|
appBar: context.components.appBar,
|
|
body: ...
|
|
)
|
|
```
|
|
|
|
If you need specific settings, or pass parameters to your component, call `configure` method. It will use default paramters you've passed in your app comppnent theme file, and update the parameter you need to change. For example :
|
|
|
|
```dart
|
|
@override
|
|
Widget build(BuildContext context) => Scaffold(
|
|
appBar: context.components.appBar.configure({title:'New Title !}),
|
|
body: ...
|
|
)
|
|
```
|