RTL support for DataTable (#12229)

Just some very minor tweaks to remove subtle LTR bias.

We use the same arrow rotation animation in RTL and LTR, but I think
that's correct. Usually, rotations are either clockwise or
anitclockwise, which are the same in RTL and LTR. We might need to check
with someone who reads an RTL language to confirm.

Fixes #11845

packages/flutter/lib/src/material/data_table.dart

@@ -36,7 +36,7 @@ class DataColumn {
     @required this.label,
     this.tooltip,
     this.numeric: false,
-    this.onSort
+    this.onSort,
   }) : assert(label != null);
 
   /// The column heading.
@@ -88,7 +88,7 @@ class DataRow {
     this.key,
     this.selected: false,
     this.onSelectChanged,
-    @required this.cells
+    @required this.cells,
   }) : assert(cells != null);
 
   /// Creates the configuration for a row of a [DataTable], deriving
@@ -99,7 +99,7 @@ class DataRow {
     int index,
     this.selected: false,
     this.onSelectChanged,
-    @required this.cells
+    @required this.cells,
   }) : assert(cells != null),
        key = new ValueKey<int>(index);
 
@@ -258,7 +258,7 @@ class DataTable extends StatelessWidget {
     this.sortColumnIndex,
     this.sortAscending: true,
     this.onSelectAll,
-    @required this.rows
+    @required this.rows,
   }) : assert(columns != null),
        assert(columns.isNotEmpty),
        assert(sortColumnIndex == null || (sortColumnIndex >= 0 && sortColumnIndex < columns.length)),
@@ -367,19 +367,19 @@ class DataTable extends StatelessWidget {
         child: new Checkbox(
           activeColor: color,
           value: checked,
-          onChanged: onCheckboxChanged
-        )
-      )
+          onChanged: onCheckboxChanged,
+        ),
+      ),
     );
     if (onRowTap != null) {
       contents = new TableRowInkWell(
         onTap: onRowTap,
-        child: contents
+        child: contents,
       );
     }
     return new TableCell(
       verticalAlignment: TableCellVerticalAlignment.fill,
-      child: contents
+      child: contents,
     );
   }
 
@@ -391,18 +391,18 @@ class DataTable extends StatelessWidget {
     bool numeric,
     VoidCallback onSort,
     bool sorted,
-    bool ascending
+    bool ascending,
   }) {
     if (onSort != null) {
       final Widget arrow = new _SortArrow(
         visible: sorted,
         down: sorted ? ascending : null,
-        duration: _kSortArrowAnimationDuration
+        duration: _kSortArrowAnimationDuration,
       );
       final Widget arrowPadding = const SizedBox(width: _kSortArrowPadding);
       label = new Row(
-        children: numeric ? <Widget>[ arrow, arrowPadding, label ]
-                          : <Widget>[ label, arrowPadding, arrow ]
+        textDirection: numeric ? TextDirection.rtl : null,
+        children: <Widget>[ label, arrowPadding, arrow ],
       );
     }
     label = new Container(
@@ -417,23 +417,22 @@ class DataTable extends StatelessWidget {
           height: _kHeadingRowHeight / _kHeadingFontSize,
           color: (Theme.of(context).brightness == Brightness.light)
             ? ((onSort != null && sorted) ? Colors.black87 : Colors.black54)
-            : ((onSort != null && sorted) ? Colors.white : Colors.white70)
+            : ((onSort != null && sorted) ? Colors.white : Colors.white70),
         ),
         duration: _kSortArrowAnimationDuration,
-        child: label
-      )
+        child: label,
+      ),
     );
     if (tooltip != null) {
       label = new Tooltip(
         message: tooltip,
-        child: label
+        child: label,
       );
     }
     if (onSort != null) {
       label = new InkWell(
         onTap: onSort,
-        // TODO(ianh): When we do RTL, we need to use 'end' ordering for the non-numeric case
-        child: label
+        child: label,
       );
     }
     return label;
@@ -447,13 +446,16 @@ class DataTable extends StatelessWidget {
     bool placeholder,
     bool showEditIcon,
     VoidCallback onTap,
-    VoidCallback onSelectChanged
+    VoidCallback onSelectChanged,
   }) {
     final bool isLightTheme = Theme.of(context).brightness == Brightness.light;
     if (showEditIcon) {
       final Widget icon = const Icon(Icons.edit, size: 18.0);
       label = new Expanded(child: label);
-      label = new Row(children: numeric ? <Widget>[ icon, label ] : <Widget>[ label, icon ]);
+      label = new Row(
+        textDirection: numeric ? TextDirection.rtl : null,
+        children: <Widget>[ label, icon ],
+      );
     }
     label = new Container(
       padding: padding,
@@ -465,25 +467,25 @@ class DataTable extends StatelessWidget {
           fontSize: 13.0,
           color: isLightTheme
             ? (placeholder ? Colors.black38 : Colors.black87)
-            : (placeholder ? Colors.white30 : Colors.white70)
+            : (placeholder ? Colors.white30 : Colors.white70),
         ),
         child: IconTheme.merge(
           data: new IconThemeData(
-            color: isLightTheme ? Colors.black54 : Colors.white70
+            color: isLightTheme ? Colors.black54 : Colors.white70,
           ),
-          child: new DropdownButtonHideUnderline(child: label)
+          child: new DropdownButtonHideUnderline(child: label),
         )
       )
     );
     if (onTap != null) {
       label = new InkWell(
         onTap: onTap,
-        child: label
+        child: label,
       );
     } else if (onSelectChanged != null) {
       label = new TableRowInkWell(
         onTap: onSelectChanged,
-        child: label
+        child: label,
       );
     }
     return label;
@@ -497,10 +499,10 @@ class DataTable extends StatelessWidget {
     final BoxDecoration _kSelectedDecoration = new BoxDecoration(
       border: new Border(bottom: new BorderSide(color: theme.dividerColor)),
       // The backgroundColor has to be transparent so you can see the ink on the material
-      color: (Theme.of(context).brightness == Brightness.light) ? _kGrey100Opacity : _kGrey300Opacity
+      color: (Theme.of(context).brightness == Brightness.light) ? _kGrey100Opacity : _kGrey300Opacity,
     );
     final BoxDecoration _kUnselectedDecoration = new BoxDecoration(
-      border: new Border(bottom: new BorderSide(color: theme.dividerColor))
+      border: new Border(bottom: new BorderSide(color: theme.dividerColor)),
     );
 
     final bool showCheckboxColumn = rows.any((DataRow row) => row.onSelectChanged != null);
@@ -516,7 +518,7 @@ class DataTable extends StatelessWidget {
                                                             : _kUnselectedDecoration,
           children: new List<Widget>(tableColumns.length)
         );
-      }
+      },
     );
 
     int rowIndex;
@@ -527,7 +529,7 @@ class DataTable extends StatelessWidget {
       tableRows[0].children[0] = _buildCheckbox(
         color: theme.accentColor,
         checked: allChecked,
-        onCheckboxChanged: _handleSelectAll
+        onCheckboxChanged: _handleSelectAll,
       );
       rowIndex = 1;
       for (DataRow row in rows) {
@@ -535,7 +537,7 @@ class DataTable extends StatelessWidget {
           color: theme.accentColor,
           checked: row.selected,
           onRowTap: () => row.onSelectChanged(!row.selected),
-          onCheckboxChanged: row.onSelectChanged
+          onCheckboxChanged: row.onSelectChanged,
         );
         rowIndex += 1;
       }
@@ -561,7 +563,7 @@ class DataTable extends StatelessWidget {
         numeric: column.numeric,
         onSort: () => column.onSort(dataColumnIndex, sortColumnIndex == dataColumnIndex ? !sortAscending : true),
         sorted: dataColumnIndex == sortColumnIndex,
-        ascending: sortAscending
+        ascending: sortAscending,
       );
       rowIndex = 1;
       for (DataRow row in rows) {
@@ -574,7 +576,7 @@ class DataTable extends StatelessWidget {
           placeholder: cell.placeholder,
           showEditIcon: cell.showEditIcon,
           onTap: cell.onTap,
-          onSelectChanged: () => row.onSelectChanged(!row.selected)
+          onSelectChanged: () => row.onSelectChanged(!row.selected),
         );
         rowIndex += 1;
       }
@@ -609,7 +611,7 @@ class TableRowInkWell extends InkResponse {
     GestureTapCallback onTap,
     GestureTapCallback onDoubleTap,
     GestureLongPressCallback onLongPress,
-    ValueChanged<bool> onHighlightChanged
+    ValueChanged<bool> onHighlightChanged,
   }) : super(
     key: key,
     child: child,
@@ -618,7 +620,7 @@ class TableRowInkWell extends InkResponse {
     onLongPress: onLongPress,
     onHighlightChanged: onHighlightChanged,
     containedInkWell: true,
-    highlightShape: BoxShape.rectangle
+    highlightShape: BoxShape.rectangle,
   );
 
   @override
@@ -661,7 +663,7 @@ class _SortArrow extends StatefulWidget {
     Key key,
     this.visible,
     this.down,
-    this.duration
+    this.duration,
   }) : super(key: key);
 
   final bool visible;
@@ -699,7 +701,7 @@ class _SortArrowState extends State<_SortArrow> with TickerProviderStateMixin {
     _opacityController.value = widget.visible ? 1.0 : 0.0;
     _orientationAnimation = new Tween<double>(
       begin: 0.0,
-      end: math.PI
+      end: math.PI,
     ).animate(new CurvedAnimation(
       parent: _orientationController = new AnimationController(
         duration: widget.duration,
@@ -776,9 +778,9 @@ class _SortArrowState extends State<_SortArrow> with TickerProviderStateMixin {
         child: new Icon(
           Icons.arrow_downward,
           size: _kArrowIconSize,
-          color: (Theme.of(context).brightness == Brightness.light) ? Colors.black87 : Colors.white70
-        )
-      )
+          color: (Theme.of(context).brightness == Brightness.light) ? Colors.black87 : Colors.white70,
+        ),
+      ),
     );
   }