Skip to content

Instantly share code, notes, and snippets.

@arthurdenner
Last active February 27, 2020 18:23
Show Gist options
  • Save arthurdenner/1780d3594a06eb06b94474d45c23301a to your computer and use it in GitHub Desktop.
Save arthurdenner/1780d3594a06eb06b94474d45c23301a to your computer and use it in GitHub Desktop.
Custom version of expansion_tile_sample example from Flutter repo
// Copyright 2014 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'dart:math';
import 'package:flutter/material.dart';
class ExpansionTileSample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('ExpansionTile'),
),
body: ListView.builder(
itemBuilder: (BuildContext context, int index) => EntryItem(data[index]),
itemCount: data.length,
),
),
);
}
}
// One entry in the multilevel list displayed by this app.
class Entry {
Entry(this.title, [this.children = const <Entry>[]]);
final String title;
final List<Entry> children;
}
// The entire multilevel list displayed by this app.
final List<Entry> data = <Entry>[
Entry('Chapter A',
<Entry>[
Entry('Section A0',
<Entry>[
Entry('Item A0.1'),
Entry('Item A0.2'),
Entry('Item A0.3'),
],
),
Entry('Section A1'),
Entry('Section A2'),
],
),
Entry('Chapter B',
<Entry>[
Entry('Section B0'),
Entry('Section B1'),
],
),
Entry('Chapter C',
<Entry>[
Entry('Section C0'),
Entry('Section C1'),
Entry('Section C2',
<Entry>[
Entry('Item C2.0'),
Entry('Item C2.1'),
Entry('Item C2.2'),
Entry('Item C2.3'),
],
),
],
),
];
// Displays one Entry. If the entry has children then it's displayed
// with an ExpansionTile.
class EntryItem extends StatefulWidget {
const EntryItem(this.entry);
final Entry entry;
@override
_EntryItemState createState() => _EntryItemState();
}
class _EntryItemState extends State<EntryItem> {
Color _collapsedHeaderColor = Colors.orange;
Color _expandedHeaderColor = Colors.pink;
List<Color> colors = <Color>[Colors.red, Colors.green, Colors.yellow, Colors.brown, Colors.cyan, Colors.lime];
Random random = Random();
Widget _buildTiles(Entry root) {
if (root.children.isEmpty)
return ListTile(title: Text(root.title));
return ExpansionTile(
key: PageStorageKey<Entry>(root),
title: Text(root.title),
children: root.children.map<Widget>(_buildTiles).toList(),
headerColorTween: ColorTween(
begin: _collapsedHeaderColor,
end: _expandedHeaderColor,
),
);
}
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
FlatButton(
child: const Text('Click me'),
onPressed: () {
setState(() {
_collapsedHeaderColor = colors[random.nextInt(colors.length)];
_expandedHeaderColor = colors[random.nextInt(colors.length)];
});
},
),
_buildTiles(widget.entry),
],
);
}
}
void main() {
runApp(ExpansionTileSample());
}
/*
Sample Catalog
Title: ExpansionTile
Summary: An ExpansionTile for building nested lists, with two or more levels.
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.
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.
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>
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment