🧪 Осциллограф внутри Flutter: знакомимся с пакетом Oscilloscope

Визуализация данных в реальном времени — просто и красиво.

Разработчики Flutter-приложений часто сталкиваются с задачей отображения потоковых данных: будь то показания датчиков, биржевые котировки, сигналы с микрофона или просто результаты работы алгоритма. И если для статичных графиков уже есть привычные решения, то для динамической прокрутки волны выбор не так велик.

Знакомьтесь: oscilloscope — легковесный пакет от spiralarm.uk, который превращает стандартный график в настоящий экран осциллографа.

📦 Что это и зачем?

Пакет принимает на вход списки чисел (например, List<double>), визуализирует их и анимирует появление новых значений. Когда график доходит до правого края — он плавно прокручивается, освобождая место для новых точек.

Визуально это выглядит как работа классического аналогового осциллографа или кардиомонитора.

🚀 Быстрый старт

Добавьте в pubspec.yaml:

dependencies:
  oscilloscope: ^1.0.0   # актуальная версия на момент прочтения

Импортируйте:

import 'package:oscilloscope/oscilloscope.dart';

Базовое использование:

Oscilloscope(
  data: myDataList,               // List<double>
  backgroundColor: Colors.black,
  traceColor: Colors.greenAccent,
  strokeWidth: 2.0,
  margin: const EdgeInsets.all(8.0),
)

🎛 Настройка

Пакет предлагает набор параметров, достаточный для гибкой кастомизации:

Параметр	Назначение
`backgroundColor`	Цвет фона
`traceColor`	Цвет линии сигнала
`strokeWidth`	Толщина линии
`margin`	Отступы вокруг графика
`showYAxis`	Отображение оси Y
`yAxisColor`	Цвет оси Y
`yAxisMin` / `yAxisMax`	Фиксация диапазона по вертикали

💡 Пример: имитация ЭКГ

Представьте, что вы пишете приложение для фитнес-трекера и хотите показать кардиограмму.

class EcgMonitor extends StatefulWidget {
  @override
  _EcgMonitorState createState() => _EcgMonitorState();
}

class _EcgMonitorState extends State<EcgMonitor> {
  final List<double> _data = List.filled(100, 0.0);

  void _simulateEcg() {
    // В реальности здесь был бы поток с Bluetooth
    setState(() {
      _data.add(50 + 30 * sin(_data.length * 0.2));
      if (_data.length > 300) _data.removeAt(0);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Oscilloscope(
        data: _data,
        backgroundColor: Colors.black,
        traceColor: Colors.lime,
        strokeWidth: 2.5,
        yAxisMin: 0,
        yAxisMax: 100,
        showYAxis: true,
        yAxisColor: Colors.grey,
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _simulateEcg,
        child: Icon(Icons.favorite),
      ),
    );
  }
}

Добавляйте новые значения — и график сам позаботится об отображении и прокрутке.

✅ Плюсы и особенности

✔ Лёгкость интеграции — виджет готов к использованию «из коробки» ✔ Поддержка прокрутки — автопрокрутка при достижении правого края ✔ Минималистичный API — всего один виджет и несколько параметров ✔ Лицензия Apache‑2.0 — можно использовать в коммерческих проектах ✔ Акцент на производительность — график не перерисовывает всё с нуля

🔮 Когда это пригодится?

📱 DIY-приложения — подключение к Arduino, ESP32, BLE-датчикам
🧠 Образовательные проекты — демонстрация волн, звука, сигналов
🎛 Мониторинги и дашборды — стильное отображение метрик
🎮 Игровые интерфейсы — радары, линии пульса, sci-fi стилистика

📎 Полезные ссылки

Осциллограф — не просто ностальгия по аналоговой эпохе, а удобный инструмент для современной Flutter-разработки.

Попробуйте добавить живые данные в своё приложение — это увлекательнее, чем статика! 📈✨

История

С.-Петербург, август. Фестиваль Chaos 2025.

Отличный уголок технаря. “Зелёный” и “ламповый” цвет осциллографов зашёл воспоминаниями: школьными, студенческими и работ в конторах Ленинграда. Мой первый осциллограф С1-5 получил из рук наставника в ведущего инженера Геннадия Среднякова. Сейчас у меня в кладовке пара ламповых С1-5 с датой выпуска моего года рождения.

Так держать пульс истории!

Авторы: Человеческое творение с цифровым помощником [ai deepseek chat]

Осциллограф электроника и программирование на Flutter