fixed camera screen layout

This commit is contained in:
Vadim 2023-01-29 18:13:30 +03:00
parent f23979975b
commit c88a767d1a
3 changed files with 80 additions and 18 deletions

View file

@ -21,6 +21,10 @@ class Dimens {
static const Duration durationML = Duration(milliseconds: 250);
static const Duration durationL = Duration(milliseconds: 300);
// TopBar
/// Probably this is a bad practice, but with text size locked, the height is always 212
static const double readingContainerHeight = 212;
// `CenteredSlider`
static const double cameraSliderTrackHeight = grid4;
static const double cameraSliderTrackRadius = cameraSliderTrackHeight / 2;

View file

@ -38,6 +38,9 @@ class CameraContainer extends StatelessWidget {
@override
Widget build(BuildContext context) {
final topBarOverflow = Dimens.readingContainerHeight -
((MediaQuery.of(context).size.width - Dimens.grid8 - 2 * Dimens.paddingM) / 2) /
PlatformConfig.cameraPreviewAspectRatio;
return Column(
children: [
MeteringTopBar(
@ -49,11 +52,17 @@ class CameraContainer extends StatelessWidget {
onIsoChanged: onIsoChanged,
onNdChanged: onNdChanged,
),
appendixHeight: topBarOverflow,
preview: const _CameraViewBuilder(),
),
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: Dimens.paddingM),
child: ExposurePairsList(exposurePairs),
child: _MiddleContentWrapper(
topBarOverflow: topBarOverflow,
leftContent: ExposurePairsList(exposurePairs),
rightContent: const _CameraControlsBuilder(),
),
),
),
],
@ -85,7 +94,9 @@ class _CameraControlsBuilder extends StatelessWidget {
@override
Widget build(BuildContext context) {
return BlocBuilder<CameraContainerBloc, CameraContainerState>(
return Padding(
padding: const EdgeInsets.symmetric(vertical: Dimens.paddingM),
child: BlocBuilder<CameraContainerBloc, CameraContainerState>(
builder: (context, state) => AnimatedSwitcher(
duration: Dimens.durationS,
child: state is CameraActiveState
@ -103,6 +114,47 @@ class _CameraControlsBuilder extends StatelessWidget {
)
: const SizedBox.shrink(),
),
),
);
}
}
class _MiddleContentWrapper extends StatelessWidget {
final double topBarOverflow;
final Widget leftContent;
final Widget rightContent;
const _MiddleContentWrapper({
required this.topBarOverflow,
required this.leftContent,
required this.rightContent,
});
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) => OverflowBox(
alignment: Alignment.bottomCenter,
maxHeight: constraints.maxHeight + topBarOverflow.abs(),
maxWidth: constraints.maxWidth,
child: Row(
children: [
Expanded(
child: Padding(
padding: EdgeInsets.only(top: topBarOverflow >= 0 ? topBarOverflow : 0),
child: leftContent,
),
),
const SizedBox(width: Dimens.grid8),
Expanded(
child: Padding(
padding: EdgeInsets.only(top: topBarOverflow <= 0 ? -topBarOverflow : 0),
child: rightContent,
),
),
],
),
),
);
}
}

View file

@ -68,11 +68,17 @@ class _ReadingValueBuilder extends StatelessWidget {
Text(
reading.label,
style: textTheme.labelMedium?.copyWith(color: textColor),
maxLines: 1,
overflow: TextOverflow.visible,
softWrap: false,
),
const SizedBox(height: Dimens.grid4),
Text(
reading.value,
style: textTheme.titleMedium?.copyWith(color: textColor),
maxLines: 1,
overflow: TextOverflow.visible,
softWrap: false,
),
],
);