page_view.dart 3.92 KB
Newer Older
Ian Hickson's avatar
Ian Hickson committed
1
// Copyright 2014 The Flutter Authors. All rights reserved.
2 3 4
// 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
  const PageViewApp({super.key});
18

19
  @override
20
  PageViewAppState createState() => PageViewAppState();
21
}
22

23
class PageViewAppState extends State<PageViewApp> {
24
  @override
25 26
  void initState() {
    super.initState();
27 28 29 30 31 32
    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),
33
    ];
34

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

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

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

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

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

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

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

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

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

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

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

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

143
void main() {
144 145 146 147
  runApp(
    const MaterialApp(
      title: 'PageView',
      home: PageViewApp(),
148
    ),
149
  );
150
}