feat(ui_layout): update example & move configure function (#69)

This commit is contained in:
AN12345 2022-12-07 18:54:48 -05:00
parent 098ec9715e
commit d792f4cbe9
9 changed files with 161 additions and 16 deletions

View File

@ -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(),
);
}

View File

@ -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,
);
}

View File

@ -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,
);
}

View File

@ -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);
}

View File

@ -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,
);
}

View File

@ -15,6 +15,8 @@
// along with this program. If not, see <https://www.gnu.org/licenses/>.
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,
);
}

View File

@ -2,4 +2,6 @@ import 'package:flutter/material.dart';
abstract class Component extends StatelessWidget {
const Component({super.key});
Component configure();
}

View File

@ -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});
}

View File

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