examples/material_gallery/lib/gallery/section.dart

// Copyright 2016 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';
import 'package:flutter/widgets.dart';

import 'demo.dart';

class GallerySection extends StatelessComponent {
  GallerySection({ this.title, this.image, this.colors, this.demos });

  final String title;
  final String image;
  final Map<int, Color> colors;
  final List<GalleryDemo> demos;

  void showDemo(GalleryDemo demo, BuildContext context, ThemeData theme) {
    Navigator.push(context, new MaterialPageRoute(
      builder: (BuildContext context) {
        Widget child = (demo.builder == null) ? null : demo.builder();
        return new Theme(data: theme, child: child);
      }
    ));
  }

  void showDemos(BuildContext context) {
    final ThemeData theme = new ThemeData(
      brightness: Theme.of(context).brightness,
      primarySwatch: colors
    );
    final double appBarHeight = 200.0;
    final Key scrollableKey = new ValueKey<String>(title); // assume section titles differ
    Navigator.push(context, new MaterialPageRoute(
      builder: (BuildContext context) {
        return new Theme(
          data: theme,
          child: new Scaffold(
            appBarHeight: appBarHeight,
            appBarBehavior: AppBarBehavior.scroll,
            scrollableKey: scrollableKey,
            toolBar: new ToolBar(
              flexibleSpace: (BuildContext context) => new FlexibleSpaceBar(title: new Text(title))
            ),
            body: new Material(
              child: new MaterialList(
                scrollableKey: scrollableKey,
                scrollablePadding: new EdgeDims.only(top: appBarHeight),
                type: MaterialListType.oneLine,
                children: (demos ?? const <GalleryDemo>[]).map((GalleryDemo demo) {
                  return new ListItem(
                    center: new Text(demo.title, style: theme.text.subhead),
                    onTap: () { showDemo(demo, context, theme); }
                  );
                })
              )
            )
          )
        );
      }
    ));
  }

  Widget build (BuildContext context) {
    final ThemeData theme = new ThemeData(
      brightness: Theme.of(context).brightness,
      primarySwatch: colors
    );
    final TextStyle titleTextStyle = theme.text.title.copyWith(
      color: theme.brightness == ThemeBrightness.dark ?  Colors.black : Colors.white
    );
    return new Flexible(
      child: new GestureDetector(
        behavior: HitTestBehavior.opaque,
        onTap: () { showDemos(context); },
        child: new Container(
          height: 256.0,
          margin: const EdgeDims.all(4.0),
          decoration: new BoxDecoration(backgroundColor: theme.primaryColor),
          child: new Column(
            children: <Widget>[
              new Flexible(
                child: new Padding(
                  padding: const EdgeDims.symmetric(horizontal: 12.0),
                  child: new AssetImage(
                    name: image,
                    alignment: const FractionalOffset(0.5, 0.5),
                    fit: ImageFit.contain
                  )
                )
              ),
              new Padding(
                padding: const EdgeDims.all(16.0),
                child: new Align(
                  alignment: const FractionalOffset(0.0, 1.0),
                  child: new Text(title, style: titleTextStyle)
                )
              )
            ]
          )
        )
      )
    );
  }
}