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, primaryColor: primaryColor,
colorScheme: scheme, colorScheme: scheme,
dialogBackgroundColor: scheme.surface, dialogBackgroundColor: scheme.surface,
dialogTheme: DialogTheme(backgroundColor: scheme.surface), dialogTheme: DialogTheme(
backgroundColor: scheme.surface,
surfaceTintColor: scheme.surfaceTint,
elevation: 6,
),
scaffoldBackgroundColor: scheme.surface, 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> _borderRadiusAnimation;
late final Animation<double> _closedOpacityAnimation; late final Animation<double> _closedOpacityAnimation;
late final Animation<double> _openedOpacityAnimation; late final Animation<double> _openedOpacityAnimation;
late final Animation<Color?> _foregroundColorAnimation;
late final Animation<double> _elevationAnimation;
bool _isDialogShown = false; 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 @override
void dispose() { void dispose() {
_animationController.dispose(); _animationController.dispose();
@ -151,6 +167,8 @@ class AnimatedDialogState extends State<AnimatedDialog> with SingleTickerProvide
sizeAnimation: _sizeAnimation, sizeAnimation: _sizeAnimation,
offsetAnimation: _offsetAnimation, offsetAnimation: _offsetAnimation,
borderRadiusAnimation: _borderRadiusAnimation, borderRadiusAnimation: _borderRadiusAnimation,
foregroundColorAnimation: _foregroundColorAnimation,
elevationAnimation: _elevationAnimation,
onDismiss: close, onDismiss: close,
builder: widget.closedChild != null && widget.openedChild != null builder: widget.closedChild != null && widget.openedChild != null
? (_) => _AnimatedSwitcher( ? (_) => _AnimatedSwitcher(
@ -195,6 +213,8 @@ class _AnimatedOverlay extends StatelessWidget {
final Animation<Size?> sizeAnimation; final Animation<Size?> sizeAnimation;
final Animation<Size?> offsetAnimation; final Animation<Size?> offsetAnimation;
final Animation<double> borderRadiusAnimation; final Animation<double> borderRadiusAnimation;
final Animation<Color?> foregroundColorAnimation;
final Animation<double> elevationAnimation;
final VoidCallback onDismiss; final VoidCallback onDismiss;
final Widget? child; final Widget? child;
final Widget Function(BuildContext context)? builder; final Widget Function(BuildContext context)? builder;
@ -205,6 +225,8 @@ class _AnimatedOverlay extends StatelessWidget {
required this.sizeAnimation, required this.sizeAnimation,
required this.offsetAnimation, required this.offsetAnimation,
required this.borderRadiusAnimation, required this.borderRadiusAnimation,
required this.foregroundColorAnimation,
required this.elevationAnimation,
required this.onDismiss, required this.onDismiss,
this.child, this.child,
this.builder, this.builder,
@ -236,7 +258,9 @@ class _AnimatedOverlay extends StatelessWidget {
child: ClipRRect( child: ClipRRect(
borderRadius: BorderRadius.circular(borderRadiusAnimation.value), borderRadius: BorderRadius.circular(borderRadiusAnimation.value),
child: Material( 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, child: builder?.call(context) ?? child,
), ),
), ),

View file

@ -57,37 +57,34 @@ class _PhotographyValuePickerDialogState<T extends PhotographyValue>
return Column( return Column(
crossAxisAlignment: CrossAxisAlignment.stretch, crossAxisAlignment: CrossAxisAlignment.stretch,
children: [ children: [
ColoredBox( Column(
color: Theme.of(context).colorScheme.primaryContainer, children: [
child: Column( Padding(
children: [ padding: const EdgeInsets.fromLTRB(
Padding( Dimens.paddingL,
padding: const EdgeInsets.fromLTRB( Dimens.paddingL,
Dimens.paddingL, Dimens.paddingL,
Dimens.paddingL, Dimens.paddingM,
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!,
),
],
),
), ),
Divider( child: Column(
color: Theme.of(context).colorScheme.onPrimaryContainer, children: [
height: 0, 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( Expanded(
child: ListView.builder( child: ListView.builder(
@ -117,35 +114,32 @@ class _PhotographyValuePickerDialogState<T extends PhotographyValue>
), ),
), ),
), ),
ColoredBox( Column(
color: Theme.of(context).colorScheme.primaryContainer, children: [
child: Column( Divider(
children: [ color: Theme.of(context).colorScheme.onSurface,
Divider( height: 0,
color: Theme.of(context).colorScheme.onPrimaryContainer, ),
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 { class ReadingValueContainer extends StatelessWidget {
final Color? backgroundColor;
late final List<Widget> _items; late final List<Widget> _items;
ReadingValueContainer({ ReadingValueContainer({
required List<ReadingValue> values, required List<ReadingValue> values,
this.backgroundColor,
super.key, super.key,
}) { }) {
_items = []; _items = [];
@ -29,6 +31,7 @@ class ReadingValueContainer extends StatelessWidget {
ReadingValueContainer.singleValue({ ReadingValueContainer.singleValue({
required ReadingValue value, required ReadingValue value,
this.backgroundColor,
super.key, super.key,
}) : _items = [_ReadingValueBuilder(value)]; }) : _items = [_ReadingValueBuilder(value)];
@ -37,7 +40,7 @@ class ReadingValueContainer extends StatelessWidget {
return ClipRRect( return ClipRRect(
borderRadius: BorderRadius.circular(Dimens.borderRadiusM), borderRadius: BorderRadius.circular(Dimens.borderRadiusM),
child: ColoredBox( child: ColoredBox(
color: Theme.of(context).colorScheme.primaryContainer, color: backgroundColor ?? Theme.of(context).colorScheme.primaryContainer,
child: Padding( child: Padding(
padding: const EdgeInsets.all(Dimens.paddingM), padding: const EdgeInsets.all(Dimens.paddingM),
child: Column( child: Column(

View file

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