doc: update readme(s)
This commit is contained in:
AN12345
parent
a20e4a1715
commit
4d04c3f446
@ -16,8 +16,7 @@
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
-->
|
||||
|
||||
|
||||
# Flutter - Wyatt Wyatt Ui Components
|
||||
# Flutter - Wyatt Ui Components
|
||||
|
||||
<p align="left">
|
||||
<a href="https://git.wyatt-studio.fr/Wyatt-FOSS/wyatt-packages/src/branch/master/packages/wyatt_analysis">
|
||||
@ -28,16 +27,87 @@
|
||||
|
||||
Wyatt Ui Components for Flutter.
|
||||
|
||||
|
||||
|
||||
## Features
|
||||
|
||||
<!-- TODO -->
|
||||
|
||||
## Getting started
|
||||
|
||||
<!-- TODO -->
|
||||
|
||||
## Usage
|
||||
|
||||
<!-- TODO -->
|
||||
### 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: ...
|
||||
)
|
||||
```
|
||||
|
||||
@ -25,96 +25,10 @@
|
||||
<img src="https://img.shields.io/badge/SDK-Flutter-blue?style=flat-square" alt="SDK: Flutter" />
|
||||
</p>
|
||||
|
||||
Wyatt Ui Layout for Flutter.
|
||||
Wyatt Ui Layout for Flutter
|
||||
|
||||
## Features
|
||||
## Features.
|
||||
|
||||
- Component Theme
|
||||
- Layouts :
|
||||
- App Bar Layout
|
||||
- Bottom Navigation Bar Layout
|
||||
|
||||
## 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: ...
|
||||
)
|
||||
```
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user