Basic audio waveform in Flutter

README.md

Basic audio waveform in Flutter

A simple example I made while learning about custom paints in Flutter with CustomPaint and CustomPainter.

This is part of an article I wrote in DEV.to and Medium, check them out!

main.dart

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

void main() {
  runApp(App());
}

final class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          alignment: Alignment.center,
          color: Color(0xFF16161B),
          child: FittedBox(
            child: Container(
              width: 400,
              height: 100,
              child: CustomPaint(
                painter: WavePainter(),
              )
            )
          ),
        ),
      ),
    );
  }
}

final class WavePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final brush = Paint()
      ..color = Color(0xFFFAFAFA)
      ..strokeWidth = 3
      ..strokeCap = StrokeCap.round;

    var shift = 0.0;
    final verticalCenter = size.height / 2;
    final values = List<double>.generate(100, (_) {
      return Random().nextDouble() * verticalCenter;
    });

    for (var i = 0; i < values.length && shift < size.width; i++) {
      canvas.drawLine(
        Offset(shift, verticalCenter - values[i]),
        Offset(shift, verticalCenter + values[i]),
        brush
      );

      shift += 6;
    }
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}