topology_view_icons 1.3.0

Canvas-drawn network topology device icons for Flutter. 10 device types (switch, host, DPU, router, firewall, server, cloud, etc.) in flat and hardware styles with normal/error states. No SVG dependencies.

topology_view_icons

Canvas-drawn network topology device icons for Flutter. Provides a TopoIconPainter CustomPainter with 10 device types in 2 visual styles (flat and LNM hardware).

Features

• 10 device types + port: Network (cloud), Switch, Host, Agent, Router, Firewall, Server, Generic, Unknown, Switch Unknown
• 2 icon styles: Flat (minimal, blue/red) and LNM (hardware illustration)
• Normal + Error states for each icon
• Pure Canvas drawing — no SVG files, no asset loading, no parsing overhead
• Scales to any size — all coordinates are relative to bounds

Usage

import 'package:topology_view_icons/topology_view_icons.dart';

// Use as a CustomPaint widget
CustomPaint(
  size: const Size(80, 80),
  painter: TopoIconPainter(
    deviceType: TopoDeviceType.switch_,
    isError: false,
    style: TopoIconStyle.flat,
  ),
)

Device Types

Type	Description
network	Cloud silhouette (network/subnet)
switch_	Network switch with ports
host	Monitor with stand
agent	Vertical rack unit
router	Circle with directional arrows
firewall	Shield shape
server	Stacked rack units
generic	Simple circle
unknown	Ghost host + magnifying glass with ?
switchUnknown	Ghost switch + magnifying glass with ?
port (via TopoPortPainter)	RJ45 Ethernet port with Link Up/Down/Admin Down states

Icon Styles

• TopoIconStyle.flat — Minimal flat icons. Normal: blue (#4B7BEC), Error: red (#E74C3C).
• TopoIconStyle.lnm — Hardware-style illustrations matching LNM network management UI. Uses chassis greys, navy blues, teal/coral LEDs.

Port Icon

The port uses a separate TopoPortPainter with richer state control:

CustomPaint(
  size: const Size(80, 80),
  painter: TopoPortPainter(
    isUp: true,        // link up (green) vs link down (grey)
    isDisabled: false,  // admin down (dark grey) — overrides isUp
    style: TopoIconStyle.flat,
    direction: PortDirection.up,  // up, down, left, right
  ),
)

State	isDisabled	isUp	Flat Color
Link Up	false	true	Green
Link Down	false	false	Light grey
Admin Down	true	—	Dark grey

Port Direction

Use PortDirection to rotate the port icon for different positions around a device:

Direction	Rotation	Use case
up	0° (default)	Top-row ports
down	180°	Bottom-row ports
left	270°	Left-side ports
right	90°	Right-side ports

Example

Run the interactive gallery:

cd example
flutter run -d chrome

The gallery lets you toggle between Flat/LNM styles, Normal/Error states, and adjust icon size with a slider.