pageable_list.dart 4.46 KB
Newer Older
1 2 3 4
// 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.

5 6
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
7 8 9 10 11 12 13

class CardModel {
  CardModel(this.value, this.size, this.color);
  int value;
  Size size;
  Color color;
  String get label => "Card $value";
Hixie's avatar
Hixie committed
14
  Key get key => new ObjectKey(this);
15 16
}

17
class PageableListApp extends StatefulComponent {
18
  PageableListAppState createState() => new PageableListAppState();
19
}
20

21
class PageableListAppState extends State<PageableListApp> {
22 23
  void initState() {
    super.initState();
24 25 26 27 28 29
    List<Size> cardSizes = [
      [100.0, 300.0], [300.0, 100.0], [200.0, 400.0], [400.0, 400.0], [300.0, 400.0]
    ]
    .map((args) => new Size(args[0], args[1]))
    .toList();

Hixie's avatar
Hixie committed
30
    cardModels = new List<CardModel>.generate(cardSizes.length, (int i) {
31
      Color color = Color.lerp(Colors.red[300], Colors.blue[900], i / cardSizes.length);
32 33 34 35
      return new CardModel(i, cardSizes[i], color);
    });
  }

36 37 38 39 40 41 42 43
  static const TextStyle cardLabelStyle =
    const TextStyle(color: Colors.white, fontSize: 18.0, fontWeight: bold);

  List<CardModel> cardModels;
  Size pageSize = new Size(200.0, 200.0);
  ScrollDirection scrollDirection = ScrollDirection.horizontal;
  bool itemsWrap = false;

44 45 46 47 48 49
  void updatePageSize(Size newSize) {
    setState(() {
      pageSize = newSize;
    });
  }

50
  Widget buildCard(BuildContext context, CardModel cardModel, int index) {
51 52 53 54 55 56 57 58 59
    Widget card = new Card(
      color: cardModel.color,
      child: new Container(
        width: cardModel.size.width,
        height: cardModel.size.height,
        padding: const EdgeDims.all(8.0),
        child: new Center(child: new Text(cardModel.label, style: cardLabelStyle))
      )
    );
60 61 62 63 64

    BoxConstraints constraints = (scrollDirection == ScrollDirection.vertical)
      ? new BoxConstraints.tightFor(height: pageSize.height)
      : new BoxConstraints.tightFor(width: pageSize.width);

65 66
    return new Container(
      key: cardModel.key,
67
      constraints: constraints,
68 69 70 71
      child: new Center(child: card)
    );
  }

72
  void switchScrollDirection() {
73 74 75 76 77
    setState(() {
      scrollDirection = (scrollDirection == ScrollDirection.vertical)
        ? ScrollDirection.horizontal
        : ScrollDirection.vertical;
    });
78 79 80 81 82 83
  }

  void toggleItemsWrap() {
    setState(() {
      itemsWrap = !itemsWrap;
    });
84 85
  }

86 87
  Widget _buildDrawer() {
    return new Drawer(
Hixie's avatar
Hixie committed
88
      child: new Block(<Widget>[
89 90 91 92 93 94 95 96 97 98 99 100
        new DrawerHeader(child: new Text('Options')),
        new DrawerItem(
          icon: 'navigation/more_horiz',
          selected: scrollDirection == ScrollDirection.horizontal,
          child: new Text('Horizontal Layout'),
          onPressed: switchScrollDirection
        ),
        new DrawerItem(
          icon: 'navigation/more_vert',
          selected: scrollDirection == ScrollDirection.vertical,
          child: new Text('Vertical Layout'),
          onPressed: switchScrollDirection
101 102 103
        ),
        new DrawerItem(
          onPressed: toggleItemsWrap,
Hixie's avatar
Hixie committed
104
          child: new Row(<Widget>[
105 106 107
            new Flexible(child: new Text('Scrolling wraps around')),
            new Checkbox(value: itemsWrap)
          ])
108
        )
109
      ])
110 111 112
    );
  }

113
  Widget _buildToolBar() {
114 115
    return new ToolBar(
      center: new Text('PageableList'),
Hixie's avatar
Hixie committed
116
      right: <Widget>[
117 118 119 120 121
        new Text(scrollDirection == ScrollDirection.horizontal ? "horizontal" : "vertical")
      ]
    );
  }

122
  Widget _buildBody(BuildContext context) {
123 124
    Widget list = new PageableList<CardModel>(
      items: cardModels,
125
      itemsWrap: itemsWrap,
126
      itemBuilder: buildCard,
127 128 129 130
      scrollDirection: scrollDirection,
      itemExtent: (scrollDirection == ScrollDirection.vertical)
          ? pageSize.height
          : pageSize.width
131
    );
132
    return new SizeObserver(
133
      onSizeChanged: updatePageSize,
134
      child: list
135 136
    );
  }
137

138
  Widget build(BuildContext context) {
139 140
    return new IconTheme(
      data: const IconThemeData(color: IconThemeColor.white),
141
      child: new Scaffold(
142 143 144
        toolBar: _buildToolBar(),
        drawer: _buildDrawer(),
        body: _buildBody(context)
145 146 147 148 149 150
      )
    );
  }
}

void main() {
Adam Barth's avatar
Adam Barth committed
151
  runApp(new MaterialApp(
152 153 154 155 156 157
    title: 'PageableList',
    theme: new ThemeData(
      brightness: ThemeBrightness.light,
      primarySwatch: Colors.blue,
      accentColor: Colors.redAccent[200]
    ),
Hixie's avatar
Hixie committed
158
    routes: <String, RouteBuilder>{
Adam Barth's avatar
Adam Barth committed
159
      '/': (RouteArguments args) => new PageableListApp(),
160 161
    }
  ));
162
}