flutter_host_device 0.3.1

A Flutter widget that renders host devices with ports, fully programmatic — no SVG assets required.

flutter_host_device

A Flutter widget that renders host and agent (DPU) devices with ports arranged in a semi-elliptical arc. Fully programmatic — no SVG assets required. Uses topology_view_icons for device and port rendering.

Features

• Programmatic host/agent device rendering with configurable device type icons
• Interactive RJ45 port icons (LNM hardware style) with hover animation and status LED (link up / down / disabled)
• Semi-elliptical port arc layout (dynamic port count, no presets needed)
• On-body port placement via portPositionOverride for devices with built-in ports
• Configurable port size for different device form factors
• Dark and light theme support with auto-detection
• Custom port labels and replaceable center device
• Port selection state with spotlight mode — selected ports stay visually active, unselected ports dim
• Disable port hover animation for static topology views (enablePortHoverAnimation)
• Configurable port label styling, background pill, and visibility toggle
• getPortPositions() API for consumers drawing connection lines
• Supports all device types: host, agent, router, server, switch, firewall, etc.

Getting started

Add the dependency:

dependencies:
  flutter_host_device: ^0.3.1

Usage

Host device

import 'package:flutter_host_device/flutter_host_device.dart';

HostDeviceView(
  size: Size(800, 400),
  portCount: 6,
  portStatuses: {1: PortStatus.up, 2: PortStatus.down, 3: PortStatus.up},
  centerLabel: 'Host-Server-01',
  onPortTap: (portNum) => print('Tapped port $portNum'),
)

Agent (DPU) device

HostDeviceView(
  size: Size(800, 400),
  deviceType: TopoDeviceType.agent,
  portCount: 2,
  portLabels: {1: 'NETA', 2: 'NETB'},
  centerLabel: 'Agent-DPU-01',
  onPortTap: (portNum) => print('Tapped port $portNum'),
)

Custom port labels

HostDeviceView(
  portCount: 4,
  portLabels: {1: 'eth0', 2: 'eth1', 3: 'MGMT', 4: 'iLO'},
  // ...
)

Different device type icons

HostDeviceView(
  deviceType: TopoDeviceType.router,  // or .server, .switch_, .firewall, etc.
  // ...
)

Custom center device

HostDeviceView(
  centerDeviceBuilder: (context, size, theme) {
    return Image.asset('assets/my_custom_host.png', fit: BoxFit.contain);
  },
  // ...
)

On-body port placement

For devices where ports are physically on the device body (e.g., agent/DPU):

HostDeviceView(
  deviceType: TopoDeviceType.agent,
  portCount: 2,
  portSize: 18,
  portPositionOverride: {
    1: Offset(0.39, 0.67),  // NETA position (normalized)
    2: Offset(0.39, 0.77),  // NETB position (normalized)
  },
  portLabels: {1: 'NETA', 2: 'NETB'},
  // ...
)

Port selection / spotlight mode

Tap a port to select it — the selected port stays visually active while others dim:

// In a StatefulWidget:
int? _selectedPort;

HostDeviceView(
  size: Size(800, 400),
  portCount: 6,
  selectedPortNumbers: _selectedPort != null ? {_selectedPort!} : {},
  unselectedPortOpacity: _selectedPort != null ? 0.15 : 1.0,
  onPortTap: (port) => setState(() {
    _selectedPort = _selectedPort == port ? null : port;
  }),
)

Disable port hover animation

For static topology views where the hover float is unnecessary:

HostDeviceView(
  enablePortHoverAnimation: false,
  // ...
)

Custom port label styling

Override label appearance or hide labels entirely:

HostDeviceView(
  portLabelStyle: TextStyle(fontSize: 14, color: Colors.white, fontWeight: FontWeight.w600),
  showPortLabels: false,  // hide labels to render your own overlay
  // ...
)

Get port positions for drawing connection lines

final positions = HostDeviceView.getPortPositions(6, Size(800, 400));
// {1: Offset(x, y), 2: Offset(x, y), ...}

Additional information

• GitHub Repository
• Issue Tracker
• Part of the device topology view family: flutter_switch_device, topology_view_icons