From 098ec9715eb0ef705df5eda90bf0f9ac6251b3c2 Mon Sep 17 00:00:00 2001 From: AN12345 Date: Wed, 7 Dec 2022 18:20:04 -0500 Subject: [PATCH 1/2] feat(ui_layout): add loading & error widget to component theme (close #69) --- .../lib/src/domain/entities/component.dart | 5 +++++ .../lib/src/domain/entities/components.dart | 20 ++++++++++++------- .../src/features/component_theme_data.dart | 4 ++++ 3 files changed, 22 insertions(+), 7 deletions(-) create mode 100644 packages/wyatt_ui_components/lib/src/domain/entities/component.dart diff --git a/packages/wyatt_ui_components/lib/src/domain/entities/component.dart b/packages/wyatt_ui_components/lib/src/domain/entities/component.dart new file mode 100644 index 00000000..0a2f8205 --- /dev/null +++ b/packages/wyatt_ui_components/lib/src/domain/entities/component.dart @@ -0,0 +1,5 @@ +import 'package:flutter/material.dart'; + +abstract class Component extends StatelessWidget { + const Component({super.key}); +} diff --git a/packages/wyatt_ui_components/lib/src/domain/entities/components.dart b/packages/wyatt_ui_components/lib/src/domain/entities/components.dart index 496f50ce..105753c3 100644 --- a/packages/wyatt_ui_components/lib/src/domain/entities/components.dart +++ b/packages/wyatt_ui_components/lib/src/domain/entities/components.dart @@ -15,19 +15,16 @@ // along with this program. If not, see . import 'package:flutter/material.dart'; +import 'package:wyatt_ui_components/src/domain/entities/component.dart'; -abstract class AppBarComponent extends PreferredSize { +abstract class AppBarComponent extends Component { final String? title; - const AppBarComponent({this.title, super.key}) - : super( - preferredSize: const Size.fromHeight(60), - child: const SizedBox.shrink(), - ); + const AppBarComponent({this.title, super.key}); AppBarComponent configure({String? title}); } -abstract class BottomNavigationBarComponent extends StatelessWidget { +abstract class BottomNavigationBarComponent extends Component { final int currentIndex; final void Function(BuildContext, int)? onTap; const BottomNavigationBarComponent({ @@ -41,3 +38,12 @@ abstract class BottomNavigationBarComponent extends StatelessWidget { int currentIndex = 0, }); } + +abstract class ErrorWidget extends Component { + final String error; + const ErrorWidget({required this.error, super.key}); +} + +abstract class LoadingWidget extends Component { + const LoadingWidget({super.key}); +} diff --git a/packages/wyatt_ui_components/lib/src/features/component_theme_data.dart b/packages/wyatt_ui_components/lib/src/features/component_theme_data.dart index 0e6ddf34..79594623 100644 --- a/packages/wyatt_ui_components/lib/src/features/component_theme_data.dart +++ b/packages/wyatt_ui_components/lib/src/features/component_theme_data.dart @@ -19,9 +19,13 @@ import 'package:wyatt_ui_components/src/domain/entities/components.dart'; class ComponentThemeData { final AppBarComponent appBar; final BottomNavigationBarComponent bottomNavigationBar; + final ErrorWidget errorWidget; + final LoadingWidget loadingWidget; const ComponentThemeData.raw({ required this.appBar, required this.bottomNavigationBar, + required this.errorWidget, + required this.loadingWidget, }); } -- 2.47.2 From d792f4cbe97b8265215093fdc66db305825c539f Mon Sep 17 00:00:00 2001 From: AN12345 Date: Wed, 7 Dec 2022 18:54:48 -0500 Subject: [PATCH 2/2] feat(ui_layout): update example & move configure function (#69) --- .../example/lib/component_theme.dart | 14 ++++++ .../lib/components/custom_app_bar.dart | 16 +++++++ .../lib/components/custom_bottom_bar.dart | 40 ++++++++++++++++ .../lib/components/custom_error_widget.dart | 16 +++++++ .../lib/components/custom_loading_widget.dart | 18 +++++++ .../wyatt_ui_components/example/lib/main.dart | 48 +++++++++++++++---- .../lib/src/domain/entities/component.dart | 2 + .../lib/src/domain/entities/components.dart | 19 ++++++-- .../src/features/component_theme_data.dart | 4 +- 9 files changed, 161 insertions(+), 16 deletions(-) create mode 100644 packages/wyatt_ui_components/example/lib/component_theme.dart create mode 100644 packages/wyatt_ui_components/example/lib/components/custom_app_bar.dart create mode 100644 packages/wyatt_ui_components/example/lib/components/custom_bottom_bar.dart create mode 100644 packages/wyatt_ui_components/example/lib/components/custom_error_widget.dart create mode 100644 packages/wyatt_ui_components/example/lib/components/custom_loading_widget.dart diff --git a/packages/wyatt_ui_components/example/lib/component_theme.dart b/packages/wyatt_ui_components/example/lib/component_theme.dart new file mode 100644 index 00000000..1cf944bf --- /dev/null +++ b/packages/wyatt_ui_components/example/lib/component_theme.dart @@ -0,0 +1,14 @@ +import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart'; +import 'package:wyatt_ui_components_example/components/custom_app_bar.dart'; +import 'package:wyatt_ui_components_example/components/custom_bottom_bar.dart'; +import 'package:wyatt_ui_components_example/components/custom_error_widget.dart'; +import 'package:wyatt_ui_components_example/components/custom_loading_widget.dart'; + +class AppThemeComponent { + static ComponentThemeData get components => const ComponentThemeData.raw( + appBar: CustomAppBar(), + bottomNavigationBar: CustomBottomNavigationBar(), + errorWidget: CustomErrorWidget(), + loadingWidget: CustomLoadingWidget(), + ); +} diff --git a/packages/wyatt_ui_components/example/lib/components/custom_app_bar.dart b/packages/wyatt_ui_components/example/lib/components/custom_app_bar.dart new file mode 100644 index 00000000..8bac84a7 --- /dev/null +++ b/packages/wyatt_ui_components/example/lib/components/custom_app_bar.dart @@ -0,0 +1,16 @@ +import 'package:flutter/material.dart'; +import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart'; + +class CustomAppBar extends AppBarComponent { + const CustomAppBar({super.title, super.key}); + + @override + Widget build(BuildContext context) => AppBar( + title: Text(super.title ?? ''), + ); + + @override + AppBarComponent configure({String? title}) => CustomAppBar( + title: title ?? this.title, + ); +} diff --git a/packages/wyatt_ui_components/example/lib/components/custom_bottom_bar.dart b/packages/wyatt_ui_components/example/lib/components/custom_bottom_bar.dart new file mode 100644 index 00000000..d3c13033 --- /dev/null +++ b/packages/wyatt_ui_components/example/lib/components/custom_bottom_bar.dart @@ -0,0 +1,40 @@ +import 'package:flutter/material.dart'; +import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart'; + +class CustomBottomNavigationBar extends BottomNavigationBarComponent { + const CustomBottomNavigationBar({ + super.currentIndex, + super.onTap, + super.key, + }); + + @override + Widget build(BuildContext context) => BottomNavigationBar( + currentIndex: currentIndex, + onTap: (index) => super.onTap?.call(context, index), + items: const [ + BottomNavigationBarItem( + label: 'Icon 1', + icon: Icon( + Icons.nearby_off, + ), + ), + BottomNavigationBarItem( + label: 'Icon 2', + icon: Icon( + Icons.dangerous, + ), + ), + ], + ); + + @override + CustomBottomNavigationBar configure({ + void Function(BuildContext, int)? onTap, + int currentIndex = 0, + }) => + CustomBottomNavigationBar( + onTap: onTap ?? this.onTap, + currentIndex: currentIndex, + ); +} diff --git a/packages/wyatt_ui_components/example/lib/components/custom_error_widget.dart b/packages/wyatt_ui_components/example/lib/components/custom_error_widget.dart new file mode 100644 index 00000000..8b2a9b5a --- /dev/null +++ b/packages/wyatt_ui_components/example/lib/components/custom_error_widget.dart @@ -0,0 +1,16 @@ +import 'package:flutter/material.dart'; +import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart'; + +class CustomErrorWidget extends ErrorWidgetComponent { + const CustomErrorWidget({super.error, super.key}); + + @override + Widget build(BuildContext context) => ColoredBox( + color: Colors.red, + child: Center(child: Text(error ?? 'Error')), + ); + + @override + ErrorWidgetComponent configure({String? error}) => + CustomErrorWidget(error: error ?? this.error); +} diff --git a/packages/wyatt_ui_components/example/lib/components/custom_loading_widget.dart b/packages/wyatt_ui_components/example/lib/components/custom_loading_widget.dart new file mode 100644 index 00000000..912312fe --- /dev/null +++ b/packages/wyatt_ui_components/example/lib/components/custom_loading_widget.dart @@ -0,0 +1,18 @@ +import 'package:flutter/material.dart'; +import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart'; + +class CustomLoadingWidget extends LoadingWidgetComponent { + const CustomLoadingWidget({super.color, super.key}); + + @override + Widget build(BuildContext context) => Center( + child: CircularProgressIndicator( + color: color, + ), + ); + + @override + CustomLoadingWidget configure({Color? color}) => CustomLoadingWidget( + color: color ?? this.color, + ); +} diff --git a/packages/wyatt_ui_components/example/lib/main.dart b/packages/wyatt_ui_components/example/lib/main.dart index 840b81d6..673d614a 100644 --- a/packages/wyatt_ui_components/example/lib/main.dart +++ b/packages/wyatt_ui_components/example/lib/main.dart @@ -15,6 +15,8 @@ // along with this program. If not, see . import 'package:flutter/material.dart'; +import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart'; +import 'package:wyatt_ui_components_example/component_theme.dart'; void main() { runApp(const MyApp()); @@ -26,17 +28,45 @@ class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { - return MaterialApp( - title: 'Wyatt Ui Components Example', - theme: ThemeData( - primarySwatch: Colors.blue, - ), - home: Scaffold( - appBar: AppBar( - title: const Text('Wyatt Ui Components Example'), + return ComponentTheme( + componentThemeWidget: AppThemeComponent.components, + child: MaterialApp( + title: 'Wyatt Ui Components Example', + theme: ThemeData( + primarySwatch: Colors.blue, + ), + home: const Scaffold( + body: Home(), ), - body: const Center(child: Text('')), ), ); } } + +class Home extends StatelessWidget { + const Home({super.key}); + + @override + Widget build(BuildContext context) => Scaffold( + appBar: PreferredSize( + preferredSize: const Size.fromHeight(60), + child: context.components.appBar.configure(title: 'Example title'), + ), + body: Column( + children: [ + Expanded( + child: context.components.errorWidget + .configure(error: 'Example erreur'), + ), + const SizedBox( + height: 10, + ), + Expanded( + child: context.components.loadingWidget + .configure(color: Colors.green), + ), + ], + ), + bottomNavigationBar: context.components.bottomNavigationBar, + ); +} diff --git a/packages/wyatt_ui_components/lib/src/domain/entities/component.dart b/packages/wyatt_ui_components/lib/src/domain/entities/component.dart index 0a2f8205..04e60ebc 100644 --- a/packages/wyatt_ui_components/lib/src/domain/entities/component.dart +++ b/packages/wyatt_ui_components/lib/src/domain/entities/component.dart @@ -2,4 +2,6 @@ import 'package:flutter/material.dart'; abstract class Component extends StatelessWidget { const Component({super.key}); + + Component configure(); } diff --git a/packages/wyatt_ui_components/lib/src/domain/entities/components.dart b/packages/wyatt_ui_components/lib/src/domain/entities/components.dart index 105753c3..be6d79e2 100644 --- a/packages/wyatt_ui_components/lib/src/domain/entities/components.dart +++ b/packages/wyatt_ui_components/lib/src/domain/entities/components.dart @@ -21,6 +21,7 @@ abstract class AppBarComponent extends Component { final String? title; const AppBarComponent({this.title, super.key}); + @override AppBarComponent configure({String? title}); } @@ -33,17 +34,25 @@ abstract class BottomNavigationBarComponent extends Component { super.key, }); + @override BottomNavigationBarComponent configure({ void Function(BuildContext, int)? onTap, int currentIndex = 0, }); } -abstract class ErrorWidget extends Component { - final String error; - const ErrorWidget({required this.error, super.key}); +abstract class ErrorWidgetComponent extends Component { + final String? error; + const ErrorWidgetComponent({required this.error, super.key}); + + @override + ErrorWidgetComponent configure({String? error}); } -abstract class LoadingWidget extends Component { - const LoadingWidget({super.key}); +abstract class LoadingWidgetComponent extends Component { + final Color? color; + const LoadingWidgetComponent({required this.color, super.key}); + + @override + LoadingWidgetComponent configure({Color? color}); } diff --git a/packages/wyatt_ui_components/lib/src/features/component_theme_data.dart b/packages/wyatt_ui_components/lib/src/features/component_theme_data.dart index 79594623..66540540 100644 --- a/packages/wyatt_ui_components/lib/src/features/component_theme_data.dart +++ b/packages/wyatt_ui_components/lib/src/features/component_theme_data.dart @@ -19,8 +19,8 @@ import 'package:wyatt_ui_components/src/domain/entities/components.dart'; class ComponentThemeData { final AppBarComponent appBar; final BottomNavigationBarComponent bottomNavigationBar; - final ErrorWidget errorWidget; - final LoadingWidget loadingWidget; + final ErrorWidgetComponent errorWidget; + final LoadingWidgetComponent loadingWidget; const ComponentThemeData.raw({ required this.appBar, -- 2.47.2