Fast scrolling in the gallery tabs demo (#5016)

examples/flutter_gallery/lib/demo/tabs_demo.dart

@@ -4,19 +4,116 @@
 
 import 'package:flutter/material.dart';
 
+// Each TabBarView contains a _Page and for each _Page there is a list
+// of _CardData objects. Each _CardData object is displayed by a _CardItem.
+
 class _Page {
   _Page({ this.label });
-
   final GlobalKey<ScrollableState<Scrollable>> key = new GlobalKey<ScrollableState<Scrollable>>();
   final String label;
+  String get id => label[0];
+}
+
+class _CardData {
+  const _CardData({ this.title, this.imageAsset });
+  final String title;
+  final String imageAsset;
 }
 
-final List<_Page> _pages = <_Page>[
-  new _Page(label: 'ONE'),
-  new _Page(label: 'TWO'),
-  new _Page(label: 'FREE'),
-  new _Page(label: 'FOUR')
-];
+final Map<_Page, List<_CardData>> _allPages = <_Page, List<_CardData>>{
+  new _Page(label: 'LEFT'): <_CardData>[
+    const _CardData(
+      title: 'Vintage Bluetooth Radio',
+      imageAsset: 'packages/flutter_gallery_assets/shrine/products/radio.png'
+    ),
+    const _CardData(
+      title: 'Sunglasses',
+      imageAsset: 'packages/flutter_gallery_assets/shrine/products/sunnies.png'
+    ),
+    const _CardData(
+      title: 'Clock',
+      imageAsset: 'packages/flutter_gallery_assets/shrine/products/clock.png'
+    ),
+    const _CardData(
+      title: 'Red popsicle',
+      imageAsset: 'packages/flutter_gallery_assets/shrine/products/popsicle.png'
+    ),
+    const _CardData(
+      title: 'Folding Chair',
+      imageAsset: 'packages/flutter_gallery_assets/shrine/products/lawn_chair.png'
+    ),
+    const _CardData(
+      title: 'Green comfort chair',
+      imageAsset: 'packages/flutter_gallery_assets/shrine/products/chair.png'
+    ),
+  ],
+  new _Page(label: 'RIGHT'): <_CardData>[
+    const _CardData(
+      title: 'Beachball',
+      imageAsset: 'packages/flutter_gallery_assets/shrine/products/beachball.png'
+    ),
+    const _CardData(
+      title: 'Old Binoculars',
+      imageAsset: 'packages/flutter_gallery_assets/shrine/products/binoculars.png'
+    ),
+    const _CardData(
+      title: 'Teapot',
+      imageAsset: 'packages/flutter_gallery_assets/shrine/products/teapot.png'
+    ),
+    const _CardData(
+      title: 'Blue suede shoes',
+      imageAsset: 'packages/flutter_gallery_assets/shrine/products/chucks.png'
+    ),
+    const _CardData(
+      title: 'Dipped Brush',
+      imageAsset: 'packages/flutter_gallery_assets/shrine/products/brush.png'
+    ),
+    const _CardData(
+      title: 'Perfect Goldfish Bowl',
+      imageAsset: 'packages/flutter_gallery_assets/shrine/products/fish_bowl.png'
+    ),
+  ]
+};
+
+class _CardDataItem extends StatelessWidget {
+  _CardDataItem({ this.page, this.data });
+
+  static final double height = 272.0;
+  final _Page page;
+  final _CardData data;
+
+  @override
+  Widget build(BuildContext context) {
+    return new Card(
+      child: new Padding(
+        padding: const EdgeInsets.all(16.0),
+        child: new Column(
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          mainAxisAlignment: MainAxisAlignment.start,
+          children: <Widget>[
+            new Align(
+              alignment: page.id == 'L'
+                ? FractionalOffset.centerLeft
+                : FractionalOffset.centerRight,
+              child: new CircleAvatar(child: new Text('${page.id}'))
+            ),
+            new SizedBox(
+              width: 144.0,
+              height: 144.0,
+              child: new Image(
+                image: new AssetImage(data.imageAsset),
+                fit: ImageFit.contain
+              )
+            ),
+            new Center(
+              child: new Text(data.title, style: Theme.of(context).textTheme.title)
+            )
+          ]
+        )
+      )
+    );
+  }
+}
 
 class TabsDemo extends StatefulWidget {
   static const String routeName = '/tabs';
@@ -32,14 +129,14 @@ class TabsDemoState extends State<TabsDemo> {
   @override
   void initState() {
     super.initState();
-    _selectedPage = _pages[0];
+    _selectedPage = _allPages.keys.first;
   }
 
   @override
   Widget build(BuildContext context) {
     final double statusBarHeight = MediaQuery.of(context).padding.top;
     return new TabBarSelection<_Page>(
-      values: _pages,
+      values: _allPages.keys.toList(),
       onChanged: (_Page value) {
         setState(() {
           _selectedPage = value;
@@ -51,28 +148,24 @@ class TabsDemoState extends State<TabsDemo> {
         appBar: new AppBar(
           title: new Text('Tabs and scrolling'),
           bottom: new TabBar<_Page>(
-            labels: new Map<_Page, TabLabel>.fromIterable(_pages, value: (_Page page) {
+            labels: new Map<_Page, TabLabel>.fromIterable(_allPages.keys, value: (_Page page) {
               return new TabLabel(text: page.label);
             })
           )
         ),
         body: new TabBarView<_Page>(
-          children: _pages.map((_Page page) {
-            return new Block(
-              padding: new EdgeInsets.only(top: kTextTabBarHeight + kToolBarHeight + statusBarHeight),
-              scrollableKey: page.key,
-              onScroll: (double value) { _scrollOffset = value; },
-              children: new List<Widget>.generate(6, (int i) {
-                return new Container(
-                  padding: const EdgeInsets.all(8.0),
-                  height: 192.0,
-                  child: new Card(
-                    child: new Center(
-                      child: new Text('Tab ${page.label}, item $i')
-                    )
-                  )
-                );
-              })
+          children: _allPages.keys.map((_Page page) {
+            return new Padding(
+              padding: const EdgeInsets.all(16.0),
+              child: new ScrollableList(
+                padding: new EdgeInsets.only(top: kTextTabBarHeight + kToolBarHeight + statusBarHeight),
+                itemExtent: _CardDataItem.height,
+                scrollableKey: page.key,
+                onScroll: (double value) { _scrollOffset = value; },
+                children: _allPages[page].map((_CardData data) {
+                  return new _CardDataItem(page: page, data: data);
+                }).toList()
+              )
             );
           }).toList()
         )