fullscreen: landscape layout

This commit is contained in:
Thibault Deckers 2019-09-07 01:38:59 +09:00
parent 42820b7e48
commit a83b9200e2
2 changed files with 70 additions and 48 deletions

View file

@ -49,7 +49,7 @@ class MetadataSectionState extends State<MetadataSection> {
// use MediaQuery instead of unreliable OrientationBuilder // use MediaQuery instead of unreliable OrientationBuilder
final orientation = MediaQuery.of(context).orientation; final orientation = MediaQuery.of(context).orientation;
if (orientation == Orientation.landscape) { if (orientation == Orientation.landscape) {
final threshold = directoryNames.map((k) => metadataMap[k].length).reduce((v, e) => v + e) / 2; final threshold = (2 * directoryNames.length + directoryNames.map((k) => metadataMap[k].length).reduce((v, e) => v + e)) / 2;
final first = <String>[], second = <String>[]; final first = <String>[], second = <String>[];
var processed = 0; var processed = 0;
for (int i = 0; i < directoryNames.length; i++) { for (int i = 0; i < directoryNames.length; i++) {
@ -58,9 +58,8 @@ class MetadataSectionState extends State<MetadataSection> {
first.add(directoryName); first.add(directoryName);
else else
second.add(directoryName); second.add(directoryName);
processed += 1 + metadataMap[directoryName].length; processed += 2 + metadataMap[directoryName].length;
} }
debugPrint('first=$first second=$second');
content = Row( content = Row(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [

View file

@ -92,18 +92,26 @@ class _FullscreenBottomOverlayContent extends StatelessWidget {
final String position; final String position;
final double maxWidth; final double maxWidth;
static const double interRowPadding = 4.0;
static const double iconPadding = 8.0;
static const double iconSize = 16.0;
static const double subRowMinWidth = 300.0;
_FullscreenBottomOverlayContent({this.entry, this.details, this.position, this.maxWidth}); _FullscreenBottomOverlayContent({this.entry, this.details, this.position, this.maxWidth});
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final subRowWidth = min(400.0, maxWidth); // use MediaQuery instead of unreliable OrientationBuilder
final date = entry.bestDate; final orientation = MediaQuery.of(context).orientation;
final twoColumns = orientation == Orientation.landscape && maxWidth / 2 > subRowMinWidth;
final subRowWidth = twoColumns ? min(subRowMinWidth, maxWidth / 2) : maxWidth;
final hasShootingDetails = details != null && !details.isEmpty;
return DefaultTextStyle( return DefaultTextStyle(
style: Theme.of(context).textTheme.body1.copyWith( style: Theme.of(context).textTheme.body1.copyWith(
shadows: [ shadows: [
Shadow( Shadow(
color: Colors.black87, color: Colors.black87,
offset: Offset(0.0, 1.0), offset: Offset(0.5, 1.0),
) )
], ],
), ),
@ -113,59 +121,74 @@ class _FullscreenBottomOverlayContent extends StatelessWidget {
children: [ children: [
SizedBox( SizedBox(
width: maxWidth, width: maxWidth,
child: Text( child: Text('$position ${entry.title}', overflow: TextOverflow.ellipsis),
'$position ${entry.title}',
overflow: TextOverflow.ellipsis,
), ),
), if (entry.isLocated)
if (entry.isLocated) ...[ Container(
SizedBox(height: 4), padding: EdgeInsets.only(top: interRowPadding),
SizedBox(
width: subRowWidth, width: subRowWidth,
child: _buildLocationRow(),
),
if (twoColumns)
Padding(
padding: EdgeInsets.only(top: interRowPadding),
child: Row( child: Row(
children: [ children: [
Icon(Icons.place, size: 16), Container(width: subRowWidth, child: _buildDateRow()),
SizedBox(width: 8), if (hasShootingDetails) Container(width: subRowWidth, child: _buildShootingRow()),
Expanded(
child: Text(
entry.shortAddress,
overflow: TextOverflow.ellipsis,
),
),
], ],
), ),
), )
], else ...[
SizedBox(height: 4), Container(
SizedBox( padding: EdgeInsets.only(top: interRowPadding),
width: subRowWidth, width: subRowWidth,
child: Row( child: _buildDateRow(),
children: [
Icon(Icons.calendar_today, size: 16),
SizedBox(width: 8),
Expanded(child: Text('${DateFormat.yMMMd().format(date)} ${DateFormat.Hm().format(date)}')),
Expanded(child: Text('${entry.width} × ${entry.height}')),
],
), ),
), if (hasShootingDetails)
if (details != null && !details.isEmpty) ...[ Container(
SizedBox(height: 4), padding: EdgeInsets.only(top: interRowPadding),
SizedBox(
width: subRowWidth, width: subRowWidth,
child: Row( child: _buildShootingRow(),
children: [
Icon(Icons.camera, size: 16),
SizedBox(width: 8),
Expanded(child: Text(details.aperture)),
Expanded(child: Text(details.exposureTime)),
Expanded(child: Text(details.focalLength)),
Expanded(child: Text(details.iso)),
],
),
), ),
], ],
], ],
), ),
); );
} }
Widget _buildLocationRow() {
return Row(
children: [
Icon(Icons.place, size: iconSize),
SizedBox(width: iconPadding),
Expanded(child: Text(entry.shortAddress, overflow: TextOverflow.ellipsis)),
],
);
}
Widget _buildDateRow() {
final date = entry.bestDate;
return Row(
children: [
Icon(Icons.calendar_today, size: iconSize),
SizedBox(width: iconPadding),
Expanded(flex: 3, child: Text('${DateFormat.yMMMd().format(date)} ${DateFormat.Hm().format(date)}')),
Expanded(flex: 2, child: Text('${entry.width} × ${entry.height}')),
],
);
}
Widget _buildShootingRow() {
return Row(
children: [
Icon(Icons.camera, size: iconSize),
SizedBox(width: iconPadding),
Expanded(child: Text(details.aperture)),
Expanded(child: Text(details.exposureTime)),
Expanded(child: Text(details.focalLength)),
Expanded(child: Text(details.iso)),
],
);
}
} }