flutter_device_ring 0.1.1

A customizable traffic utilization ring gauge widget for Flutter. Displays network utilization with animated arcs, tier colors, and smooth state transitions.

flutter_device_ring

A customizable dual-traffic utilization ring gauge widget for Flutter. Displays inbound and outbound network utilization for devices as animated arcs with tier-based coloring.

Features

• Dual-arc ring — left half shows inbound traffic, right half shows outbound
• Tier-based colors — automatically colors arcs as low, medium, high, or critical
• Smooth animations — animated transitions when values change
• Glow effect — optional pulsing glow around the ring
• Info overlay — toggle to show percentage and tier badges instead of the child widget
• Direction labels — configurable IN/OUT labels on ring sides
• Fully themeable — customize all colors, stroke width, and label styles via DeviceRingTheme

Getting started

Add the package to your pubspec.yaml:

dependencies:
  flutter_device_ring: ^0.1.1

Then run:

flutter pub get

Usage

import 'package:flutter_device_ring/flutter_device_ring.dart';

DeviceRing(
  inbound: 0.73,
  outbound: 0.45,
  size: 100,
  child: Icon(Icons.router, size: 40),
  label: 'Switch-A',
)

With custom theme

DeviceRing(
  inbound: 0.85,
  outbound: 0.60,
  size: 120,
  theme: const DeviceRingTheme(
    strokeWidth: 8.0,
    showDirectionLabels: true,
  ),
  showGlow: true,
  child: Icon(Icons.dns, size: 48),
)

With custom device image

The child parameter accepts any widget. Images and SVGs are automatically scaled to fit inside the ring arcs.

// PNG or any asset image
DeviceRing(
  inbound: 0.73,
  outbound: 0.45,
  child: Image.asset('assets/my_device.png'),
)

// SVG (using flutter_svg)
DeviceRing(
  inbound: 0.73,
  outbound: 0.45,
  child: SvgPicture.asset('assets/my_device.svg'),
)

With glow intensity

Control the prominence of the outer halo with glowIntensity (0.0–1.0):

DeviceRing(
  inbound: 0.85,
  outbound: 0.60,
  showGlow: true,
  glowIntensity: 1.0, // prominent halo for dashboards
  child: Icon(Icons.router, size: 40),
)

Show info overlay

DeviceRing(
  inbound: 0.72,
  outbound: 0.45,
  showInfo: true, // shows percentage + tier badges
)

Utilization tiers

Tier	Range	Label
Low	0% – 49%	LOW
Medium	50% – 79%	MED
High	80% – 94%	HIGH
Critical	95% – 100%	CRIT

Additional information

• Example app — interactive demo with sliders and tier gallery
• API reference
• File issues