chore: use builder to style pressable buttons based on height
This commit is contained in:
parent
a3e70d623d
commit
43fc4f3daf
5 changed files with 36 additions and 26 deletions
|
|
@ -601,7 +601,7 @@ class Message extends StatelessWidget {
|
|||
color: color,
|
||||
visible:
|
||||
isButton && !noBubble,
|
||||
child:
|
||||
builder: (context, _, __) =>
|
||||
// Pangea#
|
||||
Container(
|
||||
decoration: BoxDecoration(
|
||||
|
|
|
|||
|
|
@ -11,7 +11,8 @@ class PressableButton extends StatefulWidget {
|
|||
final double buttonHeight;
|
||||
final bool depressed;
|
||||
final Color color;
|
||||
final Widget child;
|
||||
final Widget Function(BuildContext context, bool depressed, Color shadowColor)
|
||||
builder;
|
||||
|
||||
final void Function()? onPressed;
|
||||
final Stream? triggerAnimation;
|
||||
|
|
@ -22,7 +23,7 @@ class PressableButton extends StatefulWidget {
|
|||
|
||||
const PressableButton({
|
||||
required this.borderRadius,
|
||||
required this.child,
|
||||
required this.builder,
|
||||
required this.onPressed,
|
||||
required this.color,
|
||||
this.buttonHeight = 4,
|
||||
|
|
@ -137,8 +138,15 @@ class PressableButtonState extends State<PressableButton>
|
|||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final shadowColor = Color.alphaBlend(
|
||||
Colors.black.withAlpha(
|
||||
(255 * widget.colorFactor).round(),
|
||||
),
|
||||
widget.color,
|
||||
);
|
||||
|
||||
if (!widget.visible) {
|
||||
return widget.child;
|
||||
return widget.builder(context, _depressed, shadowColor);
|
||||
}
|
||||
|
||||
return MouseRegion(
|
||||
|
|
@ -160,12 +168,7 @@ class PressableButtonState extends State<PressableButton>
|
|||
SizedBox(height: _tweenAnimation.value),
|
||||
Container(
|
||||
decoration: BoxDecoration(
|
||||
color: Color.alphaBlend(
|
||||
Colors.black.withAlpha(
|
||||
(255 * widget.colorFactor).round(),
|
||||
),
|
||||
widget.color,
|
||||
),
|
||||
color: shadowColor,
|
||||
borderRadius: widget.borderRadius,
|
||||
),
|
||||
padding: EdgeInsets.only(
|
||||
|
|
@ -173,7 +176,16 @@ class PressableButtonState extends State<PressableButton>
|
|||
? widget.buttonHeight - _tweenAnimation.value
|
||||
: 0,
|
||||
),
|
||||
child: child,
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: widget.borderRadius,
|
||||
),
|
||||
child: widget.builder(
|
||||
context,
|
||||
_depressed || _tweenAnimation.value > 0,
|
||||
shadowColor,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
|
|
@ -181,12 +193,6 @@ class PressableButtonState extends State<PressableButton>
|
|||
],
|
||||
);
|
||||
},
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: widget.borderRadius,
|
||||
),
|
||||
child: widget.child,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
|
|
|
|||
|
|
@ -44,13 +44,14 @@ class FullWidthButtonState extends State<FullWidthButton> {
|
|||
onPressed: widget.onPressed,
|
||||
borderRadius: BorderRadius.circular(36),
|
||||
color: Theme.of(context).colorScheme.primary,
|
||||
child: Container(
|
||||
// internal padding
|
||||
builder: (context, depressed, shadowColor) => Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16),
|
||||
height: 40,
|
||||
decoration: BoxDecoration(
|
||||
color: widget.enabled
|
||||
? Theme.of(context).colorScheme.primary
|
||||
? depressed
|
||||
? shadowColor
|
||||
: Theme.of(context).colorScheme.primary
|
||||
: Theme.of(context).disabledColor,
|
||||
borderRadius: BorderRadius.circular(36),
|
||||
),
|
||||
|
|
|
|||
|
|
@ -35,11 +35,11 @@ class ToolbarButton extends StatelessWidget {
|
|||
playSound: true,
|
||||
colorFactor:
|
||||
Theme.of(context).brightness == Brightness.light ? 0.55 : 0.3,
|
||||
child: Container(
|
||||
builder: (context, depressed, shadowColor) => Container(
|
||||
height: 40.0,
|
||||
width: 40.0,
|
||||
decoration: BoxDecoration(
|
||||
color: color,
|
||||
color: depressed ? shadowColor : color,
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
child: Icon(
|
||||
|
|
|
|||
|
|
@ -345,12 +345,15 @@ class SelectModeButtonsState extends State<SelectModeButtons> {
|
|||
playSound: enabled && mode != SelectMode.audio,
|
||||
colorFactor:
|
||||
theme.brightness == Brightness.light ? 0.55 : 0.3,
|
||||
child: AnimatedContainer(
|
||||
builder: (context, depressed, shadowColor) =>
|
||||
AnimatedContainer(
|
||||
duration: FluffyThemes.animationDuration,
|
||||
height: buttonSize,
|
||||
width: buttonSize,
|
||||
decoration: BoxDecoration(
|
||||
color: theme.colorScheme.primaryContainer,
|
||||
color: depressed
|
||||
? shadowColor
|
||||
: theme.colorScheme.primaryContainer,
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
child: _SelectModeButtonIcon(
|
||||
|
|
@ -577,12 +580,12 @@ class _MoreButton extends StatelessWidget {
|
|||
onPressed: () => _showMenu(context),
|
||||
playSound: true,
|
||||
colorFactor: theme.brightness == Brightness.light ? 0.55 : 0.3,
|
||||
child: AnimatedContainer(
|
||||
builder: (context, depressed, shadowColor) => AnimatedContainer(
|
||||
duration: FluffyThemes.animationDuration,
|
||||
height: 40.0,
|
||||
width: 40.0,
|
||||
decoration: BoxDecoration(
|
||||
color: theme.colorScheme.primaryContainer,
|
||||
color: depressed ? shadowColor : theme.colorScheme.primaryContainer,
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
child: const Icon(
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue