diff --git a/packages/wyatt_ui_components/README.md b/packages/wyatt_ui_components/README.md index 986bac21..01aaee48 100644 --- a/packages/wyatt_ui_components/README.md +++ b/packages/wyatt_ui_components/README.md @@ -16,8 +16,7 @@ * along with this program. If not, see . --> - -# Flutter - Wyatt Wyatt Ui Components +# Flutter - Wyatt Ui Components

@@ -28,16 +27,87 @@ Wyatt Ui Components for Flutter. - - -## Features - - - -## Getting started - - - ## Usage - \ No newline at end of file +### 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: ... + ) +``` diff --git a/packages/wyatt_ui_layout/README.md b/packages/wyatt_ui_layout/README.md index 1eeae83b..7f0c4c68 100644 --- a/packages/wyatt_ui_layout/README.md +++ b/packages/wyatt_ui_layout/README.md @@ -25,96 +25,10 @@ SDK: Flutter

-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: ... - ) -```