chore: use builder to style pressable buttons based on height

This commit is contained in:
ggurdin 2025-12-16 11:17:35 -05:00
parent a3e70d623d
commit 43fc4f3daf
No known key found for this signature in database
GPG key ID: A01CB41737CBB478
5 changed files with 36 additions and 26 deletions

View file

@ -601,7 +601,7 @@ class Message extends StatelessWidget {
color: color,
visible:
isButton && !noBubble,
child:
builder: (context, _, __) =>
// Pangea#
Container(
decoration: BoxDecoration(

View file

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

View file

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

View file

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

View file

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