wyatt-packages/packages/wyatt_ui_components

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 :

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 :

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 :

context.components,

For example :

  @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 :

  @override
  Widget build(BuildContext context) => Scaffold(
    appBar: context.components.appBar.configure({title:'New Title !}),
    body: ...
  )