flutter_device_preview icon indicating copy to clipboard operation
flutter_device_preview copied to clipboard

feat: add quick device tools and theme switching to DevicePreview

Open ahmtydn opened this issue 6 months ago • 0 comments

Device Preview Package - Enhancement Update

🚀 Overview

This PR introduces significant improvements and new features to the device_preview package. The main focus is on quick device selection tools, theme switching capabilities, and overall user experience enhancements.

✨ New Features

1. Quick Device Selection

  • Compact device icon widget added
  • Quick device view with new compact interface
  • Toast notifications support for device selection
  • Automatic icon selection based on device types

2. Theme Switching Features

  • Theme change callback support (onThemeChanged)
  • Initial dark mode setting (initialDarkMode)
  • Theme toggle button
  • Theme state tracking and notification system

3. Enhanced Configuration Options

  • enableQuickDevicesTools: Enable quick device tools
  • showDeviceToast: Device selection notifications
  • showThemeToggle: Theme toggle button visibility
  • ScaffoldMessenger integration for global access

🔧 Technical Improvements

Code Structure

  • New widget class organization
  • Modular structure for tool panel
  • Better state management
  • Comprehensive dartdoc documentation

📁 File Changes

New Files

lib/src/views/tool_panel/widgets/
├── compact_device_icon.dart          # Compact device icon widget
├── compact_quick_devices_view.dart   # Quick device selection view  
├── tool_panel_widget.dart           # Main tool panel widget
└── widgets.dart                     # Widget export file

Main Changes

  • device_preview.dart: New parameters and configuration options
  • state.dart: Added quickDeviceTools field
  • store.dart: Theme callbacks and initial settings
  • tool_panel.dart: Enhanced tool panel configuration

🎯 Usage Examples

Basic Usage

DevicePreview(
  enabled: true,
  enableQuickDevicesTools: true,
  showDeviceToast: true,
  showThemeToggle: true,
  onThemeChanged: (isDark) {
    print('Theme changed to: ${isDark ? 'Dark' : 'Light'}');
  },
  quickDevices: [
    Devices.ios.iPhone13ProMax,
    Devices.ios.iPadPro11Inches,
  ],
  builder: (context) => const MyApp(),
)

Advanced Configuration

DevicePreview(
  enabled: true,
  enableQuickDevicesTools: true, // Quick device tools
  showDeviceToast: true,         // Toast notifications
  showThemeToggle: true,         // Theme toggle button
  initialDarkMode: false,        // Initial theme setting
  onThemeChanged: handleThemeChange,
  quickDevices: customDeviceList,
  builder: buildApp,
)

🔄 Breaking Changes

None - These changes are backward compatible. All new features are optional parameters.

📋 Migration Notes

No changes required for existing users. New features are disabled by default and preserve existing behavior.


Reviewer Notes: This PR has been thoroughly tested and adds new features without affecting existing functionality. During code review, special attention should be paid to the performance of new widgets and state management implementation.

ahmtydn avatar Jun 14 '25 17:06 ahmtydn