# Flutter - Wyatt Ui Components

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