Files
buzz/mobile/lib/shared/widgets/flapping_bee.dart
626e2c34a3 feat(mobile): add bee pull-to-refresh (#5059)
## Summary

Replace Flutter's standard mobile pull-to-refresh indicator with our
animated Buzz bee.

## Testing

- `bin/just mobile-check`
- `bin/just mobile-test` (1,248 tests)
- Connected iPhone and Pixel 10

---------

Signed-off-by: kenny lopez <klopez4212@gmail.com>
Signed-off-by: Fizz <50a12680c76f1a52c0b7af8dbb17e02c583227c290fb93b9a3defb456114223f@buzz.block.builderlab.xyz>
Signed-off-by: Wes <wesbillman@users.noreply.github.com>
Co-authored-by: Fizz <50a12680c76f1a52c0b7af8dbb17e02c583227c290fb93b9a3defb456114223f@buzz.block.builderlab.xyz>
Co-authored-by: Wes <wesbillman@users.noreply.github.com>
Co-authored-by: Carl <c7ebe626f000404285d3686e1dc74cc07cc60a9754a150041ba132e14bd3e2ec@buzz.block.builderlab.xyz>
2026-08-07 16:09:19 +00:00

156 lines
4.3 KiB
Dart

import 'dart:math' show min;
import 'package:flutter/material.dart';
/// The Buzz mark at a caller-controlled wing position.
///
/// The geometry matches the desktop loading bee. Callers drive the wings
/// themselves, which lets one painter serve both the tap-to-flutter mark
/// ([TappableFlappingBee]) and the pull-to-refresh indicator
/// ([BeeRefreshIndicator]).
class FlappingBee extends StatelessWidget {
/// The rendered width of the complete bee mark.
///
/// Height follows from the mark's 466:309 aspect ratio.
final double width;
/// The color used for the bee silhouette, wings, and pupils.
final Color color;
/// How far the wings are tucked toward the body, from 0 to 1.
///
/// 0 renders the wings fully spread; 1 renders them at their innermost
/// tuck. Callers animate this to flap the wings.
final double flapAmount;
/// How far the pupils have grown, from 0 to 1, or null for cutout eyes.
///
/// Only the pull-to-refresh treatment sets this. Leaving it null preserves
/// the mark's ordinary cutout eyes; a non-null value fills them in, with 1
/// drawing the pupils at full size.
final double? eyeProgress;
const FlappingBee({
required this.width,
required this.color,
required this.flapAmount,
this.eyeProgress,
super.key,
});
@override
Widget build(BuildContext context) {
return RepaintBoundary(
child: CustomPaint(
size: Size(width, width * 309 / 466),
painter: _FlappingBeePainter(
color: color,
flapAmount: flapAmount,
eyeProgress: eyeProgress,
),
),
);
}
}
class _FlappingBeePainter extends CustomPainter {
final Color color;
final double flapAmount;
final double? eyeProgress;
const _FlappingBeePainter({
required this.color,
required this.flapAmount,
this.eyeProgress,
});
@override
void paint(Canvas canvas, Size size) {
final scale = min(size.width / 466, size.height / 309);
final renderedWidth = 466 * scale;
final renderedHeight = 309 * scale;
canvas
..save()
..translate(
(size.width - renderedWidth) / 2,
(size.height - renderedHeight) / 2,
)
..scale(scale);
final wingRadiusX = 91.7 * (1 - (0.38 * flapAmount));
final wingTranslation = 30 * flapAmount;
final leftWing = Path()
..addOval(
Rect.fromCenter(
center: Offset(91.7 + wingTranslation, 154.5),
width: wingRadiusX * 2,
height: 183.4,
),
);
final rightWing = Path()
..addOval(
Rect.fromCenter(
center: Offset(374.3 - wingTranslation, 154.5),
width: wingRadiusX * 2,
height: 183.4,
),
);
final body = Path()
..addRRect(
RRect.fromRectAndRadius(
const Rect.fromLTWH(128, 0, 210, 309),
const Radius.circular(34),
),
);
final cutouts = Path()
..addOval(
Rect.fromCenter(
center: const Offset(193.3, 84.4),
width: 54,
height: 54,
),
)
..addOval(
Rect.fromCenter(center: const Offset(276, 84.4), width: 54, height: 54),
)
..addRRect(
RRect.fromRectAndRadius(
const Rect.fromLTWH(166.3, 157.2, 136.9, 38.3),
const Radius.circular(5),
),
)
..addRRect(
RRect.fromRectAndRadius(
const Rect.fromLTWH(166.9, 235.1, 136.2, 37.6),
const Radius.circular(5),
),
);
final wings = Path.combine(PathOperation.union, leftWing, rightWing);
final silhouette = Path.combine(PathOperation.union, wings, body);
final finishedMark = Path.combine(
PathOperation.difference,
silhouette,
cutouts,
);
canvas.drawPath(finishedMark, Paint()..color = color);
if (eyeProgress case final progress?) {
final pupilRadius = 20 * progress.clamp(0.0, 1.0);
final pupilPaint = Paint()..color = color;
canvas
..drawCircle(const Offset(193.3, 84.4), pupilRadius, pupilPaint)
..drawCircle(const Offset(276, 84.4), pupilRadius, pupilPaint);
}
canvas.restore();
}
@override
bool shouldRepaint(_FlappingBeePainter oldDelegate) =>
color != oldDelegate.color ||
flapAmount != oldDelegate.flapAmount ||
eyeProgress != oldDelegate.eyeProgress;
}