feat(ui_component): add flat/outlined button styles

This commit is contained in:
Hugo Pointcheval 2023-02-13 12:19:39 +01:00
parent 4332eafda0
commit 07572aeca2
Signed by: hugo
GPG Key ID: 3AAC487E131E00BC
9 changed files with 250 additions and 28 deletions

View File

@ -16,38 +16,23 @@
import 'package:flutter/widgets.dart';
import 'package:wyatt_ui_components/src/core/enums/control_state.dart';
import 'package:wyatt_ui_components/src/domain/entities/buttons/button_style.dart';
import 'package:wyatt_ui_components/src/domain/entities/component.dart';
abstract class ButtonComponent extends Component {
const ButtonComponent({
this.state = ControlState.normal,
this.radius = 12,
this.padding = 25,
this.borderColors,
this.backgroundColor,
this.shadow = const BoxShadow(
blurRadius: 30,
offset: Offset(0, 5),
color: Color.fromRGBO(0, 0, 0, 0.05),
),
this.mainAxisSize = MainAxisSize.min,
this.style,
super.key,
});
/// Actual state of the button
final ControlState? state;
/// Button radius
final double? radius;
/// Main axis size
final MainAxisSize? mainAxisSize;
/// Padding and gaps of this card
final double? padding;
/// Border gradient color (from left to right)
final List<Color>? borderColors;
/// Button background color
final Color? backgroundColor;
/// Drop shadow
final BoxShadow? shadow;
/// Style of this button
final ButtonStyle? style;
}

View File

@ -0,0 +1,48 @@
// 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/widgets.dart';
abstract class ButtonStyle {
const ButtonStyle({
this.radius = 15,
this.padding = 10,
this.borderColors,
this.backgroundColor,
this.shadow = const BoxShadow(
blurRadius: 30,
offset: Offset(0, 5),
color: Color.fromRGBO(0, 0, 0, 0.05),
),
});
/// Button radius
final double? radius;
/// Padding and gaps of this card
final double? padding;
/// Border gradient color (from left to right)
final List<Color>? borderColors;
/// Button background color
final Color? backgroundColor;
/// Drop shadow
final BoxShadow? shadow;
ButtonStyle copyWith();
}

View File

@ -14,4 +14,9 @@
// 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 './button_component.dart';
export './button_style.dart';
export './flat_button_component.dart';
export './flat_button_style.dart';
export './outlined_button_component.dart';
export './outlined_button_style.dart';

View File

@ -16,7 +16,6 @@
import 'package:flutter/widgets.dart';
import 'package:wyatt_component_copy_with_extension/component_copy_with_extension.dart';
import 'package:wyatt_ui_components/src/domain/entities/buttons/button_component.dart';
import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
part 'flat_button_component.g.dart';
@ -29,14 +28,14 @@ abstract class FlatButtonComponent extends ButtonComponent
this.suffix,
this.label,
super.state,
super.radius,
super.padding,
super.borderColors,
super.backgroundColor,
super.shadow,
super.style,
super.mainAxisSize,
super.key,
});
@override
FlatButtonStyle? get style;
final Widget? prefix;
final Widget? suffix;
final TextWrapper? label;

View File

@ -7,8 +7,20 @@ part of 'flat_button_component.dart';
// **************************************************************************
abstract class $FlatButtonComponentCWProxy {
FlatButtonComponent prefix(Widget? prefix);
FlatButtonComponent suffix(Widget? suffix);
FlatButtonComponent label(TextWrapper? label);
FlatButtonComponent state(ControlState? state);
FlatButtonComponent style(ButtonStyle? style);
FlatButtonComponent mainAxisSize(MainAxisSize? mainAxisSize);
FlatButtonComponent key(Key? key);
FlatButtonComponent call({
Widget? prefix,
Widget? suffix,
TextWrapper? label,
ControlState? state,
ButtonStyle? style,
MainAxisSize? mainAxisSize,
Key? key,
});
}

View File

@ -0,0 +1,50 @@
// ignore_for_file: public_member_api_docs, sort_constructors_first
// 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/widgets.dart';
import 'package:wyatt_ui_components/src/domain/entities/buttons/button_style.dart';
class FlatButtonStyle extends ButtonStyle {
const FlatButtonStyle({
super.radius = 15,
super.padding = 10,
super.borderColors,
super.backgroundColor,
super.shadow = const BoxShadow(
blurRadius: 30,
offset: Offset(0, 5),
color: Color.fromRGBO(0, 0, 0, 0.05),
),
});
@override
FlatButtonStyle copyWith({
double? radius,
double? padding,
List<Color>? borderColors,
Color? backgroundColor,
BoxShadow? shadow,
double? stroke,
}) =>
FlatButtonStyle(
radius: radius ?? this.radius,
padding: padding ?? this.padding,
borderColors: borderColors ?? this.borderColors,
backgroundColor: backgroundColor ?? this.backgroundColor,
shadow: shadow ?? this.shadow,
);
}

View File

@ -0,0 +1,42 @@
// 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/widgets.dart';
import 'package:wyatt_component_copy_with_extension/component_copy_with_extension.dart';
import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
part 'outlined_button_component.g.dart';
@ComponentProxyExtension()
abstract class OutlinedButtonComponent extends ButtonComponent
with CopyWithMixin<$OutlinedButtonComponentCWProxy> {
const OutlinedButtonComponent({
this.prefix,
this.suffix,
this.label,
super.state,
super.style,
super.mainAxisSize,
super.key,
});
@override
OutlinedButtonStyle? get style;
final Widget? prefix;
final Widget? suffix;
final TextWrapper? label;
}

View File

@ -0,0 +1,26 @@
// GENERATED CODE - DO NOT MODIFY BY HAND
part of 'outlined_button_component.dart';
// **************************************************************************
// ComponentProxyGenerator
// **************************************************************************
abstract class $OutlinedButtonComponentCWProxy {
OutlinedButtonComponent prefix(Widget? prefix);
OutlinedButtonComponent suffix(Widget? suffix);
OutlinedButtonComponent label(TextWrapper? label);
OutlinedButtonComponent state(ControlState? state);
OutlinedButtonComponent style(ButtonStyle? style);
OutlinedButtonComponent mainAxisSize(MainAxisSize? mainAxisSize);
OutlinedButtonComponent key(Key? key);
OutlinedButtonComponent call({
Widget? prefix,
Widget? suffix,
TextWrapper? label,
ControlState? state,
ButtonStyle? style,
MainAxisSize? mainAxisSize,
Key? key,
});
}

View File

@ -0,0 +1,55 @@
// ignore_for_file: public_member_api_docs, sort_constructors_first
// 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/widgets.dart';
import 'package:wyatt_ui_components/src/domain/entities/buttons/button_style.dart';
class OutlinedButtonStyle extends ButtonStyle {
const OutlinedButtonStyle({
super.radius = 15,
super.padding = 10,
super.borderColors,
super.backgroundColor,
super.shadow = const BoxShadow(
blurRadius: 30,
offset: Offset(0, 5),
color: Color.fromRGBO(0, 0, 0, 0.05),
),
this.stroke = 2,
});
/// Stroke of the border
final double? stroke;
@override
OutlinedButtonStyle copyWith({
double? radius,
double? padding,
List<Color>? borderColors,
Color? backgroundColor,
BoxShadow? shadow,
double? stroke,
}) =>
OutlinedButtonStyle(
radius: radius ?? this.radius,
padding: padding ?? this.padding,
borderColors: borderColors ?? this.borderColors,
backgroundColor: backgroundColor ?? this.backgroundColor,
shadow: shadow ?? this.shadow,
stroke: stroke ?? this.stroke,
);
}