Skip to content

Commit

Permalink
RTL support for DataTable (flutter#12229)
Browse files Browse the repository at this point in the history 
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 flutter#11845
  • Loading branch information
@abarth
abarth committed Sep 24, 2017
1 parent 78a2926 commit 260353f
Showing 1 changed file with 42 additions and 40 deletions.
82 changes: 42 additions & 40 deletions packages/flutter/lib/src/material/data_table.dart
View file
Expand Up @@ -36,7 +36,7 @@ class DataColumn {
@required this.label,
this.tooltip,
this.numeric: false,
this.onSort
this.onSort,
}) : assert(label != null);

/// The column heading.
Expand Down Expand Up @@ -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
Expand All @@ -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);

Expand Down Expand Up @@ -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)),
Expand Down Expand Up @@ -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,
);
}

Expand All @@ -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(
Expand All @@ -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;
Expand All @@ -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,
Expand All @@ -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;
Expand All @@ -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);
Expand All @@ -516,7 +518,7 @@ class DataTable extends StatelessWidget {
: _kUnselectedDecoration,
children: new List<Widget>(tableColumns.length)
);
}
},
);

int rowIndex;
Expand All @@ -527,15 +529,15 @@ 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) {
tableRows[rowIndex].children[0] = _buildCheckbox(
color: theme.accentColor,
checked: row.selected,
onRowTap: () => row.onSelectChanged(!row.selected),
onCheckboxChanged: row.onSelectChanged
onCheckboxChanged: row.onSelectChanged,
);
rowIndex += 1;
}
Expand All @@ -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) {
Expand All @@ -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;
}
Expand Down Expand Up @@ -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,
Expand All @@ -618,7 +620,7 @@ class TableRowInkWell extends InkResponse {
onLongPress: onLongPress,
onHighlightChanged: onHighlightChanged,
containedInkWell: true,
highlightShape: BoxShape.rectangle
highlightShape: BoxShape.rectangle,
);

@override
Expand Down Expand Up @@ -661,7 +663,7 @@ class _SortArrow extends StatefulWidget {
Key key,
this.visible,
this.down,
this.duration
this.duration,
}) : super(key: key);

final bool visible;
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
),
),
);
}

Expand Down

0 comments on commit 260353f

Please sign in to comment.