Fix wrong label wrap in page layouts

- Create `YaruOneLineText` widget.
- Add missing comments in `YaruNavigationRailItem`.

Fixes #259

example/lib/example.dart

@@ -35,7 +35,7 @@ class _ExampleState extends State<Example> {
   Widget build(BuildContext context) {
     final model = context.watch<ExampleModel>();
     final configItem = PageItem(
-      titleBuilder: (context) => const Text('Layout'),
+      titleBuilder: (context) => YaruOneLineText('A verylonnnnnnnnnnnng word'),
       tooltipMessage: 'Layout',
       snippetUrl:
           'https://raw.githubusercontent.com/ubuntu/yaru_widgets.dart/main/lib/src/layouts/yaru_landscape_layout.dart',

example/lib/example_page_items.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:yaru_icons/yaru_icons.dart';
+import 'package:yaru_widgets/yaru_widgets.dart';
 import 'pages/banner_page.dart';
 import 'pages/carousel_page.dart';
 import 'pages/check_button_page.dart';
@@ -38,15 +39,15 @@ class PageItem {
 
 final examplePageItems = <PageItem>[
   PageItem(
-    titleBuilder: (context) => const Text('Controls'),
+    titleBuilder: (context) => YaruOneLineText('Controls'),
     tooltipMessage: 'Controls',
     snippetUrl:
         'https://raw.githubusercontent.com/ubuntu/yaru_widgets.dart/main/example/lib/pages/controls_page.dart',
     pageBuilder: (context) => const ControlsPage(),
     iconBuilder: (context, selected) => const Icon(YaruIcons.games),
   ),
   PageItem(
-    titleBuilder: (context) => const Text('YaruBanner'),
+    titleBuilder: (context) => YaruOneLineText('YaruBanner'),
     tooltipMessage: 'YaruBanner',
     snippetUrl:
         'https://raw.githubusercontent.com/ubuntu/yaru_widgets.dart/main/example/lib/pages/banner_page.dart',
@@ -56,15 +57,15 @@ final examplePageItems = <PageItem>[
         : const Icon(YaruIcons.image),
   ),
   PageItem(
-    titleBuilder: (context) => const Text('YaruCarousel'),
+    titleBuilder: (context) => YaruOneLineText('YaruCarousel'),
     tooltipMessage: 'YaruCarousel',
     snippetUrl:
         'https://raw.githubusercontent.com/ubuntu/yaru_widgets.dart/main/example/lib/pages/carousel_page.dart',
     pageBuilder: (_) => const CarouselPage(),
     iconBuilder: (context, selected) => const Icon(YaruIcons.refresh),
   ),
   PageItem(
-    titleBuilder: (context) => const Text('YaruCheckButton'),
+    titleBuilder: (context) => YaruOneLineText('YaruCheckButton'),
     tooltipMessage: 'YaruCheckButton',
     snippetUrl:
         'https://raw.githubusercontent.com/ubuntu/yaru_widgets.dart/main/example/lib/pages/check_button_page.dart',
@@ -74,39 +75,39 @@ final examplePageItems = <PageItem>[
         : const Icon(YaruIcons.checkbox_button_checked),
   ),
   PageItem(
-    titleBuilder: (context) => const Text('YaruColorDisk'),
+    titleBuilder: (context) => YaruOneLineText('YaruColorDisk'),
     tooltipMessage: 'YaruColorDisk',
     snippetUrl:
         'https://raw.githubusercontent.com/ubuntu/yaru_widgets.dart/main/example/lib/pages/color_disk_page.dart',
     pageBuilder: (context) => const ColorDiskPage(),
     iconBuilder: (context, selected) => const Icon(YaruIcons.color_select),
   ),
   PageItem(
-    titleBuilder: (context) => const Text('YaruDraggable'),
+    titleBuilder: (context) => YaruOneLineText('YaruDraggable'),
     tooltipMessage: 'YaruDraggable',
     snippetUrl:
         'https://raw.githubusercontent.com/ubuntu/yaru_widgets.dart/main/example/lib/pages/draffable_page.dart',
     pageBuilder: (context) => const DraggablePage(),
     iconBuilder: (context, selected) => const Icon(YaruIcons.drag_handle),
   ),
   PageItem(
-    titleBuilder: (context) => const Text('YaruExpandable'),
+    titleBuilder: (context) => YaruOneLineText('YaruExpandable'),
     tooltipMessage: 'YaruExpandable',
     snippetUrl:
         'https://raw.githubusercontent.com/ubuntu/yaru_widgets.dart/main/example/lib/pages/expandable_page.dart',
     iconBuilder: (context, selected) => const Icon(YaruIcons.pan_down),
     pageBuilder: (_) => const ExpandablePage(),
   ),
   PageItem(
-    titleBuilder: (context) => const Text('YaruIconButton'),
+    titleBuilder: (context) => YaruOneLineText('YaruIconButton'),
     tooltipMessage: 'YaruIconButton',
     snippetUrl:
         'https://raw.githubusercontent.com/ubuntu/yaru_widgets.dart/main/example/lib/pages/icon_button_page.dart',
     iconBuilder: (context, selected) => const Icon(YaruIcons.app_grid),
     pageBuilder: (_) => const IconButtonPage(),
   ),
   PageItem(
-    titleBuilder: (context) => const Text('YaruOptionButton'),
+    titleBuilder: (context) => YaruOneLineText('YaruOptionButton'),
     tooltipMessage: 'YaruOptionButton',
     snippetUrl:
         'https://raw.githubusercontent.com/ubuntu/yaru_widgets.dart/main/example/lib/pages/option_button_page.dart',
@@ -116,7 +117,7 @@ final examplePageItems = <PageItem>[
     pageBuilder: (_) => const OptionButtonPage(),
   ),
   PageItem(
-    titleBuilder: (context) => const Text('YaruPopupMenuButton'),
+    titleBuilder: (context) => YaruOneLineText('YaruPopupMenuButton'),
     tooltipMessage: 'YaruPopupMenuButton',
     snippetUrl:
         'https://raw.githubusercontent.com/ubuntu/yaru_widgets.dart/main/example/lib/pages/option_button_page.dart',
@@ -125,15 +126,15 @@ final examplePageItems = <PageItem>[
     pageBuilder: (_) => const PopupPage(),
   ),
   PageItem(
-    titleBuilder: (context) => const Text('YaruProgressIndicator'),
+    titleBuilder: (context) => YaruOneLineText('YaruProgressIndicator'),
     tooltipMessage: 'YaruProgressIndicator',
     snippetUrl:
         'https://raw.githubusercontent.com/ubuntu/yaru_widgets.dart/main/example/lib/pages/progress_indicator_page.dart',
     iconBuilder: (context, selected) => const Icon(YaruIcons.download),
     pageBuilder: (_) => const ProgressIndicatorPage(),
   ),
   PageItem(
-    titleBuilder: (context) => const Text('YaruRadioButton'),
+    titleBuilder: (context) => YaruOneLineText('YaruRadioButton'),
     tooltipMessage: 'YaruRadioButton',
     snippetUrl:
         'https://raw.githubusercontent.com/ubuntu/yaru_widgets.dart/main/example/lib/pages/radio_button_page.dart',
@@ -143,23 +144,23 @@ final examplePageItems = <PageItem>[
         : const Icon(YaruIcons.radio_button_checked),
   ),
   PageItem(
-    titleBuilder: (context) => const Text('YaruSection'),
+    titleBuilder: (context) => YaruOneLineText('YaruSection'),
     tooltipMessage: 'YaruSection',
     snippetUrl:
         'https://raw.githubusercontent.com/ubuntu/yaru_widgets.dart/main/example/lib/pages/section_page.dart',
     iconBuilder: (context, selected) => const Icon(YaruIcons.window),
     pageBuilder: (_) => const SectionPage(),
   ),
   PageItem(
-    titleBuilder: (context) => const Text('YaruSelectableContainer'),
+    titleBuilder: (context) => YaruOneLineText('YaruSelectableContainer'),
     tooltipMessage: 'YaruSelectableContainer',
     snippetUrl:
         'https://raw.githubusercontent.com/ubuntu/yaru_widgets.dart/main/example/lib/pages/selectable_container_page.dart',
     iconBuilder: (context, selected) => const Icon(YaruIcons.selection),
     pageBuilder: (_) => const SelectableContainerPage(),
   ),
   PageItem(
-    titleBuilder: (context) => const Text('YaruSwitchButton'),
+    titleBuilder: (context) => YaruOneLineText('YaruSwitchButton'),
     tooltipMessage: 'YaruSwitchButton',
     snippetUrl:
         'https://raw.githubusercontent.com/ubuntu/yaru_widgets.dart/main/example/lib/pages/switch_button_page.dart',
@@ -169,15 +170,15 @@ final examplePageItems = <PageItem>[
         : const Icon(YaruIcons.switch_button),
   ),
   PageItem(
-    titleBuilder: (context) => const Text('YaruTabbedPage'),
+    titleBuilder: (context) => YaruOneLineText('YaruTabbedPage'),
     tooltipMessage: 'YaruTabbedPage',
     snippetUrl:
         'https://raw.githubusercontent.com/ubuntu/yaru_widgets.dart/main/example/lib/pages/tabbed_page_page.dart',
     pageBuilder: (_) => const TabbedPagePage(),
     iconBuilder: (context, selected) => const Icon(YaruIcons.tab_new),
   ),
   PageItem(
-    titleBuilder: (context) => const Text('YaruTile'),
+    titleBuilder: (context) => YaruOneLineText('YaruTile'),
     tooltipMessage: 'YaruTile',
     snippetUrl:
         'https://raw.githubusercontent.com/ubuntu/yaru_widgets.dart/main/example/lib/pages/tile_page.dart',
@@ -186,7 +187,7 @@ final examplePageItems = <PageItem>[
     pageBuilder: (_) => const TilePage(),
   ),
   PageItem(
-    titleBuilder: (context) => const Text('YaruTitleBar'),
+    titleBuilder: (context) => YaruOneLineText('YaruTitleBar'),
     tooltipMessage: 'YaruTitleBar',
     snippetUrl:
         'https://raw.githubusercontent.com/ubuntu/yaru_widgets.dart/main/example/lib/pages/dialog_page.dart',
@@ -196,7 +197,7 @@ final examplePageItems = <PageItem>[
     pageBuilder: (_) => const DialogPage(),
   ),
   PageItem(
-    titleBuilder: (context) => const Text('YaruWindowControl'),
+    titleBuilder: (context) => YaruOneLineText('YaruWindowControl'),
     tooltipMessage: 'YaruWindowControl',
     iconBuilder: (context, selected) => const Icon(YaruIcons.window_top_bar),
     pageBuilder: (_) => const WindowControlsPage(),

lib/src/layouts/yaru_master_tile.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 
+import '../../yaru_widgets.dart';
 import '../constants.dart';
 
 const double _kScrollbarThickness = 8.0;
@@ -27,9 +28,11 @@ class YaruMasterTile extends StatelessWidget {
   final Widget? leading;
 
   /// See [ListTile.title].
+  /// Please prefer to use [YaruOneLineText] to get the correct word break behaviour.
   final Widget? title;
 
   /// See [ListTile.subtitle].
+  /// Please prefer to use [YaruOneLineText] to get the correct word break behaviour.
   final Widget? subtitle;
 
   /// See [ListTile.trailing].

lib/src/layouts/yaru_navigation_rail_item.dart

@@ -1,5 +1,7 @@
 import 'package:flutter/material.dart';
 
+import '../utilities/yaru_one_line_text.dart';
+
 /// Defines the look of a [YaruNavigationRailItem]
 enum YaruNavigationRailStyle {
   /// Will only show icons
@@ -27,11 +29,25 @@ class YaruNavigationRailItem extends StatefulWidget {
     required this.style,
   });
 
+  /// Whatever the related page item is selected in the rail.
   final bool? selected;
+
+  /// Icon widget, displayed agaist the [label].
   final Widget icon;
+
+  /// Label widget, displayed agaist the [icon].
+  /// Please prefer to use [YaruOneLineText] to get the correct word break behaviour.
   final Widget label;
+
+  /// Optional string tooltip.
+  /// If not null a tooltip will be displayed on hover.
+  /// It should describe the whole tile if possible.
   final String? tooltip;
+
+  /// Callback called on tap the tile.
   final VoidCallback? onTap;
+
+  /// Style of this tile, see [YaruNavigationRailStyle].
   final YaruNavigationRailStyle style;
 
   @override

lib/src/utilities/yaru_one_line_text.dart

@@ -0,0 +1,23 @@
+import 'package:flutter/material.dart';
+
+class YaruOneLineText extends Text {
+  YaruOneLineText(
+    String data, {
+    super.key,
+    super.style,
+    super.strutStyle,
+    super.textAlign,
+    super.textDirection,
+    super.locale,
+    super.softWrap,
+    super.overflow,
+    super.textScaleFactor,
+    super.semanticsLabel,
+    super.textWidthBasis,
+    super.textHeightBehavior,
+    super.selectionColor,
+  }) : super(
+          data.replaceAll(' ', '\u00A0'),
+          maxLines: 1,
+        );
+}

lib/yaru_widgets.dart

@@ -42,4 +42,5 @@ export 'src/utilities/yaru_carousel.dart';
 export 'src/utilities/yaru_draggable.dart';
 export 'src/utilities/yaru_expandable.dart';
 export 'src/utilities/yaru_expansion_panel_list.dart';
+export 'src/utilities/yaru_one_line_text.dart';
 export 'src/utilities/yaru_selectable_container.dart';