Blink Problem

readme.md

Blink Problem

Created with <3 with dartpad.dev.

main.dart

import 'dart:async';
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

const int minTimerDurationMs = 700;
const int maxTimerDurationMs = 2000;
const int animationDurationMs = 1000;

class FlashingCard extends StatefulWidget {
  final Widget child;
  const FlashingCard({required this.child, super.key});

  @override
  State<FlashingCard> createState() => _FlashingCardState();
}

class _FlashingCardState extends State<FlashingCard> {
  late Color targetColor;

  Future<void> resetColor(Color baseColor) async {
    await Future.delayed(
        const Duration(milliseconds: animationDurationMs ~/ 2));
    targetColor = targetColor == baseColor ? baseColor.withRed(100) : baseColor;
  }

  @override
  Widget build(BuildContext context) {
    targetColor = Theme.of(context).colorScheme.surface.withRed(100);

    return FutureBuilder<void>(
      future: resetColor(Theme.of(context).colorScheme.surface),
      builder: (context, AsyncSnapshot<void> _) {
        return TweenAnimationBuilder<Color?>(
          tween: ColorTween(
            begin: Theme.of(context).colorScheme.surface,
            end: targetColor,
          ),
          duration: const Duration(milliseconds: animationDurationMs ~/ 2),
          curve: Curves.ease,
          builder: (
            BuildContext context,
            Color? bgColor,
            Widget? child,
          ) {
            return Card(
              color: bgColor,
              elevation: 3.0,
              child: widget.child,
            );
          },
        );
      },
    );
  }
}

class Thing with ChangeNotifier {
  Timer? timer;
  Random rnd = Random();

  void createTimer() {
    int timerDurationMs = minTimerDurationMs +
        rnd.nextInt(maxTimerDurationMs - minTimerDurationMs);
    timer = Timer.periodic(
      Duration(milliseconds: timerDurationMs),
      (timer) {
        tick();
        timer.cancel();
        createTimer();
      },
    );
  }

  Thing() {
    createTimer();
  }

  void tick() {
    print('tick!');
    notifyListeners();
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My Blink Problem',
      debugShowCheckedModeBanner: false,
      theme: ThemeData.dark(),
      home: const MyHomePage(title: 'My Blink Problem'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({
    Key? key,
    required this.title,
  }) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Thing thing = Thing();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ChangeNotifierProvider<Thing>.value(
          value: thing,
          child: Consumer<Thing>(
            builder: (_, __, ___) {
              return SizedBox(
                width: 100,
                height: 100,
                child: FlashingCard(
                  child: Center(
                    child: const Text('Blinkie!'),
                  ),
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

void main() => runApp(MyApp());