From 95333a13b8daec6fa8900aca028f5f3b426d1221 Mon Sep 17 00:00:00 2001 From: Janez T Date: Thu, 16 Oct 2025 14:29:15 +0200 Subject: [PATCH] feat: Refactor home screen layout to improve button visibility and RX/TX indicators --- lib/screens/home_screen.dart | 263 ++++++++++++++++++----------------- 1 file changed, 135 insertions(+), 128 deletions(-) diff --git a/lib/screens/home_screen.dart b/lib/screens/home_screen.dart index ef10fd3..7a8360c 100644 --- a/lib/screens/home_screen.dart +++ b/lib/screens/home_screen.dart @@ -641,124 +641,13 @@ class _HomeScreenState extends State ], ), ), - Row( - mainAxisSize: MainAxisSize.min, - children: [ - // Advertise button (broadcast location) - always visible - FilledButton( - onPressed: isConnected ? () => _advertiseDevice(context) : null, - style: FilledButton.styleFrom( - backgroundColor: Colors.blue.shade700, - foregroundColor: Colors.white, - padding: const EdgeInsets.all(10), - minimumSize: const Size(40, 40), - shape: const CircleBorder(), - ), - child: const Icon(Icons.campaign, size: 20), - ), - const SizedBox(width: 8), - // Device config button - always visible - GestureDetector( - onTap: () { - Navigator.push( - context, - MaterialPageRoute( - builder: (context) => const DeviceConfigScreen(), - ), - ); - }, - onLongPress: () { - Navigator.push( - context, - MaterialPageRoute( - builder: (context) => - PacketLogScreen(bleService: provider.bleService), - ), - ); - }, - child: Container( - width: 36, - height: 36, - alignment: Alignment.center, - child: const Icon(Icons.settings, size: 20), - ), - ), - if (isConnected && _showRxTxIndicators) ...[ - const SizedBox(width: 8), - // RX/TX indicators with long press to open packet log - GestureDetector( - onLongPress: () { - Navigator.push( - context, - MaterialPageRoute( - builder: (context) => - PacketLogScreen(bleService: provider.bleService), - ), - ); - }, - child: Column( - mainAxisSize: MainAxisSize.min, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - // RX indicator - Row( - mainAxisSize: MainAxisSize.min, - children: [ - Container( - width: 8, - height: 8, - decoration: BoxDecoration( - shape: BoxShape.circle, - color: provider.rxActivity - ? Colors.green - : Colors.grey.withOpacity(0.3), - ), - ), - const SizedBox(width: 4), - Text( - 'RX:${provider.rxPacketCount}', - style: const TextStyle( - fontSize: 11, - color: Colors.grey, - ), - ), - ], - ), - const SizedBox(height: 4), - // TX indicator - Row( - mainAxisSize: MainAxisSize.min, - children: [ - Container( - width: 8, - height: 8, - decoration: BoxDecoration( - shape: BoxShape.circle, - color: provider.txActivity - ? Colors.blue - : Colors.grey.withOpacity(0.3), - ), - ), - const SizedBox(width: 4), - Text( - 'TX:${provider.txPacketCount}', - style: const TextStyle( - fontSize: 11, - color: Colors.grey, - ), - ), - ], - ), - ], - ), - ), - ], - const SizedBox(width: 8), - // Connect/Disconnect button on the right - if (!isConnected) + if (!isConnected) + Row( + mainAxisSize: MainAxisSize.min, + children: [ ElevatedButton.icon( onPressed: provider.isReconnecting - ? null + ? null // Disable button during reconnection : () => _showConnectionDialog(context), icon: provider.isReconnecting ? const SizedBox( @@ -786,22 +675,140 @@ class _HomeScreenState extends State ), ), ), - // Cancel button during reconnection - if (provider.isReconnecting) ...[ - const SizedBox(width: 8), - IconButton( - onPressed: () => provider.cancelReconnection(), - icon: const Icon(Icons.close, size: 20), - tooltip: 'Cancel reconnection', - style: IconButton.styleFrom( - backgroundColor: Colors.red.shade700, + // Cancel button during reconnection + if (provider.isReconnecting) ...[ + const SizedBox(width: 8), + IconButton( + onPressed: () => provider.cancelReconnection(), + icon: const Icon(Icons.close, size: 20), + tooltip: 'Cancel reconnection', + style: IconButton.styleFrom( + backgroundColor: Colors.red.shade700, + foregroundColor: Colors.white, + padding: const EdgeInsets.all(8), + ), + ), + ], + ], + ) + else + Row( + mainAxisSize: MainAxisSize.min, + children: [ + // Advertise button (broadcast location) + FilledButton( + onPressed: () => _advertiseDevice(context), + style: FilledButton.styleFrom( + backgroundColor: Colors.blue.shade700, foregroundColor: Colors.white, - padding: const EdgeInsets.all(8), + padding: const EdgeInsets.all(10), + minimumSize: const Size(40, 40), + shape: const CircleBorder(), + ), + child: const Icon(Icons.campaign, size: 20), + ), + if (_showRxTxIndicators) ...[ + const SizedBox(width: 8), + // RX/TX indicators with long press to open packet log + GestureDetector( + onLongPress: () { + Navigator.push( + context, + MaterialPageRoute( + builder: (context) => + PacketLogScreen(bleService: provider.bleService), + ), + ); + }, + child: Column( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + // RX indicator + Row( + mainAxisSize: MainAxisSize.min, + children: [ + Container( + width: 8, + height: 8, + decoration: BoxDecoration( + shape: BoxShape.circle, + color: provider.rxActivity + ? Colors.green + : Colors.grey.withOpacity(0.3), + ), + ), + const SizedBox(width: 4), + Text( + 'RX:${provider.rxPacketCount}', + style: const TextStyle( + fontSize: 11, + color: Colors.grey, + ), + ), + ], + ), + const SizedBox(height: 4), + // TX indicator + Row( + mainAxisSize: MainAxisSize.min, + children: [ + Container( + width: 8, + height: 8, + decoration: BoxDecoration( + shape: BoxShape.circle, + color: provider.txActivity + ? Colors.blue + : Colors.grey.withOpacity(0.3), + ), + ), + const SizedBox(width: 4), + Text( + 'TX:${provider.txPacketCount}', + style: const TextStyle( + fontSize: 11, + color: Colors.grey, + ), + ), + ], + ), + ], + ), + ), + const SizedBox(width: 12), + ], + // Settings button (tap for device settings, long press for packet logs) + GestureDetector( + onTap: () { + Navigator.push( + context, + MaterialPageRoute( + builder: (context) => const DeviceConfigScreen(), + ), + ); + }, + onLongPress: () { + Navigator.push( + context, + MaterialPageRoute( + builder: (context) => + PacketLogScreen(bleService: provider.bleService), + ), + ); + }, + child: Container( + width: 36, + height: 36, + alignment: Alignment.center, + child: const Icon(Icons.settings, size: 20), ), ), + const SizedBox(width: 16), + + // Disconnect button (prominent, icon only) - pushed to far right edge ], - ], - ), + ), ], ); },