Flutter Widgets Overview

A Flutter widget library providing hardware-control UI components designed for use with the RadioKit Arduino framework.

Installation

Add the package to your pubspec.yaml:

dependencies:
  radiokit_widgets:
    path: ../flutter-widgets

Import the public library entry point:

import 'package:radiokit_widgets/radiokit_widgets.dart';

Widgets Overview

Widget	Description
RKButton	Momentary or toggle push button with haptic feedback
RKSlideSwitch	iOS-style slide toggle
RKRockerSwitch	Rocker-style on/off switch
RKSlider	Linear slider with value display
RKKnob	Rotary knob with spring physics
RKJoystick	2-axis joystick control
RKLed	LED indicator with colour control
RKMultiButton	Radio-style button group
RKMultiSelect	Checkbox-style multi-select
RKDisplay	Read-only text display
RKSerialMonitor	Serial console widget

Getting Started

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

class ExampleScreen extends StatefulWidget {
  const ExampleScreen({super.key});

  @override
  State<ExampleScreen> createState() => _ExampleScreenState();
}

class _ExampleScreenState extends State<ExampleScreen> {
  bool _buttonOn = false;
  double _sliderValue = 0.5;
  double _knobValue = 0.0;

  @override
  Widget build(BuildContext context) {
    return RKTheme(
      tokens: RKTokens.defaultTokens(),
      child: Scaffold(
        backgroundColor: RKTheme.of(context).surface,
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              RKButton(
                mode: RKButtonMode.toggle,
                label: 'Power',
                activeColor: Colors.green,
                onChanged: (v) => setState(() => _buttonOn = v),
              ),
              const SizedBox(height: 24),
              RKSlider(
                value: _sliderValue,
                min: 0,
                max: 100,
                divisions: 10,
                label: 'Throttle',
                onChanged: (v) => setState(() => _sliderValue = v),
              ),
              const SizedBox(height: 24),
              RKKnob(
                value: _knobValue,
                onChanged: (v) => setState(() => _knobValue = v),
                label: 'Steer',
              ),
              const SizedBox(height: 24),
              RKLed(
                state: _buttonOn,
                color: _buttonOn ? Colors.green : Colors.red,
                label: 'Status',
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Theming

All widgets use RKTheme for consistent styling:

RKTheme(
  tokens: RKTokens.defaultTokens().copyWith(
    primary: Colors.cyan,
    surface: const Color(0xFF1A1A2E),
    background: const Color(0xFF16213E),
  ),
  child: MyApp(),
)

Widget Features

• Haptic Feedback: Optional vibration on interaction (enabled by default)
• Spring Physics: Smooth, physical-feeling animations
• Rotation Support: All widgets support rotation parameter
• Label Support: Optional text labels above widgets
• Accessibility: Full semantics support
• Responsive: Adapts to available space

See Also

• RKButton API — Full button documentation
• RKSlider API — Slider with value display
• RKKnob API — Rotary control
• RKJoystick API — 2-axis control
• RKLed API — LED indicator