Wyatt-FOSS/wyatt-packages
Wyatt-FOSS/wyatt-packages
6
2
Fork 0
Code Issues 20 Pull Requests 3 Actions Packages Projects Releases Activity

feat(ui_kit): implement top app bar and update example

Browse Source
This commit is contained in:
Malo Léon 2023-02-22 15:50:46 +01:00
parent 41a484c013
commit ad0f1ec1c5
13 changed files with 536 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
packages/wyatt_ui_kit/example/assets/images/studio_logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

69
packages/wyatt_ui_kit/example/lib/bars/bars.dart Normal file
View File

@ -0,0 +1,69 @@
import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
import 'package:wyatt_ui_kit_example/demo_page.dart';
class Bars extends DemoPage {
const Bars({super.key});
@override
Widget build(BuildContext context) => ListView(
cacheExtent: 1000,
children: [
const Gap(20),
TopAppBar(
leading: Padding(
padding: const EdgeInsets.all(8),
child: Image.asset('assets/images/studio_logo.png'),
),
title: 'Wyatt Studio'.wrap(
gradientColors: const MultiColor(
[
Color.fromRGBO(57, 167, 254, 1),
Color.fromRGBO(71, 94, 241, 1),
],
),
),
actions: [
IconButton(onPressed: () {}, icon: const Icon(Icons.menu))
],
),
const Gap(20),
TopAppBar(
leading: Padding(
padding: const EdgeInsets.all(8),
child: Image.asset('assets/images/studio_logo.png'),
),
title: 'Wyatt Studio'.wrap(
gradientColors: const MultiColor(
[
Color.fromRGBO(57, 167, 254, 1),
Color.fromRGBO(71, 94, 241, 1),
],
),
),
expandedWidget: const [
ListTile(
title: Text('Votre programme'),
),
ListTile(
title: Text('Votre programme'),
),
ListTile(
title: Text('Votre programme'),
)
],
actions: [
IconButton(
onPressed: () {},
icon: const Icon(Icons.clear),
)
],
),
],
);
@override
String get title => 'Bars';
}

2
packages/wyatt_ui_kit/example/lib/home.dart
View File

@ -1,6 +1,7 @@
import 'package:adaptive_theme/adaptive_theme.dart';
import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
import 'package:wyatt_ui_kit_example/bars/bars.dart';
import 'package:wyatt_ui_kit_example/buttons/buttons.dart';
import 'package:wyatt_ui_kit_example/cards/cards.dart';
import 'package:wyatt_ui_kit_example/demo_page.dart';
@ -28,6 +29,7 @@ class _HomeState extends State<Home> {
Loaders(),
RichTextBuilders(),
TextInputs(),
Bars(),
];
int currentIndex = 0;

3
packages/wyatt_ui_kit/example/lib/theme/themes.dart
View File

@ -25,6 +25,7 @@ import 'package:wyatt_ui_kit_example/theme/rich_text_builder_theme.dart';
import 'package:wyatt_ui_kit_example/theme/simple_icon_button_theme.dart';
import 'package:wyatt_ui_kit_example/theme/symbol_button_theme.dart';
import 'package:wyatt_ui_kit_example/theme/text_input_theme.dart';
import 'package:wyatt_ui_kit_example/theme/top_app_bar_theme.dart';
/// Easely switch between Material and Studio themes.
abstract class Themes {
@ -92,6 +93,7 @@ abstract class Themes {
// Rich Text
RichTextBuilderTheme.light(),
TextInputTheme.light(),
TopAppBarTheme.light(),
],
);
@ -124,6 +126,7 @@ abstract class Themes {
// Rich Text
RichTextBuilderTheme.dark(),
TextInputTheme.dark(),
TopAppBarTheme.dark(),
],
);
}

71
packages/wyatt_ui_kit/example/lib/theme/top_app_bar_theme.dart Normal file
View File

@ -0,0 +1,71 @@
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
class TopAppBarTheme extends TopAppBarThemeExtension {
const TopAppBarTheme({
super.iconTheme,
super.backgroundColors,
super.expandedDividerStyle,
super.titleStyle,
});
factory TopAppBarTheme.light() => TopAppBarTheme(
backgroundColors: const MultiColor.single(
Color.fromRGBO(246, 246, 246, 1),
),
expandedDividerStyle: Colors.black.withOpacity(0.1),
titleStyle: GoogleFonts.montserrat(
fontWeight: FontWeight.bold,
fontSize: 18,
),
iconTheme: const IconThemeData(color: Colors.black),
);
factory TopAppBarTheme.dark() => TopAppBarTheme(
backgroundColors: const MultiColor([
Color.fromRGBO(44, 50, 56, 1),
Color.fromRGBO(39, 47, 61, 1),
Color.fromRGBO(44, 50, 56, 1),
]),
expandedDividerStyle: Colors.white.withOpacity(0.1),
titleStyle: GoogleFonts.montserrat(
fontWeight: FontWeight.bold,
fontSize: 18,
),
iconTheme: const IconThemeData(color: Colors.white),
);
@override
ThemeExtension<TopAppBarThemeExtension> copyWith({
IconThemeData? iconTheme,
MultiColor? backgroundColors,
Color? expandedDividerStyle,
TextStyle? titleStyle,
}) =>
TopAppBarTheme(
iconTheme: iconTheme ?? this.iconTheme,
backgroundColors: backgroundColors ?? this.backgroundColors,
expandedDividerStyle: expandedDividerStyle ?? this.expandedDividerStyle,
titleStyle: titleStyle ?? this.titleStyle,
);
@override
ThemeExtension<TopAppBarThemeExtension> lerp(
covariant ThemeExtension<TopAppBarThemeExtension>? other,
double t,
) {
if (other is! TopAppBarTheme) {
return this;
}
return TopAppBarTheme(
iconTheme: IconThemeData.lerp(iconTheme, other.iconTheme, t),
backgroundColors:
MultiColor.lerp(backgroundColors, other.backgroundColors, t),
expandedDividerStyle:
Color.lerp(expandedDividerStyle, other.expandedDividerStyle, t),
titleStyle: TextStyle.lerp(titleStyle, other.titleStyle, t),
);
}
}

17
packages/wyatt_ui_kit/lib/src/components/app_bars/app_bars.dart Normal file
View File

@ -0,0 +1,17 @@
// Copyright (C) 2023 WYATT GROUP
// Please see the AUTHORS file for details.
//
// super program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// any later version.
//
// super program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with super program. If not, see <https://www.gnu.org/licenses/>.
export 'top_app_bar.dart';

139
packages/wyatt_ui_kit/lib/src/components/app_bars/top_app_bar.dart Normal file
View File

@ -0,0 +1,139 @@
// Copyright (C) 2023 WYATT GROUP
// Please see the AUTHORS file for details.
//
// super program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// any later version.
//
// super program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with super program. If not, see <https://www.gnu.org/licenses/>.
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:wyatt_component_copy_with_extension/component_copy_with_extension.dart';
import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
part 'top_app_bar.g.dart';
@ComponentCopyWithExtension()
class TopAppBar extends AppBarComponent with $TopAppBarCWMixin {
const TopAppBar({
super.systemOverlayStyle,
super.automaticallyImplyLeading,
super.flexibleSpace,
super.bottom,
super.elevation,
super.scrolledUnderElevation,
super.shadowColor,
super.surfaceTintColor,
super.backgroundColor,
super.iconTheme,
super.primary,
super.excludeHeaderSemantics,
super.toolbarHeight,
super.leadingWidth,
super.title,
super.leading,
super.actions,
super.centerTitle,
super.shape,
super.expandedWidget,
super.key,
});
@override
Widget build(BuildContext context) => DecoratedBox(
decoration: BoxDecoration(
gradient: ThemeHelper.getThemeElement<MultiColor, Gradient>(
[
backgroundColor,
context
.themeExtension<TopAppBarThemeExtension>()
?.backgroundColors,
],
valueValidator: (value) => value?.isGradient,
transform: (value) =>
LinearGradientHelper.fromNullableColors(value?.colors),
defaultValue: null,
),
color: ThemeHelper.getThemeElement<MultiColor, Color>(
[
backgroundColor,
context
.themeExtension<TopAppBarThemeExtension>()
?.backgroundColors,
],
valueValidator: (value) => value?.isColor,
transform: (value) => value?.color,
defaultValue: Theme.of(context).appBarTheme.backgroundColor,
),
),
child: Column(
children: [
AppBar(
titleSpacing: 0,
backgroundColor: Colors.transparent,
systemOverlayStyle: systemOverlayStyle,
automaticallyImplyLeading: automaticallyImplyLeading ?? true,
flexibleSpace: flexibleSpace,
bottom: bottom,
elevation: elevation ?? 0,
scrolledUnderElevation: scrolledUnderElevation,
shadowColor: shadowColor,
surfaceTintColor: surfaceTintColor,
iconTheme:
ThemeHelper.getThemeElement<IconThemeData, IconThemeData>(
[
iconTheme,
context.themeExtension<TopAppBarThemeExtension>()?.iconTheme,
],
valueValidator: (value) => value != null,
transform: (value) => value,
defaultValue: Theme.of(context).iconTheme,
),
primary: primary ?? true,
excludeHeaderSemantics: excludeHeaderSemantics ?? false,
leadingWidth: leadingWidth,
title: Text(
title?.data ?? '',
style: ThemeHelper.getThemeElement<TextStyle, TextStyle>(
[
title?.style,
context
.themeExtension<TopAppBarThemeExtension>()
?.titleStyle
],
valueValidator: (value) => value != null,
transform: (value) => value,
defaultValue: context.textTheme.titleLarge,
),
).toGradient(gradientColors: title?.gradientColors),
leading: leading,
actions: actions,
centerTitle: centerTitle ?? false,
),
if (expandedWidget != null)
...ListTile.divideTiles(
color: ThemeHelper.getThemeElement<Color, Color>(
[
context
.themeExtension<TopAppBarThemeExtension>()
?.expandedDividerStyle,
],
valueValidator: (value) => value != null,
transform: (value) => value,
defaultValue: Theme.of(context).dividerColor,
),
context: context,
tiles: expandedWidget!,
),
],
),
);
}

119
packages/wyatt_ui_kit/lib/src/components/app_bars/top_app_bar.g.dart Normal file
View File

@ -0,0 +1,119 @@
// GENERATED CODE - DO NOT MODIFY BY HAND
part of 'top_app_bar.dart';
// **************************************************************************
// ComponentCopyWithGenerator
// **************************************************************************
class $TopAppBarCWProxyImpl implements $AppBarComponentCWProxy {
const $TopAppBarCWProxyImpl(this._value);
final TopAppBar _value;
@override
TopAppBar shape(ShapeBorder? shape) => this(shape: shape);
@override
TopAppBar systemOverlayStyle(SystemUiOverlayStyle? systemOverlayStyle) =>
this(systemOverlayStyle: systemOverlayStyle);
@override
TopAppBar automaticallyImplyLeading(bool? automaticallyImplyLeading) =>
this(automaticallyImplyLeading: automaticallyImplyLeading);
@override
TopAppBar flexibleSpace(Widget? flexibleSpace) =>
this(flexibleSpace: flexibleSpace);
@override
TopAppBar bottom(PreferredSizeWidget? bottom) => this(bottom: bottom);
@override
TopAppBar elevation(double? elevation) => this(elevation: elevation);
@override
TopAppBar scrolledUnderElevation(double? scrolledUnderElevation) =>
this(scrolledUnderElevation: scrolledUnderElevation);
@override
TopAppBar shadowColor(Color? shadowColor) => this(shadowColor: shadowColor);
@override
TopAppBar surfaceTintColor(Color? surfaceTintColor) =>
this(surfaceTintColor: surfaceTintColor);
@override
TopAppBar backgroundColor(MultiColor? backgroundColor) =>
this(backgroundColor: backgroundColor);
@override
TopAppBar iconTheme(IconThemeData? iconTheme) => this(iconTheme: iconTheme);
@override
TopAppBar primary(bool? primary) => this(primary: primary);
@override
TopAppBar excludeHeaderSemantics(bool? excludeHeaderSemantics) =>
this(excludeHeaderSemantics: excludeHeaderSemantics);
@override
TopAppBar toolbarHeight(double? toolbarHeight) =>
this(toolbarHeight: toolbarHeight);
@override
TopAppBar leadingWidth(double? leadingWidth) =>
this(leadingWidth: leadingWidth);
@override
TopAppBar title(TextWrapper? title) => this(title: title);
@override
TopAppBar leading(Widget? leading) => this(leading: leading);
@override
TopAppBar actions(List<Widget>? actions) => this(actions: actions);
@override
TopAppBar centerTitle(bool? centerTitle) => this(centerTitle: centerTitle);
@override
TopAppBar expandedWidget(List<Widget>? expandedWidget) =>
this(expandedWidget: expandedWidget);
@override
TopAppBar key(Key? key) => this(key: key);
@override
TopAppBar call({
ShapeBorder? shape,
SystemUiOverlayStyle? systemOverlayStyle,
bool? automaticallyImplyLeading,
Widget? flexibleSpace,
PreferredSizeWidget? bottom,
double? elevation,
double? scrolledUnderElevation,
Color? shadowColor,
Color? surfaceTintColor,
MultiColor? backgroundColor,
IconThemeData? iconTheme,
bool? primary,
bool? excludeHeaderSemantics,
double? toolbarHeight,
double? leadingWidth,
TextWrapper? title,
Widget? leading,
List<Widget>? actions,
bool? centerTitle,
List<Widget>? expandedWidget,
Key? key,
}) =>
TopAppBar(
systemOverlayStyle: systemOverlayStyle ?? _value.systemOverlayStyle,
automaticallyImplyLeading:
automaticallyImplyLeading ?? _value.automaticallyImplyLeading,
flexibleSpace: flexibleSpace ?? _value.flexibleSpace,
bottom: bottom ?? _value.bottom,
elevation: elevation ?? _value.elevation,
scrolledUnderElevation:
scrolledUnderElevation ?? _value.scrolledUnderElevation,
shadowColor: shadowColor ?? _value.shadowColor,
surfaceTintColor: surfaceTintColor ?? _value.surfaceTintColor,
backgroundColor: backgroundColor ?? _value.backgroundColor,
iconTheme: iconTheme ?? _value.iconTheme,
primary: primary ?? _value.primary,
excludeHeaderSemantics:
excludeHeaderSemantics ?? _value.excludeHeaderSemantics,
toolbarHeight: toolbarHeight ?? _value.toolbarHeight,
leadingWidth: leadingWidth ?? _value.leadingWidth,
title: title ?? _value.title,
leading: leading ?? _value.leading,
actions: actions ?? _value.actions,
centerTitle: centerTitle ?? _value.centerTitle,
shape: shape ?? _value.shape,
expandedWidget: expandedWidget ?? _value.expandedWidget,
key: key ?? _value.key,
);
}
mixin $TopAppBarCWMixin on Component {
$AppBarComponentCWProxy get copyWith =>
$TopAppBarCWProxyImpl(this as TopAppBar);
}

1
packages/wyatt_ui_kit/lib/src/components/components.dart
View File

@ -14,6 +14,7 @@
// You should have received a copy of the GNU General Public License
// along with this program. If not, see <https://www.gnu.org/licenses/>.
export './app_bars/app_bars.dart';
export './buttons/buttons.dart';
export './cards/cards.dart';
export './gradients/gradients.dart';

35
packages/wyatt_ui_kit/lib/src/components/top_navigation_bars/top_navigation_bar.dart Normal file
View File

@ -0,0 +1,35 @@
// Copyright (C) 2023 WYATT GROUP
// Please see the AUTHORS file for details.
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program. If not, see <https://www.gnu.org/licenses/>.
import 'package:flutter/material.dart';
import 'package:wyatt_component_copy_with_extension/component_copy_with_extension.dart';
import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
part 'top_navigation_bar.g.dart';
@ComponentCopyWithExtension()
class TopNavigationBar extends TopNavigationBarComponent
with $TopNavigationBarCWMixin {
const TopNavigationBar({
super.leading,
super.actions,
super.onTap,
super.currentIndex = 0,
super.key,
});
@override
Widget build(BuildContext context) => const Placeholder();
}

45
packages/wyatt_ui_kit/lib/src/components/top_navigation_bars/top_navigation_bar.g.dart Normal file
View File

@ -0,0 +1,45 @@
// GENERATED CODE - DO NOT MODIFY BY HAND
part of 'top_navigation_bar.dart';
// **************************************************************************
// ComponentCopyWithGenerator
// **************************************************************************
class $TopNavigationBarCWProxyImpl
implements $TopNavigationBarComponentCWProxy {
const $TopNavigationBarCWProxyImpl(this._value);
final TopNavigationBar _value;
@override
TopNavigationBar leading(Widget? leading) => this(leading: leading);
@override
TopNavigationBar actions(List<Widget>? actions) => this(actions: actions);
@override
TopNavigationBar onTap(void Function(BuildContext, int)? onTap) =>
this(onTap: onTap);
@override
TopNavigationBar currentIndex(int? currentIndex) =>
this(currentIndex: currentIndex);
@override
TopNavigationBar key(Key? key) => this(key: key);
@override
TopNavigationBar call({
Widget? leading,
List<Widget>? actions,
void Function(BuildContext, int)? onTap,
int? currentIndex,
Key? key,
}) =>
TopNavigationBar(
leading: leading ?? _value.leading,
actions: actions ?? _value.actions,
onTap: onTap ?? _value.onTap,
currentIndex: currentIndex ?? _value.currentIndex,
key: key ?? _value.key,
);
}
mixin $TopNavigationBarCWMixin on Component {
$TopNavigationBarComponentCWProxy get copyWith =>
$TopNavigationBarCWProxyImpl(this as TopNavigationBar);
}

1
packages/wyatt_ui_kit/lib/src/domain/domain.dart
View File

@ -19,3 +19,4 @@ export './card_theme_extension.dart';
export './loader_theme_extension.dart';
export './rich_text_builder_theme_extension.dart';
export './text_input_theme_extension.dart';
export './top_app_bar_extension.dart';

34
packages/wyatt_ui_kit/lib/src/domain/top_app_bar_extension.dart Normal file
View File

@ -0,0 +1,34 @@
// Copyright (C) 2023 WYATT GROUP
// Please see the AUTHORS file for details.
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// 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';
abstract class TopAppBarThemeExtension
extends ThemeExtension<TopAppBarThemeExtension> {
const TopAppBarThemeExtension({
this.iconTheme,
this.backgroundColors,
this.expandedDividerStyle,
this.titleStyle,
});
final MultiColor? backgroundColors;
final IconThemeData? iconTheme;
final Color? expandedDividerStyle;
final TextStyle? titleStyle;
}