Update Bluetooth scanning UI and functionality

- Bump version to 1.2.0 in pubspec.lock.
- Enhance ScannerScreen with a Bluetooth availability tooltip and improved search filter UI.
- Refactor AppDrawer to include a queue type selection feature.
- Update ScannedDevicesPlaceholderWidget to include a 'Start Scan' button for better user interaction.
- Improve overall layout and styling for better user experience.

example/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 1.2.0
+* Improved scan button visibility - converted to prominent filled button with text label
+* Enhanced "no devices found" state with explicit "Start Scan" call-to-action button
+* Moved search field to app bar header for better accessibility
+* Moved queue type settings to drawer menu as expandable section
+* Added tooltip to Bluetooth availability icon (tap to view on mobile)
+* Improved overall UI layout and navigation flow
+
 ## 1.1.0
 * Add support for `autoConnect` parameter
 * Display RSSI values in device details

example/lib/home/scanner_screen.dart

@@ -7,7 +7,6 @@ import 'package:universal_ble/universal_ble.dart';
 import 'package:universal_ble_example/data/mock_universal_ble.dart';
 import 'package:universal_ble_example/home/widgets/ble_availability_icon.dart';
 import 'package:universal_ble_example/home/widgets/drawer.dart';
-import 'package:universal_ble_example/home/widgets/queue_selector_widget.dart';
 import 'package:universal_ble_example/home/widgets/scan_filter_widget.dart';
 import 'package:universal_ble_example/home/widgets/scanned_devices_placeholder_widget.dart';
 import 'package:universal_ble_example/home/widgets/scanned_item_widget.dart';
@@ -270,6 +269,25 @@ class _ScannerScreenState extends State<ScannerScreen> {
   bool get _isBluetoothAvailable =>
       bleAvailabilityState == AvailabilityState.poweredOn;
 
+  String _getBluetoothAvailabilityTooltip() {
+    switch (bleAvailabilityState) {
+      case AvailabilityState.poweredOn:
+        return 'Bluetooth is on';
+      case AvailabilityState.poweredOff:
+        return 'Bluetooth is off';
+      case AvailabilityState.resetting:
+        return 'Bluetooth is resetting';
+      case AvailabilityState.unauthorized:
+        return 'Bluetooth permission denied';
+      case AvailabilityState.unsupported:
+        return 'Bluetooth not supported';
+      case AvailabilityState.unknown:
+        return 'Bluetooth status unknown';
+      case null:
+        return 'Checking Bluetooth status...';
+    }
+  }
+
   @override
   void setState(VoidCallback fn) {
     if (mounted) super.setState(fn);
@@ -287,22 +305,6 @@ class _ScannerScreenState extends State<ScannerScreen> {
     super.dispose();
   }
 
-  void _showQueueBottomSheet() {
-    showModalBottomSheet(
-      context: context,
-      builder: (context) => QueueSelectorWidget(
-        queueType: _queueType,
-        onQueueTypeChanged: (queueType) {
-          setState(() {
-            _queueType = queueType;
-            UniversalBle.queueType = _queueType;
-          });
-          Navigator.pop(context);
-        },
-      ),
-    );
-  }
-
   @override
   Widget build(BuildContext context) {
     final theme = Theme.of(context);
@@ -310,23 +312,73 @@ class _ScannerScreenState extends State<ScannerScreen> {
 
     return Scaffold(
       backgroundColor: colorScheme.surface,
-      drawer: const AppDrawer(),
+      drawer: AppDrawer(
+        queueType: _queueType,
+        onQueueTypeChanged: (queueType) {
+          setState(() {
+            _queueType = queueType;
+            UniversalBle.queueType = _queueType;
+          });
+        },
+      ),
       appBar: AppBar(
         title: Row(
           children: [
-            BleAvailabilityIcon(onAvailabilityStateChanged: (state) {
-              setState(() => bleAvailabilityState = state);
-            }),
-            const SizedBox(width: 12),
             Expanded(
-              child: const Text(
+              child: Container(
-                'Scanner',
+                height: 40,
-                style: TextStyle(
+                decoration: BoxDecoration(
-                  fontWeight: FontWeight.bold,
+                  color: colorScheme.surfaceContainerHighest,
-                  letterSpacing: 0.5,
+                  borderRadius: BorderRadius.circular(8),
+                ),
+                child: TextField(
+                  controller: _searchFilterController,
+                  decoration: InputDecoration(
+                    hintText: 'Search by name, ID, or services...',
+                    prefixIcon: Icon(
+                      Icons.search,
+                      color: colorScheme.primary,
+                      size: 20,
+                    ),
+                    suffixIcon: _searchFilterController.text.isNotEmpty
+                        ? IconButton(
+                            icon: Icon(
+                              Icons.clear,
+                              size: 20,
+                              color:
+                                  colorScheme.onSurface.withValues(alpha: 0.6),
+                            ),
+                            onPressed: () {
+                              _searchFilterController.clear();
+                              _saveScanFilters();
+                              setState(() {});
+                            },
+                          )
+                        : null,
+                    border: OutlineInputBorder(
+                      borderRadius: BorderRadius.circular(8),
+                      borderSide: BorderSide.none,
+                    ),
+                    filled: true,
+                    fillColor: colorScheme.surfaceContainerHighest,
+                    contentPadding: const EdgeInsets.symmetric(
+                      horizontal: 12,
+                      vertical: 8,
+                    ),
+                    isDense: true,
+                  ),
+                  onChanged: (_) => setState(() {}),
                 ),
               ),
             ),
+            const SizedBox(width: 12),
+            Tooltip(
+              message: _getBluetoothAvailabilityTooltip(),
+              triggerMode: TooltipTriggerMode.tap,
+              child: BleAvailabilityIcon(onAvailabilityStateChanged: (state) {
+                setState(() => bleAvailabilityState = state);
+              }),
+            ),
           ],
         ),
         elevation: 0,
@@ -338,88 +390,52 @@ class _ScannerScreenState extends State<ScannerScreen> {
           ),
         ),
         actions: [
-          IconButton(
+          Padding(
-            icon: Icon(
+            padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0),
-              _isScanning ? Icons.stop_circle : Icons.play_arrow,
+            child: FilledButton.icon(
-              color: _isScanning ? colorScheme.error : colorScheme.primary,
+              onPressed: _isBluetoothAvailable
-            ),
+                  ? () async {
-            tooltip: _isScanning ? 'Stop Scan' : 'Start Scan',
+                      if (_isScanning) {
-            onPressed: _isBluetoothAvailable
+                        await UniversalBle.stopScan();
-                ? () async {
+                        setState(() {
-                    if (_isScanning) {
+                          _isScanning = false;
-                      await UniversalBle.stopScan();
+                        });
-                      setState(() {
+                      } else {
-                        _isScanning = false;
+                        await _startScan();
-                      });
+                      }
-                    } else {
-                      await _startScan();
                     }
-                  }
+                  : null,
-                : null,
+              icon: Icon(
-          ),
+                _isScanning ? Icons.stop_circle : Icons.play_arrow,
-          IconButton(
+                size: 20,
-            icon: Icon(
+              ),
-              Icons.queue,
+              label: Text(
-              color: colorScheme.onSurface,
+                _isScanning ? 'Stop Scan' : 'Start Scan',
+                style: const TextStyle(
+                  fontSize: 14,
+                  fontWeight: FontWeight.w600,
+                ),
+              ),
+              style: FilledButton.styleFrom(
+                backgroundColor:
+                    _isScanning ? colorScheme.error : colorScheme.primary,
+                foregroundColor:
+                    _isScanning ? colorScheme.onError : colorScheme.onPrimary,
+                padding: const EdgeInsets.symmetric(
+                  horizontal: 16,
+                  vertical: 12,
+                ),
+                shape: RoundedRectangleBorder(
+                  borderRadius: BorderRadius.circular(8),
+                ),
+                elevation: _isScanning ? 0 : 2,
+              ),
             ),
-            tooltip: 'Queue Type',
-            onPressed: _showQueueBottomSheet,
           ),
         ],
       ),
       body: Column(
         children: [
-          // Search filter
-          Padding(
-            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
-            child: Container(
-              decoration: BoxDecoration(
-                color: colorScheme.surfaceContainerHighest,
-                borderRadius: BorderRadius.circular(12),
-                boxShadow: [
-                  BoxShadow(
-                    color: Colors.black.withValues(alpha: 0.05),
-                    blurRadius: 8,
-                    offset: const Offset(0, 2),
-                  ),
-                ],
-              ),
-              child: TextField(
-                controller: _searchFilterController,
-                decoration: InputDecoration(
-                  hintText: 'Search by name, ID, or services...',
-                  prefixIcon: Icon(
-                    Icons.search,
-                    color: colorScheme.primary,
-                  ),
-                  suffixIcon: _searchFilterController.text.isNotEmpty
-                      ? IconButton(
-                          icon: Icon(
-                            Icons.clear,
-                            color: colorScheme.onSurface.withValues(alpha: 0.6),
-                          ),
-                          onPressed: () {
-                            _searchFilterController.clear();
-                            _saveScanFilters();
-                            setState(() {});
-                          },
-                        )
-                      : null,
-                  border: OutlineInputBorder(
-                    borderRadius: BorderRadius.circular(12),
-                    borderSide: BorderSide.none,
-                  ),
-                  filled: true,
-                  fillColor: colorScheme.surfaceContainerHighest,
-                  contentPadding: const EdgeInsets.symmetric(
-                    horizontal: 16,
-                    vertical: 16,
-                  ),
-                ),
-                onChanged: (_) => setState(() {}),
-              ),
-            ),
-          ),
           // Web Services input (only for web)
           if (kIsWeb)
             Padding(

example/lib/home/widgets/drawer.dart

@@ -7,7 +7,14 @@ import 'package:universal_ble_example/home/system_devices_screen.dart';
 import 'package:url_launcher/url_launcher.dart';
 
 class AppDrawer extends StatefulWidget {
-  const AppDrawer({super.key});
+  final QueueType? queueType;
+  final Function(QueueType)? onQueueTypeChanged;
+  
+  const AppDrawer({
+    super.key,
+    this.queueType,
+    this.onQueueTypeChanged,
+  });
 
   @override
   State<AppDrawer> createState() => _AppDrawerState();
@@ -67,7 +74,50 @@ class _AppDrawerState extends State<AppDrawer> {
               onTap: () =>
                   _navigateToScreen(context, const SystemDevicesScreen()),
             ),
-          const Divider(),
+          if (widget.queueType != null && widget.onQueueTypeChanged != null)
+            ExpansionTile(
+              leading: const Icon(Icons.queue),
+              title: const Text('Queue Type'),
+              subtitle: Text(
+                _getQueueTypeLabel(widget.queueType!),
+                style: TextStyle(
+                  fontSize: 12,
+                  color: colorScheme.onSurface.withValues(alpha: 0.6),
+                ),
+              ),
+              children: [
+                Padding(
+                  padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+                  child: Column(
+                    children: [
+                      _buildQueueOption(
+                        context,
+                        QueueType.global,
+                        'Global',
+                        'All commands from all devices execute sequentially in a single queue',
+                        Icons.queue,
+                      ),
+                      const SizedBox(height: 8),
+                      _buildQueueOption(
+                        context,
+                        QueueType.perDevice,
+                        'Per Device',
+                        'Commands for each device execute in separate queues',
+                        Icons.devices,
+                      ),
+                      const SizedBox(height: 8),
+                      _buildQueueOption(
+                        context,
+                        QueueType.none,
+                        'None',
+                        'All commands execute in parallel without queuing',
+                        Icons.all_inclusive,
+                      ),
+                    ],
+                  ),
+                ),
+              ],
+            ),
           FutureBuilder(
             future: PackageInfo.fromPlatform(),
             builder: (_, snapshot) => AboutListTile(
@@ -128,4 +178,93 @@ class _AppDrawerState extends State<AppDrawer> {
       ),
     );
   }
+
+  String _getQueueTypeLabel(QueueType queueType) {
+    switch (queueType) {
+      case QueueType.global:
+        return 'Global';
+      case QueueType.perDevice:
+        return 'Per Device';
+      case QueueType.none:
+        return 'None';
+    }
+  }
+
+  Widget _buildQueueOption(
+    BuildContext context,
+    QueueType value,
+    String title,
+    String description,
+    IconData icon,
+  ) {
+    final colorScheme = Theme.of(context).colorScheme;
+    final isSelected = widget.queueType == value;
+    return InkWell(
+      onTap: () {
+        widget.onQueueTypeChanged?.call(value);
+        Navigator.pop(context);
+      },
+      borderRadius: BorderRadius.circular(12),
+      child: Container(
+        padding: const EdgeInsets.all(12),
+        decoration: BoxDecoration(
+          color: isSelected
+              ? colorScheme.primaryContainer
+              : colorScheme.surfaceContainerHighest,
+          borderRadius: BorderRadius.circular(12),
+          border: Border.all(
+            color: isSelected
+                ? colorScheme.primary
+                : colorScheme.outline.withValues(alpha: 0.2),
+            width: isSelected ? 2 : 1,
+          ),
+        ),
+        child: Row(
+          children: [
+            Icon(
+              icon,
+              color: isSelected
+                  ? colorScheme.onPrimaryContainer
+                  : colorScheme.onSurface,
+            ),
+            const SizedBox(width: 16),
+            Expanded(
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text(
+                    title,
+                    style: TextStyle(
+                      fontWeight: FontWeight.bold,
+                      fontSize: 14,
+                      color: isSelected
+                          ? colorScheme.onPrimaryContainer
+                          : colorScheme.onSurface,
+                    ),
+                  ),
+                  const SizedBox(height: 4),
+                  Text(
+                    description,
+                    style: TextStyle(
+                      fontSize: 11,
+                      color: isSelected
+                          ? colorScheme.onPrimaryContainer
+                              .withValues(alpha: 0.7)
+                          : colorScheme.onSurface.withValues(alpha: 0.6),
+                    ),
+                  ),
+                ],
+              ),
+            ),
+            if (isSelected)
+              Icon(
+                Icons.check_circle,
+                color: colorScheme.primary,
+                size: 20,
+              ),
+          ],
+        ),
+      ),
+    );
+  }
 }

example/lib/home/widgets/scanned_devices_placeholder_widget.dart

@@ -14,22 +14,19 @@ class ScannedDevicesPlaceholderWidget extends StatelessWidget {
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
-            InkWell(
+            Container(
-              onTap: onTap,
+              padding: const EdgeInsets.all(32),
-              child: Container(
+              decoration: BoxDecoration(
-                padding: const EdgeInsets.all(32),
+                color: colorScheme.primaryContainer.withValues(alpha: 0.3),
-                decoration: BoxDecoration(
+                shape: BoxShape.circle,
-                  color: colorScheme.primaryContainer.withValues(alpha: 0.3),
+              ),
-                  shape: BoxShape.circle,
+              child: Icon(
-                ),
+                Icons.bluetooth_searching,
-                child: Icon(
+                size: 80,
-                  Icons.bluetooth_searching,
+                color: colorScheme.primary.withValues(alpha: 0.6),
-                  size: 80,
-                  color: colorScheme.primary.withValues(alpha: 0.6),
-                ),
               ),
             ),
-            const SizedBox(height: 24),
+            const SizedBox(height: 32),
             Text(
               'No Devices Found',
               style: TextStyle(
@@ -38,18 +35,42 @@ class ScannedDevicesPlaceholderWidget extends StatelessWidget {
                 fontWeight: FontWeight.bold,
               ),
             ),
-            const SizedBox(height: 8),
+            const SizedBox(height: 12),
             Padding(
               padding: const EdgeInsets.symmetric(horizontal: 48),
               child: Text(
-                'Tap Scan button to discover nearby Bluetooth devices',
+                'Start scanning to discover nearby Bluetooth devices',
                 textAlign: TextAlign.center,
                 style: TextStyle(
-                  color: colorScheme.onSurface.withValues(alpha: 0.6),
+                  color: colorScheme.onSurface.withValues(alpha: 0.7),
-                  fontSize: 14,
+                  fontSize: 16,
                 ),
               ),
             ),
+            const SizedBox(height: 32),
+            FilledButton.icon(
+              onPressed: onTap,
+              icon: const Icon(Icons.play_arrow, size: 24),
+              label: const Text(
+                'Start Scan',
+                style: TextStyle(
+                  fontSize: 18,
+                  fontWeight: FontWeight.w600,
+                ),
+              ),
+              style: FilledButton.styleFrom(
+                backgroundColor: colorScheme.primary,
+                foregroundColor: colorScheme.onPrimary,
+                padding: const EdgeInsets.symmetric(
+                  horizontal: 32,
+                  vertical: 16,
+                ),
+                shape: RoundedRectangleBorder(
+                  borderRadius: BorderRadius.circular(12),
+                ),
+                elevation: 2,
+              ),
+            ),
           ],
         ),
       ),

example/pubspec.lock

@@ -632,7 +632,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "1.1.0"
+    version: "1.2.0"
   url_launcher:
     dependency: "direct main"
     description: