Skip to content

Commit

Permalink
Image size unification (#507)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Feichtmeier
Feichtmeier authored Feb 13, 2024
1 parent d4fcc55 commit d2e7dde
Show file tree
Hide file tree
Showing 10 changed files with 233 additions and 198 deletions.
2 changes: 1 addition & 1 deletion lib/common.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export 'src/common/copy_clipboard_content.dart';
export 'src/common/country_auto_complete.dart';
export 'src/common/country_popup.dart';
export 'src/common/icons.dart';
export 'src/common/image_grid.dart';
export 'src/common/four_images_grid.dart';
export 'src/common/like_button.dart';
export 'src/common/limit_popup.dart';
export 'src/common/loading_grid.dart';
Expand Down
4 changes: 3 additions & 1 deletion lib/constants.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,9 @@ const kSnackBarWidth = 500.0;

const fullHeightPlayerImageSize = 300.0;

const kAudioPageHeaderHeight = 240.0;
const kMaxAudioPageHeaderHeight = 200.0;

const kMinAudioPageHeaderHeight = 0.0;

const kSnackBarDuration = Duration(seconds: 10);

Expand Down
23 changes: 12 additions & 11 deletions lib/src/common/audio_page_body.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import 'package:collection/collection.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:provider/provider.dart';
import 'package:yaru_widgets/yaru_widgets.dart';

import '../../common.dart';
import '../../constants.dart';
Expand Down Expand Up @@ -75,7 +76,7 @@ class AudioPageBody extends StatefulWidget {

class _AudioPageBodyState extends State<AudioPageBody> {
late ScrollController _controller;
double _headerHeight = kAudioPageHeaderHeight;
double _headerHeight = kMaxAudioPageHeaderHeight;

@override
void initState() {
Expand All @@ -85,13 +86,13 @@ class _AudioPageBodyState extends State<AudioPageBody> {

void _listener() {
if (_controller.position.userScrollDirection == ScrollDirection.reverse) {
if (_headerHeight != 0) {
setState(() => _headerHeight = 0);
if (_headerHeight != kMinAudioPageHeaderHeight) {
setState(() => _headerHeight = kMinAudioPageHeaderHeight);
}
}
if (_controller.position.userScrollDirection == ScrollDirection.forward) {
if (_headerHeight == 0) {
setState(() => _headerHeight = kAudioPageHeaderHeight);
if (_headerHeight == kMinAudioPageHeaderHeight) {
setState(() => _headerHeight = kMaxAudioPageHeaderHeight);
}
}
}
Expand Down Expand Up @@ -126,10 +127,10 @@ class _AudioPageBodyState extends State<AudioPageBody> {

final audioControlPanel = Padding(
padding: const EdgeInsets.only(
top: 10,
left: 20,
right: 20,
bottom: 15,
top: kYaruPagePadding / 2,
left: kYaruPagePadding,
right: kYaruPagePadding,
bottom: kYaruPagePadding / 2,
),
child: AudioPageControlPanel(
title: widget.controlPanelTitle,
Expand Down Expand Up @@ -289,7 +290,7 @@ class _AudioPageBodyState extends State<AudioPageBody> {
),
],
),
if (_headerHeight == 0)
if (_headerHeight == kMinAudioPageHeaderHeight)
Positioned(
bottom: 20,
right: 20,
Expand All @@ -301,7 +302,7 @@ class _AudioPageBodyState extends State<AudioPageBody> {
duration: const Duration(milliseconds: 100),
curve: Curves.easeInOut,
);
setState(() => _headerHeight = kAudioPageHeaderHeight);
setState(() => _headerHeight = kMaxAudioPageHeaderHeight);
},
),
),
Expand Down
231 changes: 128 additions & 103 deletions lib/src/common/audio_page_header.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,128 +32,153 @@ class AudioPageHeader extends StatelessWidget {
final size = context.m.size;
final smallWindow = size.width < kMasterDetailBreakPoint;
final imageRadius = BorderRadius.circular(10);
const kBigTextMitigation = 2.0;

return AnimatedContainer(
duration: const Duration(milliseconds: 200),
height: height,
padding: const EdgeInsets.all(20),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment:
smallWindow ? MainAxisAlignment.center : MainAxisAlignment.start,
children: [
if (image != null)
Padding(
padding: EdgeInsets.only(right: smallWindow ? 0 : 20),
child: DecoratedBox(
decoration: BoxDecoration(
borderRadius: imageRadius,
boxShadow: [
BoxShadow(
offset: const Offset(0, 0),
spreadRadius: 0.8,
blurRadius: 0,
color: theme.shadowColor.withOpacity(0.1),
),
],
return Padding(
padding: height != kMinAudioPageHeaderHeight
? const EdgeInsets.all(20)
: const EdgeInsets.only(left: 20),
child: AnimatedContainer(
duration: const Duration(milliseconds: 200),
height: height,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment:
smallWindow ? MainAxisAlignment.center : MainAxisAlignment.start,
children: [
if (image != null)
Padding(
padding: EdgeInsets.only(
right:
smallWindow ? 0 : kYaruPagePadding - kBigTextMitigation,
),
child: ClipRRect(
borderRadius: imageRadius,
child: image!,
child: SizedBox.square(
dimension: height,
child: DecoratedBox(
decoration: BoxDecoration(
borderRadius: imageRadius,
boxShadow: [
BoxShadow(
offset: const Offset(0, 0),
spreadRadius: 0.8,
blurRadius: 0,
color: theme.shadowColor.withOpacity(0.1),
),
],
),
child: ClipRRect(
borderRadius: imageRadius,
child: image!,
),
),
),
),
),
if (!smallWindow)
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
if (height != 0)
if (!smallWindow)
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Flexible(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Flexible(
child: Text(
label ?? context.l10n.album,
style: theme.textTheme.labelSmall,
maxLines: 1,
),
),
if (subTitle?.isNotEmpty == true)
const Padding(
padding: EdgeInsets.symmetric(horizontal: 5),
child: Text('·'),
fit: FlexFit.tight,
child: Text(
title,
style: theme.textTheme.headlineLarge?.copyWith(
fontWeight: FontWeight.w300,
letterSpacing: 0,
leadingDistribution:
TextLeadingDistribution.proportional,
fontSize: 30,
color: theme.colorScheme.onSurface.withOpacity(0.9),
),
overflow: TextOverflow.ellipsis,
),
),
if (height != kMinAudioPageHeaderHeight)
Flexible(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const SizedBox(
width: kBigTextMitigation,
),
if (subTitle?.isNotEmpty == true)
Flexible(
child: Text(
subTitle ?? '',
label ?? context.l10n.album,
style: theme.textTheme.labelSmall,
maxLines: 1,
overflow: TextOverflow.visible,
),
),
],
),
),
Flexible(
fit: FlexFit.tight,
child: Text(
title,
style: theme.textTheme.headlineLarge?.copyWith(
fontWeight: FontWeight.w300,
fontSize: 30,
color: theme.colorScheme.onSurface.withOpacity(0.9),
if (subTitle?.isNotEmpty == true)
const Padding(
padding: EdgeInsets.symmetric(horizontal: 5),
child: Text('·'),
),
if (subTitle?.isNotEmpty == true)
Flexible(
child: Text(
subTitle ?? '',
style: theme.textTheme.labelSmall,
maxLines: 1,
overflow: TextOverflow.visible,
),
),
],
),
),
overflow: TextOverflow.ellipsis,
),
),
if (description != null)
Expanded(
flex: 3,
child: InkWell(
borderRadius: BorderRadius.circular(kYaruButtonRadius),
onTap: () => showDialog(
context: context,
builder: (context) => _DescriptionDialog(
title: title,
description: description!,
),
),
child: SizedBox(
height: 100,
child: Html(
data: description,
onAnchorTap: (url, attributes, element) {
if (url == null) return;
launchUrl(Uri.parse(url));
},
style: {
'img': Style(display: Display.none),
'html': Style(
margin: Margins.zero,
padding: HtmlPaddings.zero,
textAlign: TextAlign.start,
maxLines: 20,
textOverflow: TextOverflow.fade,
child: description != null &&
height != kMinAudioPageHeaderHeight
? Padding(
padding: const EdgeInsets.only(
left: kBigTextMitigation,
),
'body': Style(
margin: Margins.zero,
textOverflow: TextOverflow.fade,
maxLines: 20,
textAlign: TextAlign.start,
child: InkWell(
borderRadius:
BorderRadius.circular(kYaruButtonRadius),
onTap: () => showDialog(
context: context,
builder: (context) => _DescriptionDialog(
title: title,
description: description!,
),
),
child: SizedBox(
height: 100,
child: Html(
data: description,
onAnchorTap: (url, attributes, element) {
if (url == null) return;
launchUrl(Uri.parse(url));
},
style: {
'img': Style(display: Display.none),
'html': Style(
margin: Margins.zero,
padding: HtmlPaddings.zero,
textAlign: TextAlign.start,
maxLines: 20,
textOverflow: TextOverflow.fade,
),
'body': Style(
margin: Margins.zero,
textOverflow: TextOverflow.fade,
maxLines: 20,
textAlign: TextAlign.start,
),
},
),
),
),
},
),
),
),
)
: const SizedBox.expand(),
),
],
],
),
),
),
],
],
),
),
);
}
Expand Down
Loading

0 comments on commit d2e7dde

Please sign in to comment.