VOLT

Night running app in Flutter

A night running app in Flutter, with tonight's tempo, a live 8 km run on a real map of Ulaanbaatar and a lime flood the moment you slide to finish.

Stack: Flutter 3.47, Riverpod, go_router
Runs on: iOS and Android
Screens: 6, plus launch and splash
Tests: 17 passing, 0 analyzer issues
Code: 74 Dart files, no comments

Photos from Wikimedia Commons under CC0, map data © OpenStreetMap contributors

Watch it run

Filmed from the real app, beside its real code.

The dark tears away in slanted strips, then lime floods in and tears into Today
Lime strips slam across the screen and tear away onto the map
The route lights up behind the runner and each kilometre fills as you go
Slide to finish floods the screen lime and DONE lands with a shake
Each tab wipes in on a slanted edge while the dock chip stretches
The route draws itself over the city and the splits rise
The podium rises from the floor and the gap to first fills

Every screen

Today
Live
Done
Runs
Plan
Crew

Read the code

Real VOLT code, straight from the app.

core/motion/slash_curtain.dart

  @override  void paint(Canvas canvas, Size size) {    if (cover <= 0 || tear >= 1) return;    final paint = Paint()..color = color;    final height = size.height / bands;    final travel = size.width * 1.45;    for (var band = 0; band < bands; band++) {      final order = bands - 1 - band;      final direction = band.isEven ? 1.0 : -1.0;      final entering = 1 - _staggered(cover, order);      final leaving = _staggered(tear, order);      final shift = direction * travel * (leaving - entering);      final rect = Rect.fromLTWH(        -size.width * 0.2 + shift,        band * height - 1,        size.width * 1.4,

27  @override28  void paint(Canvas canvas, Size size) {29    if (cover <= 0 || tear >= 1) return;30    final paint = Paint()..color = color;31    final height = size.height / bands;32    final travel = size.width * 1.45;33    for (var band = 0; band < bands; band++) {34      final order = bands - 1 - band;35      final direction = band.isEven ? 1.0 : -1.0;36      final entering = 1 - _staggered(cover, order);37      final leaving = _staggered(tear, order);38      final shift = direction * travel * (leaving - entering);39      final rect = Rect.fromLTWH(40        -size.width * 0.2 + shift,41        band * height - 1,42        size.width * 1.4,43        height + 2,44      );45      canvas.drawPath(Slant.path(rect), paint);46    }47  }

VOLT

$10.99