page_view.dart 4.12 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
import 'package:flutter/material.dart';
6 7 8 9 10 11

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

16
class PageViewApp extends StatefulWidget {
17
  @override
18
  PageViewAppState createState() => new PageViewAppState();
19
}
20

21
class PageViewAppState extends State<PageViewApp> {
22
  @override
23 24
  void initState() {
    super.initState();
25 26 27 28 29 30 31
    const List<Size> cardSizes = const <Size>[
      const Size(100.0, 300.0),
      const Size(300.0, 100.0),
      const Size(200.0, 400.0),
      const Size(400.0, 400.0),
      const Size(300.0, 400.0),
    ];
32

Hixie's avatar
Hixie committed
33
    cardModels = new List<CardModel>.generate(cardSizes.length, (int i) {
34
      final Color color = Color.lerp(Colors.red.shade300, Colors.blue.shade900, i / cardSizes.length);
35 36 37 38
      return new CardModel(i, cardSizes[i], color);
    });
  }

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

  List<CardModel> cardModels;
43
  Size pageSize = const Size(200.0, 200.0);
44
  Axis scrollDirection = Axis.horizontal;
45 46
  bool itemsWrap = false;

47
  Widget buildCard(CardModel cardModel) {
48
    final Widget card = new Card(
49 50 51 52
      color: cardModel.color,
      child: new Container(
        width: cardModel.size.width,
        height: cardModel.size.height,
53
        padding: const EdgeInsets.all(8.0),
54 55
        child: new Center(child: new Text(cardModel.label, style: cardLabelStyle)),
      ),
56
    );
57

58
    final BoxConstraints constraints = (scrollDirection == Axis.vertical)
59 60 61
      ? new BoxConstraints.tightFor(height: pageSize.height)
      : new BoxConstraints.tightFor(width: pageSize.width);

62 63
    return new Container(
      key: cardModel.key,
64
      constraints: constraints,
65
      child: new Center(child: card),
66 67 68
    );
  }

69
  void switchScrollDirection() {
70
    setState(() {
71 72 73
      scrollDirection = (scrollDirection == Axis.vertical)
        ? Axis.horizontal
        : Axis.vertical;
74
    });
75 76 77 78 79 80
  }

  void toggleItemsWrap() {
    setState(() {
      itemsWrap = !itemsWrap;
    });
81 82
  }

83 84
  Widget _buildDrawer() {
    return new Drawer(
85
      child: new ListView(
86
        children: <Widget>[
87
          const DrawerHeader(child: const Center(child: const Text('Options'))),
88
          new ListTile(
89
            leading: const Icon(Icons.more_horiz),
90
            selected: scrollDirection == Axis.horizontal,
91
            trailing: const Text('Horizontal Layout'),
92
            onTap: switchScrollDirection,
93
          ),
94
          new ListTile(
95
            leading: const Icon(Icons.more_vert),
96
            selected: scrollDirection == Axis.vertical,
97
            trailing: const Text('Vertical Layout'),
98
            onTap: switchScrollDirection,
99
          ),
100 101
          new ListTile(
            onTap: toggleItemsWrap,
102
            title: const Text('Scrolling wraps around'),
103 104
            // TODO(abarth): Actually make this checkbox change this value.
            trailing: new Checkbox(value: itemsWrap, onChanged: null),
105 106 107
          ),
        ],
      ),
108 109 110
    );
  }

111 112
  Widget _buildAppBar() {
    return new AppBar(
113
      title: const Text('PageView'),
114
      actions: <Widget>[
115
        new Text(scrollDirection == Axis.horizontal ? 'horizontal' : 'vertical'),
116
      ],
117 118 119
    );
  }

120
  Widget _buildBody(BuildContext context) {
Adam Barth's avatar
Adam Barth committed
121 122 123
    return new PageView(
      children: cardModels.map(buildCard).toList(),
      // TODO(abarth): itemsWrap: itemsWrap,
124
      scrollDirection: scrollDirection,
125 126
    );
  }
127

128
  @override
129
  Widget build(BuildContext context) {
130
    return new IconTheme(
Adam Barth's avatar
Adam Barth committed
131
      data: const IconThemeData(color: Colors.white),
132
      child: new Scaffold(
133
        appBar: _buildAppBar(),
134
        drawer: _buildDrawer(),
135 136
        body: _buildBody(context),
      ),
137 138 139 140 141
    );
  }
}

void main() {
Adam Barth's avatar
Adam Barth committed
142
  runApp(new MaterialApp(
143
    title: 'PageView',
144
    theme: new ThemeData(
145
      brightness: Brightness.light,
146
      primarySwatch: Colors.blue,
147
      accentColor: Colors.redAccent,
148
    ),
149
    home: new PageViewApp(),
150
  ));
151
}