TabBar RTL (#13164)

examples/flutter_gallery/lib/demo/material/scrollable_tabs_demo.dart

@@ -11,18 +11,26 @@ enum TabsDemoStyle {
 }
 
 class _Page {
-  _Page({ this.icon, this.text });
+  const _Page({ this.icon, this.text });
   final IconData icon;
   final String text;
 }
 
-final List<_Page> _allPages = <_Page>[
-  new _Page(icon: Icons.event, text: 'EVENT'),
-  new _Page(icon: Icons.home, text: 'HOME'),
-  new _Page(icon: Icons.android, text: 'ANDROID'),
-  new _Page(icon: Icons.alarm, text: 'ALARM'),
-  new _Page(icon: Icons.face, text: 'FACE'),
-  new _Page(icon: Icons.language, text: 'LANGUAGE'),
+const List<_Page> _allPages = const <_Page>[
+  const _Page(icon: Icons.grade, text: 'TRIUMPH'),
+  const _Page(icon: Icons.playlist_add, text: 'NOTE'),
+  const _Page(icon: Icons.check_circle, text: 'SUCCESS'),
+  const _Page(icon: Icons.question_answer, text: 'OVERSTATE'),
+  const _Page(icon: Icons.sentiment_very_satisfied, text: 'SATISFACTION'),
+  const _Page(icon: Icons.camera, text: 'APERTURE'),
+  const _Page(icon: Icons.assignment_late, text: 'WE MUST'),
+  const _Page(icon: Icons.assignment_turned_in, text: 'WE CAN'),
+  const _Page(icon: Icons.group, text: 'ALL'),
+  const _Page(icon: Icons.block, text: 'EXCEPT'),
+  const _Page(icon: Icons.sentiment_very_dissatisfied, text: 'CRYING'),
+  const _Page(icon: Icons.error, text: 'MISTAKE'),
+  const _Page(icon: Icons.loop, text: 'TRYING'),
+  const _Page(icon: Icons.cake, text: 'CAKE'),
 ];
 
 class ScrollableTabsDemo extends StatefulWidget {

packages/flutter/lib/src/widgets/scrollable.dart

@@ -440,8 +440,10 @@ class ScrollableState extends State<Scrollable> with TickerProviderStateMixin
   }
 
   void _handleDragStart(DragStartDetails details) {
+    // It's possible for _hold to become null between _handleDragDown and
+    // _handleDragStart, for example if some user code calls jumpTo or otherwise
+    // triggers a new activity to begin.
     assert(_drag == null);
-    assert(_hold != null);
     _drag = position.drag(details, _disposeDrag);
     assert(_drag != null);
     assert(_hold == null);

packages/flutter/test/material/tabs_test.dart

@@ -14,9 +14,9 @@ import '../rendering/mock_canvas.dart';
 import '../rendering/recording_canvas.dart';
 import '../widgets/semantics_tester.dart';
 
-Widget boilerplate({ Widget child }) {
+Widget boilerplate({ Widget child, TextDirection textDirection: TextDirection.ltr }) {
   return new Directionality(
-    textDirection: TextDirection.ltr,
+    textDirection: textDirection,
     child: new Material(
       child: child,
     ),
@@ -918,7 +918,71 @@ void main() {
     expect(tester.getTopRight(find.widgetWithText(Tab, 'TAB #19')).dx, 800.0);
   });
 
-  testWidgets('TabBar with indicatorWeight, indicatorPadding', (WidgetTester tester) async {
+  testWidgets('TabBar with indicatorWeight, indicatorPadding (LTR)', (WidgetTester tester) async {
+    const Color color = const Color(0xFF00FF00);
+    const double height = 100.0;
+    const double weight = 8.0;
+    const double padLeft = 8.0;
+    const double padRight = 4.0;
+
+    final List<Widget> tabs = new List<Widget>.generate(4, (int index) {
+      return new Container(
+        key: new ValueKey<int>(index),
+        height: height,
+      );
+    });
+
+    final TabController controller = new TabController(
+      vsync: const TestVSync(),
+      length: tabs.length,
+    );
+
+    await tester.pumpWidget(
+      boilerplate(
+        child: new Column(
+          children: <Widget>[
+            new TabBar(
+              indicatorWeight: 8.0,
+              indicatorColor: color,
+              indicatorPadding: const EdgeInsets.only(left: padLeft, right: padRight),
+              controller: controller,
+              tabs: tabs,
+            ),
+            new Flexible(child: new Container()),
+          ],
+        ),
+      ),
+    );
+
+    final RenderBox tabBarBox = tester.firstRenderObject<RenderBox>(find.byType(TabBar));
+
+    // Selected tab dimensions
+    double tabWidth = tester.getSize(find.byKey(const ValueKey<int>(0))).width;
+    double tabLeft = tester.getTopLeft(find.byKey(const ValueKey<int>(0))).dx;
+    double tabRight = tabLeft + tabWidth;
+
+    expect(tabBarBox, paints..rect(
+      style: PaintingStyle.fill,
+      color: color,
+      rect: new Rect.fromLTRB(tabLeft + padLeft, height, tabRight - padRight, height + weight)
+    ));
+
+    // Select tab 3
+    controller.index = 3;
+    await tester.pumpAndSettle();
+
+    tabWidth = tester.getSize(find.byKey(const ValueKey<int>(3))).width;
+    tabLeft = tester.getTopLeft(find.byKey(const ValueKey<int>(3))).dx;
+    tabRight = tabLeft + tabWidth;
+
+    expect(tabBarBox, paints..rect(
+      style: PaintingStyle.fill,
+      color: color,
+      rect: new Rect.fromLTRB(tabLeft + padLeft, height, tabRight - padRight, height + weight)
+    ));
+  });
+
+  testWidgets('TabBar with indicatorWeight, indicatorPadding (RTL)', (WidgetTester tester) async {
     const Color color = const Color(0xFF00FF00);
     const double height = 100.0;
     const double weight = 8.0;
@@ -939,6 +1003,7 @@ void main() {
 
     await tester.pumpWidget(
       boilerplate(
+        textDirection: TextDirection.rtl,
         child: new Column(
           children: <Widget>[
             new TabBar(
@@ -982,6 +1047,131 @@ void main() {
     ));
   });
 
+  testWidgets('TabBar with directional indicatorPadding (LTR)', (WidgetTester tester) async {
+    final List<Widget> tabs = <Widget>[
+      new SizedBox(key: new UniqueKey(), width: 130.0, height: 30.0),
+      new SizedBox(key: new UniqueKey(), width: 140.0, height: 40.0),
+      new SizedBox(key: new UniqueKey(), width: 150.0, height: 50.0),
+    ];
+
+    final TabController controller = new TabController(
+      vsync: const TestVSync(),
+      length: tabs.length,
+    );
+
+    await tester.pumpWidget(
+      boilerplate(
+        child: new Center(
+          child: new SizedBox(
+            width: 800.0,
+            child: new TabBar(
+              indicatorPadding: const EdgeInsetsDirectional.only(start: 100.0),
+              isScrollable: true,
+              controller: controller,
+              tabs: tabs,
+            ),
+          ),
+        ),
+      ),
+    );
+
+    expect(tester.getRect(find.byKey(tabs[0].key)), new Rect.fromLTRB(0.0, 284.0, 130.0, 314.0));
+    expect(tester.getRect(find.byKey(tabs[1].key)), new Rect.fromLTRB(130.0, 279.0, 270.0, 319.0));
+    expect(tester.getRect(find.byKey(tabs[2].key)), new Rect.fromLTRB(270.0, 274.0, 420.0, 324.0));
+
+    expect(tester.firstRenderObject<RenderBox>(find.byType(TabBar)), paints..rect(
+      style: PaintingStyle.fill,
+      rect: new Rect.fromLTRB(100.0, 50.0, 130.0, 52.0),
+    ));
+  });
+
+  testWidgets('TabBar with directional indicatorPadding (RTL)', (WidgetTester tester) async {
+    final List<Widget> tabs = <Widget>[
+      new SizedBox(key: new UniqueKey(), width: 130.0, height: 30.0),
+      new SizedBox(key: new UniqueKey(), width: 140.0, height: 40.0),
+      new SizedBox(key: new UniqueKey(), width: 150.0, height: 50.0),
+    ];
+
+    final TabController controller = new TabController(
+      vsync: const TestVSync(),
+      length: tabs.length,
+    );
+
+    await tester.pumpWidget(
+      boilerplate(
+        textDirection: TextDirection.rtl,
+        child: new Center(
+          child: new SizedBox(
+            width: 800.0,
+            child: new TabBar(
+              indicatorPadding: const EdgeInsetsDirectional.only(start: 100.0),
+              isScrollable: true,
+              controller: controller,
+              tabs: tabs,
+            ),
+          ),
+        ),
+      ),
+    );
+
+    expect(tester.getRect(find.byKey(tabs[0].key)), new Rect.fromLTRB(670.0, 284.0, 800.0, 314.0));
+    expect(tester.getRect(find.byKey(tabs[1].key)), new Rect.fromLTRB(530.0, 279.0, 670.0, 319.0));
+    expect(tester.getRect(find.byKey(tabs[2].key)), new Rect.fromLTRB(380.0, 274.0, 530.0, 324.0));
+
+    final RenderBox tabBar = tester.renderObject<RenderBox>(find.byType(CustomPaint).at(1));
+
+    expect(tabBar.size, const Size(420.0, 52.0));
+    expect(tabBar, paints..rect(
+      style: PaintingStyle.fill,
+      rect: new Rect.fromLTRB(tabBar.size.width - 130.0, 50.0, tabBar.size.width - 100.0, 52.0),
+    ));
+  });
+
+  testWidgets('Overflowing RTL tab bar', (WidgetTester tester) async {
+    final List<Widget> tabs = new List<Widget>.filled(100,
+      new SizedBox(key: new UniqueKey(), width: 30.0, height: 20.0),
+    );
+
+    final TabController controller = new TabController(
+      vsync: const TestVSync(),
+      length: tabs.length,
+    );
+
+    await tester.pumpWidget(
+      boilerplate(
+        textDirection: TextDirection.rtl,
+        child: new Center(
+          child: new TabBar(
+            isScrollable: true,
+            controller: controller,
+            tabs: tabs,
+          ),
+        ),
+      ),
+    );
+
+    expect(tester.firstRenderObject<RenderBox>(find.byType(TabBar)), paints..rect(
+      style: PaintingStyle.fill,
+      rect: new Rect.fromLTRB(2970.0, 20.0, 3000.0, 22.0),
+    ));
+
+    controller.animateTo(tabs.length - 1, duration: const Duration(seconds: 1), curve: Curves.linear);
+    await tester.pump();
+    await tester.pump(const Duration(milliseconds: 500));
+
+    expect(tester.firstRenderObject<RenderBox>(find.byType(TabBar)), paints..rect(
+      style: PaintingStyle.fill,
+      rect: new Rect.fromLTRB(742.5, 20.0, 772.5, 22.0), // (these values were derived empirically, not analytically)
+    ));
+
+    await tester.pump(const Duration(milliseconds: 501));
+
+    expect(tester.firstRenderObject<RenderBox>(find.byType(TabBar)), paints..rect(
+      style: PaintingStyle.fill,
+      rect: new Rect.fromLTRB(0.0, 20.0, 30.0, 22.0),
+    ));
+  });
+
   testWidgets('correct semantics', (WidgetTester tester) async {
     final SemanticsTester semantics = new SemanticsTester(tester);