Refactor marker label display on map screens#204
Conversation
…alignment and styling
There was a problem hiding this comment.
Pull request overview
This PR refactors the marker label display mechanism in map screens to improve alignment and styling. The changes focus on improving the visual presentation of labels that appear above map markers and making the user's own location marker more intuitive.
Changes:
- Replaced text label inside user marker with person pin icon for better visual clarity
- Changed user marker label from device name to localized "You" text for consistency with other map screens
- Restructured label widget hierarchy: moved FittedBox outside Container and adjusted positioning
- Standardized label text styling across map screens (fontSize: 11, fontWeight: w500)
- Adjusted vertical offset of labels from -26 to -20 pixels
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| lib/screens/map_screen.dart | Refactored user marker to use icon instead of text; changed label from device name to "You"; restructured label widget with new positioning and alignment |
| lib/screens/line_of_sight_map_screen.dart | Restructured label widget to match map_screen.dart pattern; updated font styling (size 10→11, added weight) |
Comments suppressed due to low confidence (1)
lib/screens/map_screen.dart:619
- The marker label refactoring applied here is inconsistent with similar implementations in other map screens. The files
path_trace_map.dart(line 474-509) andchannel_message_path_screen.dart(line 658-693) still use the old pattern with offset -26, SizedBox width constraint, and centerLeft alignment. Consider applying the same refactoring to those files for consistency, or provide justification for the different implementations if they serve different purposes.
offset: const Offset(0, -20),
child: FittedBox(
fit: BoxFit.contain,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
decoration: BoxDecoration(
color: Colors.black54,
borderRadius: BorderRadius.circular(8),
),
alignment: Alignment.center,
child: Text(
label,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
color: Colors.white,
fontSize: 11,
fontWeight: FontWeight.w500,
),
),
),
),
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| ), | ||
| offset: const Offset(0, -20), | ||
| child: FittedBox( | ||
| fit: BoxFit.contain, |
There was a problem hiding this comment.
The change from BoxFit.scaleDown to BoxFit.contain may cause unintended scaling behavior. With BoxFit.contain, short labels (e.g., single characters or short names) could be scaled UP to fill the available marker space (120x24), making them appear larger than the intended fontSize of 11. Consider using BoxFit.scaleDown instead to prevent upscaling while still allowing downscaling for long labels, or explicitly set a maxWidth on the Container to prevent excessive scaling.
| fit: BoxFit.contain, | |
| fit: BoxFit.scaleDown, |
| ), | ||
| offset: const Offset(0, -20), | ||
| child: FittedBox( | ||
| fit: BoxFit.contain, |
There was a problem hiding this comment.
The change from BoxFit.scaleDown to BoxFit.contain may cause unintended scaling behavior. With BoxFit.contain, short labels (e.g., single characters or short names) could be scaled UP to fill the available marker space (120x24), making them appear larger than the intended fontSize of 11. Consider using BoxFit.scaleDown instead to prevent upscaling while still allowing downscaling for long labels, or explicitly set a maxWidth on the Container to prevent excessive scaling.
| fit: BoxFit.contain, | |
| fit: BoxFit.scaleDown, |
| fontSize: 11, | ||
| fontWeight: FontWeight.w500, | ||
| ), | ||
| offset: const Offset(0, -20), |
There was a problem hiding this comment.
The vertical offset change from -26 to -20 pixels moves the label closer to the marker by 6 pixels. Verify that this positioning works well with the new marker icon (Icons.person_pin_circle) and doesn't cause visual overlap or crowding. The original offset may have been calibrated for the old text-based marker design.
| offset: const Offset(0, -20), | |
| offset: const Offset(0, -26), |
Refactor label display on Map screens for improved alignment and styling