Added switch animations to MeteringScreen

This commit is contained in:
Vadim 2023-08-04 16:17:40 +02:00
parent 6e1aaf5acf
commit 8a71c8db13
5 changed files with 82 additions and 77 deletions

View file

@ -25,6 +25,7 @@ class Dimens {
static const Duration durationM = Duration(milliseconds: 200); static const Duration durationM = Duration(milliseconds: 200);
static const Duration durationML = Duration(milliseconds: 250); static const Duration durationML = Duration(milliseconds: 250);
static const Duration durationL = Duration(milliseconds: 300); static const Duration durationL = Duration(milliseconds: 300);
static const Duration switchDuration = Duration(milliseconds: 100);
static const double enabledOpacity = 1.0; static const double enabledOpacity = 1.0;
static const double disabledOpacity = 0.38; static const double disabledOpacity = 0.38;

View file

@ -10,10 +10,9 @@ class CameraViewPlaceholder extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Card( return Card(
color: error != null ? null : Colors.black,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(Dimens.borderRadiusM)), shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(Dimens.borderRadiusM)),
child: Center( child: Center(child: error != null ? const Icon(Icons.no_photography) : null),
child: error != null ? const Icon(Icons.no_photography) : const CircularProgressIndicator(),
),
); );
} }
} }

View file

@ -110,17 +110,17 @@ class _CameraViewBuilder extends StatelessWidget {
return AspectRatio( return AspectRatio(
aspectRatio: PlatformConfig.cameraPreviewAspectRatio, aspectRatio: PlatformConfig.cameraPreviewAspectRatio,
child: BlocBuilder<CameraContainerBloc, CameraContainerState>( child: BlocBuilder<CameraContainerBloc, CameraContainerState>(
buildWhen: (previous, current) => buildWhen: (previous, current) => current is! CameraActiveState,
current is CameraLoadingState || builder: (context, state) => Center(
current is CameraInitializedState || child: AnimatedSwitcher(
current is CameraErrorState, duration: Dimens.durationM,
builder: (context, state) { child: switch (state) {
if (state is CameraInitializedState) { CameraInitializedState() => CameraView(controller: state.controller),
return Center(child: CameraView(controller: state.controller)); CameraErrorState() => CameraViewPlaceholder(error: state.error),
} else { _ => const CameraViewPlaceholder(error: null),
return CameraViewPlaceholder(error: state is CameraErrorState ? state.error : null); },
} ),
}, ),
), ),
); );
} }
@ -161,11 +161,11 @@ class _CameraControlsBuilder extends StatelessWidget {
}, },
); );
} else { } else {
child = const SizedBox.shrink(); child = const Column(children: [Expanded(child: SizedBox.shrink())],);
} }
return AnimatedSwitcher( return AnimatedSwitcher(
duration: Dimens.durationS, duration: Dimens.switchDuration,
child: child, child: child,
); );
}, },

View file

@ -12,70 +12,72 @@ class ExposurePairsList extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
if (exposurePairs.isEmpty) { return AnimatedSwitcher(
return const EmptyExposurePairsList(); duration: Dimens.switchDuration,
} child: exposurePairs.isEmpty
return Stack( ? const EmptyExposurePairsList()
alignment: Alignment.center, : Stack(
children: [
Positioned.fill(
child: ListView.builder(
key: ValueKey(exposurePairs.hashCode),
padding: const EdgeInsets.symmetric(vertical: Dimens.paddingL),
itemCount: exposurePairs.length,
itemBuilder: (_, index) => Stack(
alignment: Alignment.center, alignment: Alignment.center,
children: [ children: [
Row( Positioned.fill(
mainAxisAlignment: MainAxisAlignment.center, child: ListView.builder(
children: [ key: ValueKey(exposurePairs.hashCode),
Expanded( padding: const EdgeInsets.symmetric(vertical: Dimens.paddingL),
child: Align( itemCount: exposurePairs.length,
alignment: Alignment.centerLeft, itemBuilder: (_, index) => Stack(
child: ExposurePairsListItem( alignment: Alignment.center,
exposurePairs[index].aperture, children: [
tickOnTheLeft: false, Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: Align(
alignment: Alignment.centerLeft,
child: ExposurePairsListItem(
exposurePairs[index].aperture,
tickOnTheLeft: false,
),
),
),
Expanded(
child: Align(
alignment: Alignment.centerLeft,
child: ExposurePairsListItem(
exposurePairs[index].shutterSpeed,
tickOnTheLeft: true,
),
),
),
],
), ),
), Positioned(
), top: 0,
Expanded( bottom: 0,
child: Align( child: LayoutBuilder(
alignment: Alignment.centerLeft, builder: (context, constraints) => Align(
child: ExposurePairsListItem( alignment: index == 0
exposurePairs[index].shutterSpeed, ? Alignment.bottomCenter
tickOnTheLeft: true, : (index == exposurePairs.length - 1
? Alignment.topCenter
: Alignment.center),
child: SizedBox(
height: index == 0 || index == exposurePairs.length - 1
? constraints.maxHeight / 2
: constraints.maxHeight,
child: ColoredBox(
color: Theme.of(context).colorScheme.onBackground,
child: const SizedBox(width: 1),
),
),
),
),
), ),
), ],
),
],
),
Positioned(
top: 0,
bottom: 0,
child: LayoutBuilder(
builder: (context, constraints) => Align(
alignment: index == 0
? Alignment.bottomCenter
: (index == exposurePairs.length - 1
? Alignment.topCenter
: Alignment.center),
child: SizedBox(
height: index == 0 || index == exposurePairs.length - 1
? constraints.maxHeight / 2
: constraints.maxHeight,
child: ColoredBox(
color: Theme.of(context).colorScheme.onBackground,
child: const SizedBox(width: 1),
),
),
), ),
), ),
), ),
], ],
), ),
),
),
],
); );
} }
} }

View file

@ -72,12 +72,15 @@ class _ReadingValueBuilder extends StatelessWidget {
softWrap: false, softWrap: false,
), ),
const SizedBox(height: Dimens.grid4), const SizedBox(height: Dimens.grid4),
Text( AnimatedSwitcher(
reading.value, duration: Dimens.switchDuration,
style: textTheme.titleMedium?.copyWith(color: textColor), child: Text(
maxLines: 1, reading.value,
overflow: TextOverflow.ellipsis, style: textTheme.titleMedium?.copyWith(color: textColor),
softWrap: false, maxLines: 1,
overflow: TextOverflow.ellipsis,
softWrap: false,
),
) )
], ],
); );