page_view.dart 3.98 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';
13
  Key get key => ObjectKey(this);
14 15
}

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

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

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

39
  static const TextStyle cardLabelStyle =
40
    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 = Card(
49
      color: cardModel.color,
50
      child: Container(
51 52
        width: cardModel.size.width,
        height: cardModel.size.height,
53
        padding: const EdgeInsets.all(8.0),
54
        child: Center(child: Text(cardModel.label, style: cardLabelStyle)),
55
      ),
56
    );
57

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

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

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

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

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

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