overlayer_ui_flutter 1.0.0

A premium, high-fidelity UI overlay controls library for Flutter, including customizable slider, toggle, dropdown, and button widgets.

example/lib/main.dart

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:overlayer_ui_flutter/overlayer_ui_flutter.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Overlayer UI Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        brightness: Brightness.dark,
        scaffoldBackgroundColor: const Color(0xFF16151D), // Ultra-dark bg
      ),
      home: const SettingsSandbox(),
    );
  }
}

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

  @override
  State<SettingsSandbox> createState() => _SettingsSandboxState();
}

class _SettingsSandboxState extends State<SettingsSandbox> {
  final OverlayerState _state = OverlayerState();
  String _statusMessage = 'Hover elements or middle-click controls to reset';

  @override
  void initState() {
    super.initState();

  }

  void _showNotification(String msg) {
    setState(() {
      _statusMessage = msg;
    });
  }

  @override
  Widget build(BuildContext context) {
    return ListenableBuilder(
      listenable: _state,
      builder: (context, child) {
        if (!_state.isInitialized) {
          return const Scaffold(
            body: Center(
              child: CircularProgressIndicator(
                valueColor: AlwaysStoppedAnimation<Color>(Color(0xFF919AFF)),
              ),
            ),
          );
        }

        return OverlayerStateProvider(
          state: _state,
          child: Scaffold(
            body: Stack(
              children: [
                // Background Radial Glow Pattern
                Positioned.fill(
                  child: Container(
                    decoration: const BoxDecoration(
                      gradient: RadialGradient(
                        colors: [
                          Color(0x1F919AFF), // Soft accent glow
                          Colors.transparent,
                        ],
                        center: Alignment(0.0, -0.5),
                        radius: 1.2,
                      ),
                    ),
                  ),
                ),

                // Main Panel Layout
                Center(
                  child: SingleChildScrollView(
                    padding: const EdgeInsets.symmetric(vertical: 40.0, horizontal: 24.0),
                    child: Container(
                      width: 500.0,
                      decoration: BoxDecoration(
                        color: const Color(0xFF1E1C28), // Premium card dark
                        borderRadius: BorderRadius.circular(16.0),
                        border: Border.all(
                          color: Colors.white.withValues(alpha: 0.04),
                          width: 1.0,
                        ),
                        boxShadow: [
                          BoxShadow(
                            color: Colors.black.withValues(alpha: 0.6),
                            blurRadius: 40.0,
                            offset: const Offset(0.0, 15.0),
                          ),
                        ],
                      ),
                      padding: const EdgeInsets.all(28.0),
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        crossAxisAlignment: CrossAxisAlignment.stretch,
                        children: [
                          // Header Section
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              const Text(
                                'OVERLAYER V5 UI',
                                style: TextStyle(
                                  fontFamily: 'SUIT',
                                  fontSize: 22.0,
                                  fontWeight: FontWeight.bold,
                                  color: Colors.white,
                                  letterSpacing: 1.5,
                                  decoration: TextDecoration.none,
                                ),
                              ),
                              Container(
                                padding: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 4.0),
                                decoration: BoxDecoration(
                                  color: _state.active
                                      ? const Color(0x22919AFF)
                                      : const Color(0x11626696),
                                  borderRadius: BorderRadius.circular(6.0),
                                ),
                                child: Text(
                                  _state.active ? 'ACTIVE' : 'DISABLED',
                                  style: TextStyle(
                                    fontSize: 12.0,
                                    fontWeight: FontWeight.w600,
                                    color: _state.active
                                        ? const Color(0xFF919AFF)
                                        : const Color(0xFF626696),
                                    decoration: TextDecoration.none,
                                  ),
                                ),
                              ),
                            ],
                          ),
                          const SizedBox(height: 8.0),
                          Text(
                            _statusMessage,
                            style: TextStyle(
                              fontSize: 13.0,
                              color: Colors.white.withValues(alpha: 0.5),
                              fontStyle: FontStyle.italic,
                              decoration: TextDecoration.none,
                            ),
                          ),
                          const Divider(
                            color: Color(0x1F626696),
                            height: 30.0,
                            thickness: 1.0,
                          ),

                          // Controls Section


                          _buildControlWrapper(
                            label: 'Active State (Toggle)',
                            tooltipText: 'Toggle: Click to enable/disable overlay elements. Middle-click to reset.',
                            child: UIToggle(
                              modelValue: _state.active,
                              defaultValue: OverlayerDefaults.active,
                              label: 'Enable Overlayer Engine',
                              onChanged: (val) {
                                _state.active = val;
                                _showNotification('Overlay is now ${val ? "active" : "inactive"}');
                              },
                            ),
                          ),
                          const SizedBox(height: 16.0),





                          _buildControlWrapper(
                            label: 'Font Size Settings (Slider)',
                            tooltipText: 'Slider: Custom font sizing. Middle-click to reset to 24px.',
                            child: UISlider(
                              modelValue: _state.fontSize,
                              defaultValue: OverlayerDefaults.fontSize,
                              min: 12.0,
                              max: 36.0,
                              label: 'Label Font Size',
                              onChanged: (val) {
                                _state.fontSize = val;
                              },
                              onComplete: (val) {
                                _showNotification('Font size set to ${val.round()}px');
                              },
                            ),
                          ),
                          const SizedBox(height: 16.0),

                          _buildControlWrapper(
                            label: 'Tooltips Enabled (Toggle)',
                            tooltipText: 'Toggle: Toggle global tooltips. Middle-click to reset.',
                            child: UIToggle(
                              modelValue: _state.tooltip,
                              defaultValue: OverlayerDefaults.tooltip,
                              label: 'Show Floating Tooltips',
                              onChanged: (val) {
                                _state.tooltip = val;
                                _showNotification('Tooltips are now ${val ? "enabled" : "disabled"}');
                              },
                            ),
                          ),
                          const SizedBox(height: 16.0),

                          _buildControlWrapper(
                            label: 'Middle-Click Reset (Toggle)',
                            tooltipText: 'Toggle: Enable middle-scroll-wheel clicking to reset any setting.',
                            child: UIToggle(
                              modelValue: _state.middleClickToDefault,
                              defaultValue: OverlayerDefaults.middleClickToDefault,
                              label: 'Allow Middle-Click Reset',
                              onChanged: (val) {
                                _state.middleClickToDefault = val;
                                _showNotification('Middle-click reset is ${val ? "enabled" : "disabled"}');
                              },
                            ),
                          ),
                          const SizedBox(height: 24.0),

                          // Actions Row
                          Row(
                            children: [
                              Expanded(
                                child: UIButton(
                                  label: 'Reset Defaults',
                                  onClick: () {
                                    _state.resetAll();
                                    _showNotification('All settings reset to defaults');
                                  },
                                ),
                              ),
                              const SizedBox(width: 12.0),
                              Expanded(
                                child: UIButton(
                                  label: 'Apply Changes',
                                  onClick: () {
                                    _showNotification('All settings applied successfully!');
                                  },
                                ),
                              ),
                            ],
                          ),
                        ],
                      ),
                    ),
                  ),
                ),

                // Absolute Floating Tooltip Render
                if (_state.tooltipVisible)
                  Positioned(
                    left: _state.tooltipX + 16.0,
                    top: _state.tooltipY + 16.0,
                    child: IgnorePointer(
                      child: Container(
                        padding: const EdgeInsets.symmetric(horizontal: 12.0, vertical: 8.0),
                        decoration: BoxDecoration(
                          color: const Color(0xFA1E1C28), // Solid glass bg
                          borderRadius: BorderRadius.circular(6.0),
                          border: Border.all(
                            color: const Color(0xFF919AFF).withValues(alpha: 0.3),
                            width: 1.0,
                          ),
                          boxShadow: const [
                            BoxShadow(
                              color: Colors.black38,
                              blurRadius: 8.0,
                              offset: Offset(0, 4),
                            ),
                          ],
                        ),
                        constraints: const BoxConstraints(maxWidth: 260.0),
                        child: Text(
                          _state.tooltipText,
                          style: const TextStyle(
                            fontFamily: 'SUIT',
                            fontSize: 14.0,
                            fontWeight: FontWeight.normal,
                            color: Colors.white,
                            decoration: TextDecoration.none,
                          ),
                        ),
                      ),
                    ),
                  ),
              ],
            ),
          ),
        );
      },
    );
  }

  Widget _buildControlWrapper({
    required String label,
    required String tooltipText,
    required Widget child,
  }) {
    return MouseRegion(
      onHover: (PointerHoverEvent event) {
        _state.showTooltip(tooltipText, event.position.dx, event.position.dy);
      },
      onExit: (_) => _state.hideTooltip(),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Padding(
            padding: const EdgeInsets.only(left: 4.0, bottom: 8.0),
            child: Text(
              label,
              style: const TextStyle(
                fontFamily: 'SUIT',
                fontSize: 14.0,
                fontWeight: FontWeight.w600,
                color: Color(0xFF919AFF), // Accent label color
                letterSpacing: 0.5,
                decoration: TextDecoration.none,
              ),
            ),
          ),
          child,
        ],
      ),
    );
  }
}