added color animation for AnimatedDialog

This commit is contained in:
Vadim 2023-01-30 12:08:04 +03:00
parent ca5b30a026
commit 48d8439216
5 changed files with 87 additions and 60 deletions

View file

@ -175,7 +175,11 @@ class _ThemeDataProvider extends StatelessWidget {
primaryColor: primaryColor,
colorScheme: scheme,
dialogBackgroundColor: scheme.surface,
dialogTheme: DialogTheme(backgroundColor: scheme.surface),
dialogTheme: DialogTheme(
backgroundColor: scheme.surface,
surfaceTintColor: scheme.surfaceTint,
elevation: 6,
),
scaffoldBackgroundColor: scheme.surface,
);
}

View file

@ -35,6 +35,8 @@ class AnimatedDialogState extends State<AnimatedDialog> with SingleTickerProvide
late final Animation<double> _borderRadiusAnimation;
late final Animation<double> _closedOpacityAnimation;
late final Animation<double> _openedOpacityAnimation;
late final Animation<Color?> _foregroundColorAnimation;
late final Animation<double> _elevationAnimation;
bool _isDialogShown = false;
@ -112,6 +114,20 @@ class AnimatedDialogState extends State<AnimatedDialog> with SingleTickerProvide
});
}
@override
void didChangeDependencies() {
super.didChangeDependencies();
_foregroundColorAnimation = ColorTween(
begin: Theme.of(context).colorScheme.primaryContainer,
end: Theme.of(context).colorScheme.surface,
).animate(_defaultCurvedAnimation);
_elevationAnimation = Tween<double>(
begin: 0,
end: Theme.of(context).dialogTheme.elevation!,
).animate(_defaultCurvedAnimation);
}
@override
void dispose() {
_animationController.dispose();
@ -151,6 +167,8 @@ class AnimatedDialogState extends State<AnimatedDialog> with SingleTickerProvide
sizeAnimation: _sizeAnimation,
offsetAnimation: _offsetAnimation,
borderRadiusAnimation: _borderRadiusAnimation,
foregroundColorAnimation: _foregroundColorAnimation,
elevationAnimation: _elevationAnimation,
onDismiss: close,
builder: widget.closedChild != null && widget.openedChild != null
? (_) => _AnimatedSwitcher(
@ -195,6 +213,8 @@ class _AnimatedOverlay extends StatelessWidget {
final Animation<Size?> sizeAnimation;
final Animation<Size?> offsetAnimation;
final Animation<double> borderRadiusAnimation;
final Animation<Color?> foregroundColorAnimation;
final Animation<double> elevationAnimation;
final VoidCallback onDismiss;
final Widget? child;
final Widget Function(BuildContext context)? builder;
@ -205,6 +225,8 @@ class _AnimatedOverlay extends StatelessWidget {
required this.sizeAnimation,
required this.offsetAnimation,
required this.borderRadiusAnimation,
required this.foregroundColorAnimation,
required this.elevationAnimation,
required this.onDismiss,
this.child,
this.builder,
@ -236,7 +258,9 @@ class _AnimatedOverlay extends StatelessWidget {
child: ClipRRect(
borderRadius: BorderRadius.circular(borderRadiusAnimation.value),
child: Material(
color: Theme.of(context).colorScheme.primaryContainer,
elevation: elevationAnimation.value,
surfaceTintColor: Theme.of(context).colorScheme.surfaceTint,
color: foregroundColorAnimation.value,
child: builder?.call(context) ?? child,
),
),

View file

@ -57,37 +57,34 @@ class _PhotographyValuePickerDialogState<T extends PhotographyValue>
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
ColoredBox(
color: Theme.of(context).colorScheme.primaryContainer,
child: Column(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(
Dimens.paddingL,
Dimens.paddingL,
Dimens.paddingL,
Dimens.paddingM,
),
child: Column(
children: [
Text(
widget.title,
style: Theme.of(context).textTheme.headlineSmall!,
),
const SizedBox(height: Dimens.grid16),
Text(
widget.subtitle,
style: Theme.of(context).textTheme.bodyMedium!,
),
],
),
Column(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(
Dimens.paddingL,
Dimens.paddingL,
Dimens.paddingL,
Dimens.paddingM,
),
Divider(
color: Theme.of(context).colorScheme.onPrimaryContainer,
height: 0,
child: Column(
children: [
Text(
widget.title,
style: Theme.of(context).textTheme.headlineSmall!,
),
const SizedBox(height: Dimens.grid16),
Text(
widget.subtitle,
style: Theme.of(context).textTheme.bodyMedium!,
),
],
),
],
),
),
Divider(
color: Theme.of(context).colorScheme.onSurface,
height: 0,
),
],
),
Expanded(
child: ListView.builder(
@ -117,35 +114,32 @@ class _PhotographyValuePickerDialogState<T extends PhotographyValue>
),
),
),
ColoredBox(
color: Theme.of(context).colorScheme.primaryContainer,
child: Column(
children: [
Divider(
color: Theme.of(context).colorScheme.onPrimaryContainer,
height: 0,
Column(
children: [
Divider(
color: Theme.of(context).colorScheme.onSurface,
height: 0,
),
Padding(
padding: const EdgeInsets.all(Dimens.paddingL),
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisSize: MainAxisSize.max,
children: [
const Spacer(),
TextButton(
onPressed: widget.onCancel,
child: Text(S.of(context).cancel),
),
const SizedBox(width: Dimens.grid16),
TextButton(
onPressed: () => widget.onSelect(_selectedValue),
child: Text(S.of(context).select),
),
],
),
Padding(
padding: const EdgeInsets.all(Dimens.paddingL),
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisSize: MainAxisSize.max,
children: [
const Spacer(),
TextButton(
onPressed: widget.onCancel,
child: Text(S.of(context).cancel),
),
const SizedBox(width: Dimens.grid16),
TextButton(
onPressed: () => widget.onSelect(_selectedValue),
child: Text(S.of(context).select),
),
],
),
),
],
),
),
],
),
],
);

View file

@ -12,10 +12,12 @@ class ReadingValue {
}
class ReadingValueContainer extends StatelessWidget {
final Color? backgroundColor;
late final List<Widget> _items;
ReadingValueContainer({
required List<ReadingValue> values,
this.backgroundColor,
super.key,
}) {
_items = [];
@ -29,6 +31,7 @@ class ReadingValueContainer extends StatelessWidget {
ReadingValueContainer.singleValue({
required ReadingValue value,
this.backgroundColor,
super.key,
}) : _items = [_ReadingValueBuilder(value)];
@ -37,7 +40,7 @@ class ReadingValueContainer extends StatelessWidget {
return ClipRRect(
borderRadius: BorderRadius.circular(Dimens.borderRadiusM),
child: ColoredBox(
color: Theme.of(context).colorScheme.primaryContainer,
color: backgroundColor ?? Theme.of(context).colorScheme.primaryContainer,
child: Padding(
padding: const EdgeInsets.all(Dimens.paddingM),
child: Column(

View file

@ -89,6 +89,7 @@ class _IsoValueTile extends StatelessWidget {
evDifferenceBuilder: (selected, other) => selected.toStringDifference(other),
onChanged: onChanged,
closedChild: ReadingValueContainer.singleValue(
backgroundColor: null,
value: ReadingValue(
label: S.of(context).iso,
value: value.value.toString(),
@ -118,6 +119,7 @@ class _NdValueTile extends StatelessWidget {
evDifferenceBuilder: (selected, other) => other.toStringDifference(selected),
onChanged: onChanged,
closedChild: ReadingValueContainer.singleValue(
backgroundColor: null,
value: ReadingValue(
label: S.of(context).iso,
value: value.value.toString(),