Flutter Static Canvas Example

main.dart

// flutter static canvas example
// by @crcdng
// adapted from https://medium.com/flutter-community/flutter-custom-painter-circular-wave-animation-bdc65c112690 by @divyanshub024

import 'dart:math' as math;

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Static',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: StaticRoute(),
    );
  }
}

class StaticRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomPaint(
        size: Size(double.infinity, double.infinity),
        painter: StaticPainter(),
      ),
    );
  }
}

class StaticPainter extends CustomPainter {
  var wavePaint = Paint()
    ..color = Colors.black
    ..style = PaintingStyle.stroke
    ..strokeWidth = 2.0
    ..isAntiAlias = true;

  @override
  void paint(Canvas canvas, Size size) {
    double centerX = size.width / 2.0;
    double centerY = size.height / 2.0;
    double maxRadius = hypot(centerX, centerY);
    double waveGap = 10.0;
    double currentRadius = 0;

    while (currentRadius < maxRadius) {
      wavePaint
        ..color = Color.fromRGBO(math.Random().nextInt(200), math.Random().nextInt(200), math.Random().nextInt(200), 0.4)
        ..strokeWidth = math.Random().nextDouble() * 5.0;
      canvas.drawCircle(Offset(centerX, centerY), currentRadius, wavePaint);
      currentRadius += waveGap + ((math.Random().nextDouble() - 0.5) * 10.0);
    }
  }

  double hypot(double x, double y) {
    return math.sqrt(x * x + y * y);
  }

  @override
  bool shouldRepaint(StaticPainter oldDelegate) {
    return false;
  }
}