feat(ui_kit): finalize material ready buttons
This commit is contained in:
@@ -0,0 +1,46 @@
|
||||
// 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 Constants {
|
||||
static const white = Color(0xFFFFFFFF);
|
||||
static const dark = Color(0xFF383C40);
|
||||
|
||||
static const blue1 = Color(0xFF3C97FB);
|
||||
static const blue2 = Color(0xFF446DF4);
|
||||
static const blue3 = Color(0xFF1A84F7);
|
||||
static const blue4 = Color(0xFF1344E4);
|
||||
|
||||
static const grey1 = Color(0xFF60656A);
|
||||
static const grey2 = Color(0xFF383C40);
|
||||
|
||||
static const grey3 = Color(0xFF16191D);
|
||||
static const grey4 = Color(0xFF33373E);
|
||||
|
||||
static const green1 = Color(0xFF50CE99);
|
||||
static const green2 = Color(0xFF339572);
|
||||
|
||||
static const red1 = Color(0xFFFB5E3C);
|
||||
static const red2 = Color(0xFFF44464);
|
||||
|
||||
static const blueGradient = [blue1, blue2];
|
||||
static const blueDarkGradient = [blue3, blue4];
|
||||
static const greyGradient = [grey1, grey2];
|
||||
static const greyDarkGradient = [grey3, grey4];
|
||||
static const greenGradient = [green1, green2];
|
||||
static const redGradient = [red1, red2];
|
||||
}
|
||||
@@ -0,0 +1,151 @@
|
||||
// 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:google_fonts/google_fonts.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/theme/constants.dart';
|
||||
|
||||
class FlatButtonTheme extends FlatButtonThemeExtension {
|
||||
const FlatButtonTheme({
|
||||
super.disabledStyle,
|
||||
super.focusedStyle,
|
||||
super.hoveredStyle,
|
||||
super.normalStyle,
|
||||
super.tappedStyle,
|
||||
});
|
||||
|
||||
factory FlatButtonTheme.light() {
|
||||
final style = FlatButtonStyle(
|
||||
label: GoogleFonts.montserrat(
|
||||
fontSize: 18,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
radius: BorderRadius.circular(15),
|
||||
padding: const EdgeInsets.all(10),
|
||||
foregroundColors: const MultiColor(Constants.blueGradient),
|
||||
backgroundColors: const MultiColor.single(Constants.white),
|
||||
borderColors: const MultiColor(Constants.blueGradient),
|
||||
stroke: 3,
|
||||
);
|
||||
return FlatButtonTheme(
|
||||
normalStyle: style,
|
||||
disabledStyle: style.copyWith(
|
||||
label: GoogleFonts.montserrat(
|
||||
fontSize: 18,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: Constants.blue1.withOpacity(0.4),
|
||||
),
|
||||
foregroundColors: MultiColor.single(Constants.blue1.withOpacity(0.4)),
|
||||
backgroundColors: const MultiColor.single(Constants.white),
|
||||
borderColors: MultiColor.single(Constants.blue1.withOpacity(0.4)),
|
||||
stroke: 1,
|
||||
),
|
||||
hoveredStyle: style.copyWith(
|
||||
label: GoogleFonts.montserrat(
|
||||
fontSize: 18,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: Constants.white,
|
||||
),
|
||||
foregroundColors: const MultiColor.single(Constants.white),
|
||||
backgroundColors: const MultiColor(Constants.blueGradient),
|
||||
),
|
||||
tappedStyle: style.copyWith(
|
||||
label: GoogleFonts.montserrat(
|
||||
fontSize: 18,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: Constants.white,
|
||||
),
|
||||
foregroundColors: const MultiColor.single(Constants.white),
|
||||
backgroundColors: const MultiColor(Constants.blueDarkGradient),
|
||||
borderColors: const MultiColor(Constants.blueDarkGradient),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
factory FlatButtonTheme.dark() {
|
||||
final style = FlatButtonStyle(
|
||||
label: GoogleFonts.montserrat(
|
||||
fontSize: 18,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
radius: BorderRadius.circular(15),
|
||||
padding: const EdgeInsets.all(10),
|
||||
foregroundColors: const MultiColor.single(Constants.white),
|
||||
backgroundColors: const MultiColor.single(Constants.dark),
|
||||
borderColors: const MultiColor(Constants.blueGradient),
|
||||
stroke: 3,
|
||||
);
|
||||
return FlatButtonTheme(
|
||||
normalStyle: style,
|
||||
disabledStyle: style.copyWith(
|
||||
label: GoogleFonts.montserrat(
|
||||
fontSize: 18,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: Constants.grey1,
|
||||
),
|
||||
foregroundColors: const MultiColor.single(Constants.grey1),
|
||||
backgroundColors: const MultiColor.single(Constants.grey4),
|
||||
borderColors: const MultiColor(Constants.greyGradient),
|
||||
stroke: 1,
|
||||
),
|
||||
hoveredStyle: style.copyWith(
|
||||
foregroundColors: const MultiColor.single(Constants.white),
|
||||
backgroundColors: const MultiColor(Constants.blueGradient),
|
||||
),
|
||||
tappedStyle: style.copyWith(
|
||||
foregroundColors: const MultiColor.single(Constants.white),
|
||||
backgroundColors: const MultiColor(Constants.blueDarkGradient),
|
||||
borderColors: const MultiColor(Constants.blueDarkGradient),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
ThemeExtension<FlatButtonThemeExtension> copyWith({
|
||||
FlatButtonStyle? disabledStyle,
|
||||
FlatButtonStyle? focusedStyle,
|
||||
FlatButtonStyle? hoveredStyle,
|
||||
FlatButtonStyle? normalStyle,
|
||||
FlatButtonStyle? tappedStyle,
|
||||
}) =>
|
||||
FlatButtonTheme(
|
||||
disabledStyle: disabledStyle ?? this.disabledStyle,
|
||||
focusedStyle: focusedStyle ?? this.focusedStyle,
|
||||
hoveredStyle: hoveredStyle ?? this.hoveredStyle,
|
||||
normalStyle: normalStyle ?? this.normalStyle,
|
||||
tappedStyle: tappedStyle ?? this.tappedStyle,
|
||||
);
|
||||
|
||||
@override
|
||||
ThemeExtension<FlatButtonThemeExtension> lerp(
|
||||
covariant ThemeExtension<FlatButtonThemeExtension>? other,
|
||||
double t,
|
||||
) {
|
||||
if (other is! FlatButtonTheme) {
|
||||
return this;
|
||||
}
|
||||
return FlatButtonTheme(
|
||||
disabledStyle:
|
||||
FlatButtonStyle.lerp(disabledStyle, other.disabledStyle, t),
|
||||
focusedStyle: FlatButtonStyle.lerp(focusedStyle, other.focusedStyle, t),
|
||||
hoveredStyle: FlatButtonStyle.lerp(hoveredStyle, other.hoveredStyle, t),
|
||||
normalStyle: FlatButtonStyle.lerp(normalStyle, other.normalStyle, t),
|
||||
tappedStyle: FlatButtonStyle.lerp(tappedStyle, other.tappedStyle, t),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,155 @@
|
||||
// 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:google_fonts/google_fonts.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/theme/constants.dart';
|
||||
|
||||
class SymbolButtonTheme extends SymbolButtonThemeExtension {
|
||||
const SymbolButtonTheme({
|
||||
super.disabledStyle,
|
||||
super.focusedStyle,
|
||||
super.hoveredStyle,
|
||||
super.normalStyle,
|
||||
super.tappedStyle,
|
||||
super.selectedStyle,
|
||||
});
|
||||
|
||||
factory SymbolButtonTheme.light() {
|
||||
final style = SymbolButtonStyle(
|
||||
label: GoogleFonts.montserrat(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w400,
|
||||
),
|
||||
dimension: 60,
|
||||
radius: BorderRadius.circular(12),
|
||||
padding: const EdgeInsets.all(10),
|
||||
foregroundColors: const MultiColor.single(Constants.grey2),
|
||||
backgroundColors: MultiColor.single(Constants.white.withOpacity(0.04)),
|
||||
borderColors: const MultiColor(Constants.greyGradient),
|
||||
stroke: 2,
|
||||
);
|
||||
return SymbolButtonTheme(
|
||||
normalStyle: style,
|
||||
disabledStyle: style.copyWith(
|
||||
label: GoogleFonts.montserrat(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w400,
|
||||
color: Constants.grey1,
|
||||
),
|
||||
foregroundColors: MultiColor.single(Constants.grey1.withOpacity(0.4)),
|
||||
backgroundColors: const MultiColor.single(Constants.white),
|
||||
borderColors: MultiColor.single(Constants.grey1.withOpacity(0.4)),
|
||||
),
|
||||
hoveredStyle: style.copyWith(
|
||||
backgroundColors: MultiColor.single(Constants.grey1.withOpacity(0.4)),
|
||||
),
|
||||
tappedStyle: style.copyWith(
|
||||
backgroundColors: MultiColor.single(Constants.grey1.withOpacity(0.4)),
|
||||
),
|
||||
selectedStyle: style.copyWith(
|
||||
label: GoogleFonts.montserrat(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
foregroundColors: const MultiColor.single(Constants.grey2),
|
||||
borderColors: const MultiColor(Constants.greenGradient),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
factory SymbolButtonTheme.dark() {
|
||||
final style = SymbolButtonStyle(
|
||||
label: GoogleFonts.montserrat(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w400,
|
||||
),
|
||||
dimension: 60,
|
||||
radius: BorderRadius.circular(12),
|
||||
padding: const EdgeInsets.all(10),
|
||||
foregroundColors: const MultiColor.single(Constants.white),
|
||||
backgroundColors: MultiColor.single(Constants.white.withOpacity(0.04)),
|
||||
borderColors: const MultiColor(Constants.greyGradient),
|
||||
stroke: 2,
|
||||
);
|
||||
return SymbolButtonTheme(
|
||||
normalStyle: style,
|
||||
disabledStyle: style.copyWith(
|
||||
label: GoogleFonts.montserrat(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w400,
|
||||
color: Constants.grey1,
|
||||
),
|
||||
foregroundColors: const MultiColor.single(Constants.grey1),
|
||||
backgroundColors: const MultiColor.single(Constants.grey4),
|
||||
),
|
||||
hoveredStyle: style.copyWith(
|
||||
backgroundColors: const MultiColor(Constants.greyDarkGradient),
|
||||
),
|
||||
tappedStyle: style.copyWith(
|
||||
backgroundColors: const MultiColor(Constants.greyDarkGradient),
|
||||
),
|
||||
selectedStyle: style.copyWith(
|
||||
label: GoogleFonts.montserrat(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
foregroundColors: const MultiColor.single(Constants.white),
|
||||
borderColors: const MultiColor(Constants.greenGradient),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
ThemeExtension<SymbolButtonThemeExtension> copyWith({
|
||||
SymbolButtonStyle? disabledStyle,
|
||||
SymbolButtonStyle? focusedStyle,
|
||||
SymbolButtonStyle? hoveredStyle,
|
||||
SymbolButtonStyle? normalStyle,
|
||||
SymbolButtonStyle? tappedStyle,
|
||||
SymbolButtonStyle? selectedStyle,
|
||||
}) =>
|
||||
SymbolButtonTheme(
|
||||
disabledStyle: disabledStyle ?? this.disabledStyle,
|
||||
focusedStyle: focusedStyle ?? this.focusedStyle,
|
||||
hoveredStyle: hoveredStyle ?? this.hoveredStyle,
|
||||
normalStyle: normalStyle ?? this.normalStyle,
|
||||
tappedStyle: tappedStyle ?? this.tappedStyle,
|
||||
selectedStyle: selectedStyle ?? this.selectedStyle,
|
||||
);
|
||||
|
||||
@override
|
||||
ThemeExtension<SymbolButtonThemeExtension> lerp(
|
||||
covariant ThemeExtension<SymbolButtonThemeExtension>? other,
|
||||
double t,
|
||||
) {
|
||||
if (other is! SymbolButtonTheme) {
|
||||
return this;
|
||||
}
|
||||
return SymbolButtonTheme(
|
||||
disabledStyle:
|
||||
SymbolButtonStyle.lerp(disabledStyle, other.disabledStyle, t),
|
||||
focusedStyle: SymbolButtonStyle.lerp(focusedStyle, other.focusedStyle, t),
|
||||
hoveredStyle: SymbolButtonStyle.lerp(hoveredStyle, other.hoveredStyle, t),
|
||||
normalStyle: SymbolButtonStyle.lerp(normalStyle, other.normalStyle, t),
|
||||
tappedStyle: SymbolButtonStyle.lerp(tappedStyle, other.tappedStyle, t),
|
||||
selectedStyle:
|
||||
SymbolButtonStyle.lerp(selectedStyle, other.selectedStyle, t),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user