examples/flutter_gallery/lib/demo/tabs_demo.dart

// Copyright 2015 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

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> scrollableKey = new GlobalKey<ScrollableState>();
  final String label;
  String get id => label[0];
}

class _CardData {
  const _CardData({ this.title, this.imageAsset });
  final String title;
  final String imageAsset;
}

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.asset(data.imageAsset, fit: ImageFit.contain)
            ),
            new Center(
              child: new Text(data.title, style: Theme.of(context).textTheme.title)
            )
          ]
        )
      )
    );
  }
}

class TabsDemo extends StatefulWidget {
  TabsDemo({ Key key }) : super(key: key);

  static const String routeName = '/tabs';

  @override
  _TabsDemoState createState() => new _TabsDemoState();
}

class _TabsDemoState extends State<TabsDemo> {
  _Page _selectedPage;

  @override
  void initState() {
    super.initState();
    _selectedPage = _allPages.keys.first;
  }

  @override
  Widget build(BuildContext context) {
    return new TabBarSelection<_Page>(
      values: _allPages.keys.toList(),
      onChanged: (_Page value) {
        setState(() {
          _selectedPage = value;
       });
      },
      child: new Scaffold(
        scrollableKey: _selectedPage.scrollableKey,
        appBar: new AppBar(
          title: new Text('Tabs and scrolling'),
          bottom: new TabBar<_Page>(
            labels: new Map<_Page, TabLabel>.fromIterable(_allPages.keys, value: (_Page page) {
              return new TabLabel(text: page.label);
            })
          )
        ),
        body: new TabBarView<_Page>(
          children: _allPages.keys.map((_Page page) {
            return new ScrollableList(
              scrollableKey: page.scrollableKey,
              padding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0),
              itemExtent: _CardDataItem.height,
              children: _allPages[page].map((_CardData data) {
                return new Padding(
                  padding: const EdgeInsets.symmetric(vertical: 8.0),
                  child: new _CardDataItem(page: page, data: data)
                );
              }).toList()
            );
          }).toList()
        )
      )
    );
  }
}