feat/split-components-and-layouts #65
| @ -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