Right to Left support (bdlukaa#184)

Author: dev-hann

CHANGELOG.md

@@ -12,6 +12,7 @@ Date format: DD/MM/YYYY
   - Improved fidelity of the suggestions overlay
   - When a suggestion is picked, the overlay is automatically closed and the text box is unfocused
   - Clear button now only shows when the text box is focused
+- Add directionality support ([#184](https://github.com/bdlukaa/fluent_ui/pull/184))
 
 ## [3.9.0] - Fidelity - [10/02/2022]
 

example/lib/main.dart

@@ -4,6 +4,7 @@ import 'package:fluent_ui/fluent_ui.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter_acrylic/flutter_acrylic.dart' as flutter_acrylic;
 import 'package:provider/provider.dart';
+import 'package:system_theme/system_theme.dart';
 import 'package:url_launcher/link.dart';
 import 'package:url_strategy/url_strategy.dart';
 
@@ -31,6 +32,8 @@ bool get isDesktop {
 void main() async {
   WidgetsFlutterBinding.ensureInitialized();
 
+  SystemTheme.accentInstance;
+
   setPathUrlStrategy();
 
   if (isDesktop) {
@@ -82,6 +85,12 @@ class MyApp extends StatelessWidget {
               glowFactor: is10footScreen() ? 2.0 : 0.0,
             ),
           ),
+          builder: (context, child) {
+            return Directionality(
+              textDirection: appTheme.textDirection,
+              child: child!,
+            );
+          },
         );
       },
     );
@@ -118,7 +127,7 @@ class _MyHomePageState extends State<MyHomePage> {
           if (kIsWeb) return const Text(appTitle);
           return MoveWindow(
             child: const Align(
-              alignment: Alignment.centerLeft,
+              alignment: AlignmentDirectional.centerStart,
               child: Text(appTitle),
             ),
           );

example/lib/screens/forms.dart

@@ -65,7 +65,7 @@ class _FormsState extends State<Forms> {
           },
           textInputAction: TextInputAction.next,
           prefix: const Padding(
-            padding: EdgeInsets.only(left: 8.0),
+            padding: EdgeInsetsDirectional.only(start: 8.0),
             child: Icon(FluentIcons.edit_mail),
           ),
         ),

example/lib/screens/inputs.dart

@@ -163,8 +163,8 @@ class _InputsPageState extends State<InputsPage> {
                         color: disabled
                             ? FluentTheme.of(context).accentColor.darker
                             : FluentTheme.of(context).accentColor,
-                        borderRadius: const BorderRadius.horizontal(
-                          left: Radius.circular(4.0),
+                        borderRadius: const BorderRadiusDirectional.horizontal(
+                          start: Radius.circular(4.0),
                         ),
                       ),
                       height: 24,

example/lib/screens/settings.dart

@@ -165,6 +165,30 @@ class Settings extends StatelessWidget {
             );
           }),
         ],
+        biggerSpacer,
+        Text('Text Direction',
+            style: FluentTheme.of(context).typography.subtitle),
+        spacer,
+        ...List.generate(TextDirection.values.length, (index) {
+          final direction = TextDirection.values[index];
+          return Padding(
+            padding: const EdgeInsets.only(bottom: 8.0),
+            child: RadioButton(
+              checked: appTheme.textDirection == direction,
+              onChanged: (value) {
+                if (value) {
+                  appTheme.textDirection = direction;
+                }
+              },
+              content: Text(
+                '$direction'
+                    .replaceAll('TextDirection.', '')
+                    .replaceAll('rtl', 'Right to left')
+                    .replaceAll('ltr', 'Left to right'),
+              ),
+            ),
+          );
+        }).reversed,
       ],
     );
   }

example/lib/theme.dart

@@ -41,6 +41,13 @@ class AppTheme extends ChangeNotifier {
     _acrylicEffect = acrylicEffect;
     notifyListeners();
   }
+
+  TextDirection _textDirection = TextDirection.ltr;
+  TextDirection get textDirection => _textDirection;
+  set textDirection(TextDirection direction) {
+    _textDirection = direction;
+    notifyListeners();
+  }
 }
 
 AccentColor get systemAccentColor {

example/pubspec.lock

@@ -205,6 +205,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "0.12.11"
+  material_color_utilities:
+    dependency: transitive
+    description:
+      name: material_color_utilities
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.1.3"
   meta:
     dependency: transitive
     description:
@@ -321,7 +328,7 @@ packages:
       name: test_api
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.4.3"
+    version: "0.4.8"
   typed_data:
     dependency: transitive
     description:

lib/src/controls/form/auto_suggest_box.dart

@@ -376,7 +376,7 @@ class __AutoSuggestBoxOverlayTileState extends State<_AutoSuggestBoxOverlayTile>
                 states.isDisabled ? {ButtonStates.none} : states,
               ),
             ),
-            alignment: Alignment.centerLeft,
+            alignment: AlignmentDirectional.centerStart,
             child: EntrancePageTransition(
               child: Text(
                 widget.text,

lib/src/controls/inputs/dropdown_button.dart

@@ -3,6 +3,10 @@ import 'package:flutter/foundation.dart';
 
 const double _kVerticalOffset = 20.0;
 const double _kInnerPadding = 5.0;
+const Widget _kDefaultDropdownButtonTrailing = Icon(
+  FluentIcons.chevron_down,
+  size: 10,
+);
 
 /// A DropDownButton is a button that shows a chevron as a visual indicator that
 /// it has an attached flyout that contains more options. It has the same
@@ -203,20 +207,16 @@ class _DropDownButtonState extends State<DropDownButton>
     final buttonChildren = <Widget>[
       if (widget.leading != null)
         Padding(
-          padding: const EdgeInsets.only(right: 8.0),
+          padding: const EdgeInsetsDirectional.only(end: 8.0),
           child: IconTheme.merge(
             data: const IconThemeData(size: 20.0),
             child: widget.leading!,
           ),
         ),
       if (widget.title != null) widget.title!,
       Padding(
-        padding: const EdgeInsets.only(left: 8.0),
-        child: widget.trailing ??
-            const Icon(
-              FluentIcons.chevron_down,
-              size: 10,
-            ),
+        padding: const EdgeInsetsDirectional.only(end: 8.0),
+        child: widget.trailing ?? _kDefaultDropdownButtonTrailing,
       ),
     ];
 
@@ -313,12 +313,12 @@ class DropDownButtonItem {
               child: Row(mainAxisSize: MainAxisSize.min, children: [
                 if (leading != null)
                   Padding(
-                    padding: const EdgeInsets.only(right: 8.0),
+                    padding: const EdgeInsetsDirectional.only(end: 8.0),
                     child: leading!,
                   ),
                 if (title != null)
                   Padding(
-                    padding: const EdgeInsets.only(right: 8.0),
+                    padding: const EdgeInsetsDirectional.only(end: 8.0),
                     child: title!,
                   ),
                 if (trailing != null) trailing!,

lib/src/controls/inputs/pill_button_bar.dart

@@ -30,7 +30,7 @@ class PillButtonBarItem {
 /// See also:
 ///
 ///   * [PillButtonBarItem], the item used by pill button bar
-///   * [PillButtonTheme], used to style the pill button bar
+///   * [PillButtonBarTheme], used to style the pill button bar
 class PillButtonBar extends StatelessWidget {
   /// Creates a pill button bar.
   ///
@@ -86,7 +86,7 @@ class PillButtonBar extends StatelessWidget {
         }),
       ),
     );
-    return Align(alignment: Alignment.topLeft, child: bar);
+    return Align(alignment: AlignmentDirectional.topStart, child: bar);
   }
 }