fix: miscellaneous ui issues (#392)

This commit is contained in:
Kirpal Demian
2023-01-20 10:45:16 -05:00
committed by GitHub
parent 211915dd3a
commit 41b01e4ee4
6 changed files with 77 additions and 52 deletions

View File

@ -72,8 +72,10 @@ class _PhotoboothBodyState extends State<PhotoboothBody> {
return LayoutBuilder(
builder: (context, constraints) {
final double characterOffestY;
if (constraints.maxWidth > HoloboothBreakpoints.small) {
if (constraints.maxWidth > HoloboothBreakpoints.medium) {
characterOffestY = constraints.maxHeight / 6;
} else if (constraints.maxWidth > HoloboothBreakpoints.small) {
characterOffestY = constraints.maxHeight / 10;
} else {
characterOffestY = -300 + constraints.maxWidth / 1.15 / 6;
}
@ -123,8 +125,13 @@ class _PhotoboothBodyState extends State<PhotoboothBody> {
if (state.isRecording) {
return Align(
alignment: Alignment.bottomCenter,
child: RecordingCountdown(
onCountdownCompleted: _stopRecording,
child: Padding(
padding: constraints.maxWidth > HoloboothBreakpoints.small
? EdgeInsets.zero
: const EdgeInsets.only(bottom: 80),
child: RecordingCountdown(
onCountdownCompleted: _stopRecording,
),
),
);
} else if (state.gettingReady) {

View File

@ -59,30 +59,30 @@ class LargeShareBody extends StatelessWidget {
Widget build(BuildContext context) {
final thumbnail = context.read<ConvertBloc>().state.firstFrameProcessed;
return Column(
children: [
Row(
children: [
Expanded(
child: thumbnail != null
? SizedBox(
width: 450,
height: 450,
child: Align(
child: _PortalAnimation(
thumbnail: thumbnail,
mode: PortalMode.landscape,
),
return Padding(
padding: const EdgeInsets.only(left: 24),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: thumbnail != null
? SizedBox(
width: 450,
height: 450,
child: Align(
child: _PortalAnimation(
thumbnail: thumbnail,
mode: PortalMode.landscape,
),
)
: const SizedBox(),
),
const Expanded(
child: _ShareBodyContent(isSmallScreen: false),
),
],
),
],
),
)
: const SizedBox(),
),
const Expanded(
child: _ShareBodyContent(isSmallScreen: false),
),
],
),
);
}
}
@ -180,27 +180,23 @@ class _SmallShareBodyButtons extends StatelessWidget {
@override
Widget build(BuildContext context) {
const buttonHeight = 60.0;
const buttonWidth = 250.0;
const buttonSpacing = 24.0;
return Column(
children: const [
SizedBox(
width: buttonWidth,
height: buttonHeight,
child: ShareButton(),
children: [
ConstrainedBox(
constraints: const BoxConstraints(maxWidth: buttonWidth),
child: const ShareButton(),
),
SizedBox(height: buttonSpacing),
SizedBox(
width: buttonWidth,
height: buttonHeight,
child: DownloadButton(),
const SizedBox(height: buttonSpacing),
ConstrainedBox(
constraints: const BoxConstraints(maxWidth: buttonWidth),
child: const DownloadButton(),
),
SizedBox(height: buttonSpacing),
SizedBox(
width: buttonWidth,
height: buttonHeight,
child: RetakeButton(),
const SizedBox(height: buttonSpacing),
ConstrainedBox(
constraints: const BoxConstraints(maxWidth: buttonWidth),
child: const RetakeButton(),
),
],
);

View File

@ -1,13 +1,16 @@
import 'package:flutter/material.dart';
import 'package:holobooth/share/share.dart';
import 'package:holobooth_ui/holobooth_ui.dart';
class SmallShareSocialButtons extends StatelessWidget {
const SmallShareSocialButtons({super.key});
@override
Widget build(BuildContext context) {
final isSmall =
MediaQuery.of(context).size.width <= HoloboothBreakpoints.small;
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 80),
padding: EdgeInsets.symmetric(horizontal: isSmall ? 24 : 80),
child: Column(
children: const [
TwitterButton(),

View File

@ -19,14 +19,25 @@ class VideoFrame extends StatelessWidget {
fit: StackFit.expand,
children: [
if (thumbnail != null)
Positioned.fill(
child: Image.memory(
thumbnail.buffer.asUint8List(),
fit: BoxFit.cover,
),
LayoutBuilder(
builder: (context, constraints) {
return Padding(
// These values are calculated from the image.
padding: EdgeInsets.fromLTRB(
104 / 1617 * constraints.maxWidth,
105 / 2065 * constraints.maxHeight,
93 / 1617 * constraints.maxWidth,
381 / 2065 * constraints.maxHeight,
),
child: Image.memory(
thumbnail.buffer.asUint8List(),
fit: BoxFit.cover,
),
);
},
),
Positioned.fill(child: Assets.backgrounds.videoFrame.image()),
const Align(child: PlayButton()),
Assets.backgrounds.videoFrame.image(),
const Center(child: PlayButton()),
],
),
);

View File

@ -53,7 +53,10 @@ class GradientFrame extends StatelessWidget {
color: backgroundColor ?? HoloBoothColors.modalSurface,
borderRadius: BorderRadius.circular(borderRadius),
),
child: child,
child: ClipRRect(
borderRadius: BorderRadius.circular(borderRadius),
child: child,
),
),
);
}

View File

@ -56,7 +56,12 @@ class GradientOutlinedButton extends StatelessWidget {
child: icon,
),
),
Text(label),
Text(
label,
textHeightBehavior: const TextHeightBehavior(
applyHeightToFirstAscent: false,
),
),
],
),
);