mirror of
https://github.com/DungeonPaper/dungeon-paper-app.git
synced 2026-05-17 17:58:11 +00:00
486 lines
17 KiB
Dart
486 lines
17 KiB
Dart
// 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 'package:dungeon_paper/app/themes/themes.dart';
|
|
import 'package:dungeon_paper/app/widgets/atoms/custom_list_tile.dart';
|
|
import 'package:dungeon_paper/core/platform_helper.dart';
|
|
import 'package:dungeon_paper/core/utils/math_utils.dart';
|
|
import 'package:flutter/material.dart';
|
|
|
|
const Duration _kExpand = Duration(milliseconds: 200);
|
|
|
|
/// A single-line [ListTile] with an expansion arrow icon that expands or collapses
|
|
/// the tile to reveal or hide the [children].
|
|
///
|
|
/// This widget is typically used with [ListView] to create an
|
|
/// "expand / collapse" list entry. When used with scrolling widgets like
|
|
/// [ListView], a unique [PageStorageKey] must be specified to enable the
|
|
/// [CustomExpansionTile] to save and restore its expanded state when it is scrolled
|
|
/// in and out of view.
|
|
///
|
|
/// This class overrides the [ListTileThemeData.iconColor] and [ListTileThemeData.textColor]
|
|
/// theme properties for its [ListTile]. These colors animate between values when
|
|
/// the tile is expanded and collapsed: between [iconColor], [collapsedIconColor] and
|
|
/// between [textColor] and [collapsedTextColor].
|
|
///
|
|
/// The expansion arrow icon is shown on the right by default in left-to-right languages
|
|
/// (i.e. the trailing edge). This can be changed using [controlAffinity]. This maps
|
|
/// to the [leading] and [trailing] properties of [CustomExpansionTile].
|
|
///
|
|
/// {@tool dartpad}
|
|
/// This example demonstrates different configurations of ExpansionTile.
|
|
///
|
|
/// ** See code in examples/api/lib/material/expansion_tile/expansion_tile.0.dart **
|
|
/// {@end-tool}
|
|
///
|
|
/// See also:
|
|
///
|
|
/// * [ListTile], useful for creating expansion tile [children] when the
|
|
/// expansion tile represents a sublist.
|
|
/// * The "Expand and collapse" section of
|
|
/// <https://material.io/components/lists#types>
|
|
class CustomExpansionTile extends StatefulWidget {
|
|
/// Creates a single-line [ListTile] with an expansion arrow icon that expands or collapses
|
|
/// the tile to reveal or hide the [children]. The [initiallyExpanded] property must
|
|
/// be non-null.
|
|
CustomExpansionTile({
|
|
Key? key,
|
|
this.expandable = true,
|
|
this.title,
|
|
this.titleBuilder,
|
|
this.subtitle,
|
|
this.onExpansionChanged,
|
|
List<Widget> children = const [],
|
|
this.leading = const <Widget>[],
|
|
this.trailing = const <Widget>[],
|
|
this.visualDensity,
|
|
this.initiallyExpanded = false,
|
|
this.maintainState = false,
|
|
this.tilePadding,
|
|
this.expandedCrossAxisAlignment,
|
|
this.expandedAlignment,
|
|
this.childrenPadding,
|
|
this.backgroundColor,
|
|
this.collapsedBackgroundColor,
|
|
this.textColor,
|
|
this.collapsedTextColor,
|
|
this.iconColor,
|
|
this.collapsedIconColor,
|
|
this.controlAffinity,
|
|
this.icon,
|
|
this.minIconWidth = 20,
|
|
this.reorderablePadding = false,
|
|
}) :
|
|
// ignore: unnecessary_null_comparison
|
|
assert(initiallyExpanded != null),
|
|
// ignore: unnecessary_null_comparison
|
|
assert(maintainState != null),
|
|
assert(
|
|
expandedCrossAxisAlignment != CrossAxisAlignment.baseline,
|
|
'CrossAxisAlignment.baseline is not supported since the expanded children '
|
|
'are aligned in a column, not a row. Try to use another constant.',
|
|
),
|
|
assert(title != null || titleBuilder != null),
|
|
itemBuilder = ((BuildContext context, int index) => children[index]),
|
|
itemCount = children.length,
|
|
super(key: key);
|
|
|
|
const CustomExpansionTile.builder({
|
|
Key? key,
|
|
this.expandable = true,
|
|
this.title,
|
|
this.titleBuilder,
|
|
this.subtitle,
|
|
this.onExpansionChanged,
|
|
required this.itemBuilder,
|
|
required this.itemCount,
|
|
this.leading = const <Widget>[],
|
|
this.trailing = const <Widget>[],
|
|
this.visualDensity,
|
|
this.initiallyExpanded = false,
|
|
this.maintainState = false,
|
|
this.tilePadding,
|
|
this.expandedCrossAxisAlignment,
|
|
this.expandedAlignment,
|
|
this.childrenPadding,
|
|
this.backgroundColor,
|
|
this.collapsedBackgroundColor,
|
|
this.textColor,
|
|
this.collapsedTextColor,
|
|
this.iconColor,
|
|
this.collapsedIconColor,
|
|
this.controlAffinity,
|
|
this.icon,
|
|
this.minIconWidth = 20,
|
|
this.reorderablePadding = false,
|
|
}) :
|
|
// ignore: unnecessary_null_comparison
|
|
assert(initiallyExpanded != null),
|
|
// ignore: unnecessary_null_comparison
|
|
assert(maintainState != null),
|
|
assert(
|
|
expandedCrossAxisAlignment != CrossAxisAlignment.baseline,
|
|
'CrossAxisAlignment.baseline is not supported since the expanded children '
|
|
'are aligned in a column, not a row. Try to use another constant.',
|
|
),
|
|
assert(title != null || titleBuilder != null),
|
|
super(key: key);
|
|
|
|
/// CUSTOM - is expansion even enabled?
|
|
final bool expandable;
|
|
final Widget Function(BuildContext context, int index) itemBuilder;
|
|
final int itemCount;
|
|
|
|
/// A widget to display before the title.
|
|
///
|
|
/// Typically a [CircleAvatar] widget.
|
|
///
|
|
/// Note that depending on the value of [controlAffinity], the [leading] widget
|
|
/// may replace the rotating expansion arrow icon.
|
|
final List<Widget> leading;
|
|
|
|
/// The primary content of the list item.
|
|
///
|
|
/// Typically a [Text] widget.
|
|
final Widget? title;
|
|
|
|
final Widget Function(BuildContext context, Color color)? titleBuilder;
|
|
|
|
final Widget? icon;
|
|
|
|
final double minIconWidth;
|
|
|
|
/// Additional content displayed below the title.
|
|
///
|
|
/// Typically a [Text] widget.
|
|
final Widget? subtitle;
|
|
|
|
/// Called when the tile expands or collapses.
|
|
///
|
|
/// When the tile starts expanding, this function is called with the value
|
|
/// true. When the tile starts collapsing, this function is called with
|
|
/// the value false.
|
|
final ValueChanged<bool>? onExpansionChanged;
|
|
|
|
/// The color to display behind the sublist when expanded.
|
|
final Color? backgroundColor;
|
|
|
|
/// When not null, defines the background color of tile when the sublist is collapsed.
|
|
final Color? collapsedBackgroundColor;
|
|
|
|
/// A widget to display after the title.
|
|
///
|
|
/// Note that depending on the value of [controlAffinity], the [trailing] widget
|
|
/// may replace the rotating expansion arrow icon.
|
|
final List<Widget> trailing;
|
|
|
|
/// Defines how compact the list tile's layout will be.
|
|
///
|
|
/// {@macro flutter.material.themedata.visualDensity}
|
|
///
|
|
/// See also:
|
|
///
|
|
/// * [ThemeData.visualDensity], which specifies the [visualDensity] for all
|
|
/// widgets within a [Theme].
|
|
final VisualDensity? visualDensity;
|
|
|
|
/// Specifies if the list tile is initially expanded (true) or collapsed (false, the default).
|
|
final bool initiallyExpanded;
|
|
|
|
/// Specifies whether the state of the children is maintained when the tile expands and collapses.
|
|
///
|
|
/// When true, the children are kept in the tree while the tile is collapsed.
|
|
/// When false (default), the children are removed from the tree when the tile is
|
|
/// collapsed and recreated upon expansion.
|
|
final bool maintainState;
|
|
|
|
/// Specifies padding for the [ListTile].
|
|
///
|
|
/// Analogous to [ListTile.contentPadding], this property defines the insets for
|
|
/// the [leading], [title], [subtitle] and [trailing] widgets. It does not inset
|
|
/// the expanded [children] widgets.
|
|
///
|
|
/// When the value is null, the tile's padding is `EdgeInsets.symmetric(horizontal: 16.0)`.
|
|
final EdgeInsetsGeometry? tilePadding;
|
|
|
|
/// Specifies the alignment of [children], which are arranged in a column when
|
|
/// the tile is expanded.
|
|
///
|
|
/// The internals of the expanded tile make use of a [Column] widget for
|
|
/// [children], and [Align] widget to align the column. The `expandedAlignment`
|
|
/// parameter is passed directly into the [Align].
|
|
///
|
|
/// Modifying this property controls the alignment of the column within the
|
|
/// expanded tile, not the alignment of [children] widgets within the column.
|
|
/// To align each child within [children], see [expandedCrossAxisAlignment].
|
|
///
|
|
/// The width of the column is the width of the widest child widget in [children].
|
|
///
|
|
/// When the value is null, the value of `expandedAlignment` is [Alignment.center].
|
|
final Alignment? expandedAlignment;
|
|
|
|
/// Specifies the alignment of each child within [children] when the tile is expanded.
|
|
///
|
|
/// The internals of the expanded tile make use of a [Column] widget for
|
|
/// [children], and the `crossAxisAlignment` parameter is passed directly into the [Column].
|
|
///
|
|
/// Modifying this property controls the cross axis alignment of each child
|
|
/// within its [Column]. Note that the width of the [Column] that houses
|
|
/// [children] will be the same as the widest child widget in [children]. It is
|
|
/// not necessarily the width of [Column] is equal to the width of expanded tile.
|
|
///
|
|
/// To align the [Column] along the expanded tile, use the [expandedAlignment] property
|
|
/// instead.
|
|
///
|
|
/// When the value is null, the value of `expandedCrossAxisAlignment` is [CrossAxisAlignment.center].
|
|
final CrossAxisAlignment? expandedCrossAxisAlignment;
|
|
|
|
/// Specifies padding for [children].
|
|
///
|
|
/// When the value is null, the value of `childrenPadding` is [EdgeInsets.zero].
|
|
final EdgeInsetsGeometry? childrenPadding;
|
|
|
|
/// The icon color of tile's expansion arrow icon when the sublist is expanded.
|
|
///
|
|
/// Used to override to the [ListTileThemeData.iconColor].
|
|
final Color? iconColor;
|
|
|
|
/// The icon color of tile's expansion arrow icon when the sublist is collapsed.
|
|
///
|
|
/// Used to override to the [ListTileThemeData.iconColor].
|
|
final Color? collapsedIconColor;
|
|
|
|
/// The color of the tile's titles when the sublist is expanded.
|
|
///
|
|
/// Used to override to the [ListTileThemeData.textColor].
|
|
final Color? textColor;
|
|
|
|
/// The color of the tile's titles when the sublist is collapsed.
|
|
///
|
|
/// Used to override to the [ListTileThemeData.textColor].
|
|
final Color? collapsedTextColor;
|
|
|
|
/// Typically used to force the expansion arrow icon to the tile's leading or trailing edge.
|
|
///
|
|
/// By default, the value of `controlAffinity` is [ListTileControlAffinity.platform],
|
|
/// which means that the expansion arrow icon will appear on the tile's trailing edge.
|
|
final ListTileControlAffinity? controlAffinity;
|
|
|
|
final bool reorderablePadding;
|
|
|
|
@override
|
|
State<CustomExpansionTile> createState() => _CustomExpansionTileState();
|
|
}
|
|
|
|
class _CustomExpansionTileState extends State<CustomExpansionTile>
|
|
with SingleTickerProviderStateMixin {
|
|
static final Animatable<double> _easeOutTween = CurveTween(curve: Curves.easeOut);
|
|
static final Animatable<double> _easeInTween = CurveTween(curve: Curves.easeIn);
|
|
static final Animatable<double> _halfTween = Tween<double>(begin: 0.0, end: 0.5);
|
|
|
|
final ColorTween _headerColorTween = ColorTween();
|
|
final ColorTween _iconColorTween = ColorTween();
|
|
final ColorTween _backgroundColorTween = ColorTween();
|
|
|
|
late AnimationController _controller;
|
|
late Animation<double> _iconTurns;
|
|
late Animation<double> _heightFactor;
|
|
late Animation<Color?> _headerColor;
|
|
late Animation<Color?> _iconColor;
|
|
|
|
bool _isExpanded = false;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
_controller = AnimationController(duration: _kExpand, vsync: this);
|
|
_heightFactor = _controller.drive(_easeInTween);
|
|
_iconTurns = _controller.drive(_halfTween.chain(_easeInTween));
|
|
_headerColor = _controller.drive(_headerColorTween.chain(_easeInTween));
|
|
_iconColor = _controller.drive(_iconColorTween.chain(_easeOutTween));
|
|
|
|
_isExpanded = PageStorage.of(context)?.readState(context) as bool? ?? widget.initiallyExpanded;
|
|
if (_isExpanded) _controller.value = 1.0;
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_controller.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
void _handleTap() {
|
|
setState(() {
|
|
_isExpanded = !_isExpanded;
|
|
if (_isExpanded) {
|
|
_controller.forward();
|
|
} else {
|
|
_controller.reverse().then<void>((void value) {
|
|
if (!mounted) return;
|
|
setState(() {
|
|
// Rebuild without widget.children.
|
|
});
|
|
});
|
|
}
|
|
PageStorage.of(context)?.writeState(context, _isExpanded);
|
|
});
|
|
widget.onExpansionChanged?.call(_isExpanded);
|
|
}
|
|
|
|
// Platform or null affinity defaults to trailing.
|
|
ListTileControlAffinity _effectiveAffinity(ListTileControlAffinity? affinity) {
|
|
switch (affinity ?? ListTileControlAffinity.trailing) {
|
|
case ListTileControlAffinity.leading:
|
|
return ListTileControlAffinity.leading;
|
|
case ListTileControlAffinity.trailing:
|
|
case ListTileControlAffinity.platform:
|
|
return ListTileControlAffinity.trailing;
|
|
}
|
|
}
|
|
|
|
Widget? _buildIcon(BuildContext context) {
|
|
return RotationTransition(
|
|
turns: _iconTurns,
|
|
child: const Icon(Icons.expand_more),
|
|
);
|
|
}
|
|
|
|
Widget? _buildLeadingIcon(BuildContext context) {
|
|
if (!widget.expandable ||
|
|
_effectiveAffinity(widget.controlAffinity) != ListTileControlAffinity.leading) return null;
|
|
return _buildIcon(context);
|
|
}
|
|
|
|
Widget? _buildTrailingIcon(BuildContext context) {
|
|
if (!widget.expandable ||
|
|
_effectiveAffinity(widget.controlAffinity) != ListTileControlAffinity.trailing) return null;
|
|
if (widget.reorderablePadding &&
|
|
PlatformHelper.currentInteractionType == InteractionType.mouse) {
|
|
return Padding(
|
|
padding: const EdgeInsets.only(right: 24),
|
|
child: _buildIcon(context),
|
|
);
|
|
}
|
|
return _buildIcon(context);
|
|
}
|
|
|
|
Widget _buildChildren(BuildContext context, Widget? child) {
|
|
//
|
|
// return Container(
|
|
// decoration: BoxDecoration(
|
|
// color: _backgroundColor.value ?? Colors.transparent,
|
|
// border: Border(
|
|
// top: BorderSide(color: borderSideColor),
|
|
// bottom: BorderSide(color: borderSideColor),
|
|
// ),
|
|
// ),
|
|
// child:
|
|
return Wrap(
|
|
// mainAxisSize: MainAxisSize.min,
|
|
children: <Widget>[
|
|
ListTileTheme.merge(
|
|
iconColor: _iconColor.value,
|
|
textColor: _headerColor.value,
|
|
horizontalTitleGap: 0,
|
|
minLeadingWidth: 36,
|
|
child: CustomListTile(
|
|
shape: rRectShape,
|
|
onTap: widget.expandable ? _handleTap : null,
|
|
contentPadding: widget.tilePadding,
|
|
leading: (widget.icon != null)
|
|
? Padding(
|
|
padding: const EdgeInsets.only(right: 8),
|
|
child: SizedBox(
|
|
width: widget.minIconWidth,
|
|
child: widget.icon!,
|
|
),
|
|
)
|
|
: _buildLeadingIcon(context),
|
|
title: Row(
|
|
children: [
|
|
...widget.leading,
|
|
Expanded(
|
|
child: DefaultTextStyle(
|
|
style: Theme.of(context)
|
|
.textTheme
|
|
.titleMedium!
|
|
.copyWith(color: _headerColor.value),
|
|
child: widget.title ??
|
|
widget.titleBuilder!.call(
|
|
context,
|
|
_headerColor.value!,
|
|
),
|
|
),
|
|
),
|
|
...widget.trailing,
|
|
],
|
|
),
|
|
subtitle: widget.subtitle,
|
|
trailing: _buildTrailingIcon(context),
|
|
visualDensity: widget.visualDensity,
|
|
),
|
|
),
|
|
ClipRect(
|
|
child: Align(
|
|
alignment: widget.expandedAlignment ?? Alignment.center,
|
|
heightFactor: _heightFactor.value,
|
|
child: child,
|
|
),
|
|
),
|
|
],
|
|
// ),
|
|
);
|
|
}
|
|
|
|
@override
|
|
void didChangeDependencies() {
|
|
final ThemeData theme = Theme.of(context);
|
|
final ColorScheme colorScheme = theme.colorScheme;
|
|
_headerColorTween
|
|
..begin = widget.collapsedTextColor ?? theme.textTheme.titleMedium!.color
|
|
..end = widget.textColor ?? colorScheme.primary;
|
|
_iconColorTween
|
|
..begin = widget.collapsedIconColor ?? theme.unselectedWidgetColor
|
|
..end = widget.iconColor ?? colorScheme.primary;
|
|
_backgroundColorTween
|
|
..begin = widget.collapsedBackgroundColor
|
|
..end = widget.backgroundColor;
|
|
super.didChangeDependencies();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final bool closed = !_isExpanded && _controller.isDismissed;
|
|
final bool shouldRemoveChildren = closed && !widget.maintainState;
|
|
|
|
final Widget result = Offstage(
|
|
offstage: closed,
|
|
child: TickerMode(
|
|
enabled: !closed,
|
|
child: Padding(
|
|
padding: widget.childrenPadding ?? EdgeInsets.zero,
|
|
child: Column(
|
|
crossAxisAlignment: widget.expandedCrossAxisAlignment ?? CrossAxisAlignment.center,
|
|
children: range(widget.itemCount).map((x) => widget.itemBuilder(context, x)).toList(),
|
|
),
|
|
// child: ListView.builder(
|
|
// shrinkWrap: true,
|
|
// physics: const NeverScrollableScrollPhysics(),
|
|
// padding: widget.childrenPadding,
|
|
// // crossAxisAlignment: widget.expandedCrossAxisAlignment ?? CrossAxisAlignment.center,
|
|
// itemBuilder: widget.itemBuilder,
|
|
// itemCount: widget.itemCount,
|
|
// ),
|
|
),
|
|
),
|
|
);
|
|
|
|
return AnimatedBuilder(
|
|
animation: _controller.view,
|
|
builder: _buildChildren,
|
|
child: shouldRemoveChildren ? null : result,
|
|
);
|
|
}
|
|
}
|