expansion_tile_sample.dart 2.93 KB
Newer Older
Ian Hickson's avatar
Ian Hickson committed
1
// Copyright 2014 The Flutter Authors. All rights reserved.
2 3 4 5 6
// 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';

7 8 9
class ExpansionTileSample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
10 11 12
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
13 14
          title: const Text('ExpansionTile'),
        ),
15 16
        body: ListView.builder(
          itemBuilder: (BuildContext context, int index) => EntryItem(data[index]),
17 18 19 20 21 22 23 24
          itemCount: data.length,
        ),
      ),
    );
  }
}

// One entry in the multilevel list displayed by this app.
25 26 27 28 29 30
class Entry {
  Entry(this.title, [this.children = const <Entry>[]]);
  final String title;
  final List<Entry> children;
}

31
// The entire multilevel list displayed by this app.
32
final List<Entry> data = <Entry>[
33
  Entry('Chapter A',
34
    <Entry>[
35
      Entry('Section A0',
36
        <Entry>[
37 38 39
          Entry('Item A0.1'),
          Entry('Item A0.2'),
          Entry('Item A0.3'),
40 41
        ],
      ),
42 43
      Entry('Section A1'),
      Entry('Section A2'),
44 45
    ],
  ),
46
  Entry('Chapter B',
47
    <Entry>[
48 49
      Entry('Section B0'),
      Entry('Section B1'),
50 51
    ],
  ),
52
  Entry('Chapter C',
53
    <Entry>[
54 55 56
      Entry('Section C0'),
      Entry('Section C1'),
      Entry('Section C2',
57
        <Entry>[
58 59 60 61
          Entry('Item C2.0'),
          Entry('Item C2.1'),
          Entry('Item C2.2'),
          Entry('Item C2.3'),
62 63 64 65 66 67
        ],
      ),
    ],
  ),
];

68 69
// Displays one Entry. If the entry has children then it's displayed
// with an ExpansionTile.
70
class EntryItem extends StatelessWidget {
71
  const EntryItem(this.entry);
72 73 74 75 76

  final Entry entry;

  Widget _buildTiles(Entry root) {
    if (root.children.isEmpty)
77 78 79 80
      return ListTile(title: Text(root.title));
    return ExpansionTile(
      key: PageStorageKey<Entry>(root),
      title: Text(root.title),
81
      children: root.children.map<Widget>(_buildTiles).toList(),
82 83 84 85 86 87 88 89 90 91
    );
  }

  @override
  Widget build(BuildContext context) {
    return _buildTiles(entry);
  }
}

void main() {
92
  runApp(ExpansionTileSample());
93
}
94 95 96 97 98 99

/*
Sample Catalog

Title: ExpansionTile

100
Summary: An ExpansionTile for building nested lists, with two or more levels.
101 102 103 104 105 106 107

Description:
This app displays hierarchical data with ExpansionTiles. Tapping a tile
expands or collapses the view of its children. When a tile is collapsed
its children are disposed so that the widget footprint of the list only
reflects what's visible.

108 109 110 111 112 113
When displayed within a scrollable that creates its list items lazily,
like a scrollable list created with `ListView.builder()`, ExpansionTiles
can be quite efficient, particularly for material design "expand/collapse"
lists.


114 115 116 117 118 119 120 121
Classes: ExpansionTile, ListView

Sample: ExpansionTileSample

See also:
  - The "expand/collapse" part of the material design specification:
    <https://material.io/guidelines/components/lists-controls.html#lists-controls-types-of-list-controls>
*/