[mob][photos] merge placeholder_for_link2
This commit is contained in:
@@ -1,7 +1,9 @@
|
||||
import 'dart:math' as math;
|
||||
import "dart:ui";
|
||||
|
||||
import "package:figma_squircle/figma_squircle.dart";
|
||||
import "package:flutter/material.dart";
|
||||
import "package:photos/core/constants.dart";
|
||||
import "package:photos/models/file/file.dart";
|
||||
import "package:photos/ui/viewer/file/thumbnail_widget.dart";
|
||||
|
||||
@@ -22,181 +24,276 @@ class LinkPlaceholder extends StatelessWidget {
|
||||
);
|
||||
|
||||
if (length == 1) {
|
||||
placeholderWidget = AspectRatio(
|
||||
aspectRatio: 1,
|
||||
child: _BackDrop(
|
||||
backDropImage: files[0],
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(18.0),
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(20.0),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.5),
|
||||
spreadRadius: 1,
|
||||
blurRadius: 1,
|
||||
offset: const Offset(1, 1),
|
||||
),
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.5),
|
||||
spreadRadius: 1,
|
||||
blurRadius: 1,
|
||||
offset: const Offset(-1, -1),
|
||||
),
|
||||
],
|
||||
placeholderWidget = _BackDrop(
|
||||
backDropImage: files[0],
|
||||
children: [
|
||||
LayoutBuilder(
|
||||
builder: (context, constraints) {
|
||||
final imageHeight = constraints.maxHeight * 0.9;
|
||||
return Center(
|
||||
child: _CustomImage(
|
||||
width: imageHeight,
|
||||
height: imageHeight,
|
||||
file: files[0],
|
||||
zIndex: 0,
|
||||
),
|
||||
child: ClipSmoothRect(
|
||||
radius: SmoothBorderRadius(
|
||||
cornerRadius: 15,
|
||||
cornerSmoothing: 1,
|
||||
),
|
||||
child: ThumbnailWidget(
|
||||
files[0],
|
||||
shouldShowArchiveStatus: false,
|
||||
shouldShowSyncStatus: false,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
} else if (length == 2) {
|
||||
placeholderWidget = AspectRatio(
|
||||
aspectRatio: 1,
|
||||
child: _BackDrop(
|
||||
backDropImage: files[0],
|
||||
children: [
|
||||
Positioned(
|
||||
right: 20,
|
||||
bottom: 50,
|
||||
child: _CustomImage(
|
||||
height: 190,
|
||||
width: 190,
|
||||
collages: files[1],
|
||||
zIndex: 0.2,
|
||||
),
|
||||
),
|
||||
Positioned(
|
||||
top: 50,
|
||||
left: 20,
|
||||
child: _CustomImage(
|
||||
height: 190,
|
||||
width: 190,
|
||||
collages: files[0],
|
||||
zIndex: -0.2,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
} else if (length == 3) {
|
||||
placeholderWidget = AspectRatio(
|
||||
aspectRatio: 1,
|
||||
child: _BackDrop(
|
||||
backDropImage: files[0],
|
||||
children: [
|
||||
Positioned(
|
||||
top: 55,
|
||||
left: 10,
|
||||
child: _CustomImage(
|
||||
height: 160,
|
||||
width: 160,
|
||||
collages: files[1],
|
||||
zIndex: -0.3,
|
||||
),
|
||||
),
|
||||
Positioned(
|
||||
right: 10,
|
||||
bottom: 50,
|
||||
child: _CustomImage(
|
||||
height: 160,
|
||||
width: 160,
|
||||
collages: files[2],
|
||||
zIndex: 0.3,
|
||||
),
|
||||
),
|
||||
Positioned(
|
||||
top: 100,
|
||||
left: 100,
|
||||
child: _CustomImage(
|
||||
height: 175,
|
||||
width: 175,
|
||||
collages: files[0],
|
||||
zIndex: 0.0,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
} else if (length > 3) {
|
||||
placeholderWidget = Padding(
|
||||
padding: const EdgeInsets.all(8.0),
|
||||
child: AspectRatio(
|
||||
aspectRatio: 1,
|
||||
child: _BackDrop(
|
||||
backDropImage: files[0],
|
||||
children: [
|
||||
Positioned(
|
||||
top: 20,
|
||||
left: 20,
|
||||
child: _CustomImage(
|
||||
height: 160,
|
||||
width: 160,
|
||||
collages: files[1],
|
||||
zIndex: 0,
|
||||
),
|
||||
),
|
||||
Positioned(
|
||||
bottom: 15,
|
||||
left: 40,
|
||||
child: _CustomImage(
|
||||
height: 160,
|
||||
width: 160,
|
||||
collages: files[2],
|
||||
zIndex: 0,
|
||||
),
|
||||
),
|
||||
Positioned(
|
||||
top: 75,
|
||||
right: 30,
|
||||
child: _CustomImage(
|
||||
height: 175,
|
||||
width: 175,
|
||||
collages: files[0],
|
||||
zIndex: 0.0,
|
||||
),
|
||||
),
|
||||
Positioned(
|
||||
bottom: 30,
|
||||
right: 40,
|
||||
child: ClipSmoothRect(
|
||||
radius: SmoothBorderRadius(
|
||||
cornerRadius: 7.5,
|
||||
cornerSmoothing: 1,
|
||||
),
|
||||
child: Container(
|
||||
color: Colors.white,
|
||||
height: 50,
|
||||
width: 50,
|
||||
child: Center(
|
||||
child: Text(
|
||||
"+" "$length",
|
||||
style: const TextStyle(
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: 24,
|
||||
color: Colors.black,
|
||||
),
|
||||
),
|
||||
placeholderWidget = _BackDrop(
|
||||
backDropImage: files[0],
|
||||
children: [
|
||||
LayoutBuilder(
|
||||
builder: ((context, constraints) {
|
||||
final imageHeight = constraints.maxHeight * 0.52;
|
||||
return Stack(
|
||||
children: [
|
||||
Positioned(
|
||||
top: 145,
|
||||
left: 180,
|
||||
child: _CustomImage(
|
||||
height: imageHeight,
|
||||
width: imageHeight,
|
||||
file: files[1],
|
||||
zIndex: 10 * math.pi / 180,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
Positioned(
|
||||
top: 45,
|
||||
left: 3.2,
|
||||
child: _CustomImage(
|
||||
height: imageHeight,
|
||||
width: imageHeight,
|
||||
file: files[0],
|
||||
zIndex: -(10 * math.pi / 180),
|
||||
imageShadow: const [
|
||||
BoxShadow(
|
||||
offset: Offset(0, 0),
|
||||
blurRadius: 0.84,
|
||||
color: Color.fromRGBO(0, 0, 0, 0.11),
|
||||
),
|
||||
BoxShadow(
|
||||
offset: Offset(0.84, 0.84),
|
||||
blurRadius: 1.68,
|
||||
color: Color.fromRGBO(0, 0, 0, 0.09),
|
||||
),
|
||||
BoxShadow(
|
||||
offset: Offset(2.53, 2.53),
|
||||
blurRadius: 2.53,
|
||||
color: Color.fromRGBO(0, 0, 0, 0.05),
|
||||
),
|
||||
BoxShadow(
|
||||
offset: Offset(5.05, 4.21),
|
||||
blurRadius: 2.53,
|
||||
color: Color.fromRGBO(0, 0, 0, 0.02),
|
||||
),
|
||||
BoxShadow(
|
||||
offset: Offset(7.58, 6.74),
|
||||
blurRadius: 2.53,
|
||||
color: Color.fromRGBO(0, 0, 0, 0.0),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
} else if (length == 3) {
|
||||
placeholderWidget = _BackDrop(
|
||||
backDropImage: files[0],
|
||||
children: [
|
||||
LayoutBuilder(
|
||||
builder: (context, constraint) {
|
||||
final imageHeightSmall = constraint.maxHeight * 0.43;
|
||||
final imageHeightLarge = constraint.maxHeight * 0.50;
|
||||
return Stack(
|
||||
children: [
|
||||
Positioned(
|
||||
top: 55,
|
||||
child: _CustomImage(
|
||||
height: imageHeightSmall,
|
||||
width: imageHeightSmall,
|
||||
file: files[1],
|
||||
zIndex: -(20 * math.pi / 180),
|
||||
),
|
||||
),
|
||||
Positioned(
|
||||
bottom: 50,
|
||||
right: -10,
|
||||
child: _CustomImage(
|
||||
height: imageHeightSmall,
|
||||
width: imageHeightSmall,
|
||||
file: files[2],
|
||||
zIndex: 20 * math.pi / 180,
|
||||
),
|
||||
),
|
||||
Center(
|
||||
child: _CustomImage(
|
||||
height: imageHeightLarge,
|
||||
width: imageHeightLarge,
|
||||
file: files[0],
|
||||
zIndex: 0.0,
|
||||
imageShadow: const [
|
||||
BoxShadow(
|
||||
offset: Offset(0, 1.02),
|
||||
blurRadius: 2.04,
|
||||
color: Color.fromRGBO(0, 0, 0, 0.23),
|
||||
),
|
||||
BoxShadow(
|
||||
offset: Offset(0, 3.06),
|
||||
blurRadius: 3.06,
|
||||
color: Color.fromRGBO(0, 0, 0, 0.2),
|
||||
),
|
||||
BoxShadow(
|
||||
offset: Offset(0, 6.12),
|
||||
blurRadius: 4.08,
|
||||
color: Color.fromRGBO(0, 0, 0, 0.12),
|
||||
),
|
||||
BoxShadow(
|
||||
offset: Offset(0, 11.22),
|
||||
blurRadius: 5.1,
|
||||
color: Color.fromRGBO(0, 0, 0, 0.04),
|
||||
),
|
||||
BoxShadow(
|
||||
offset: Offset(0, 18.36),
|
||||
blurRadius: 5.1,
|
||||
color: Color.fromRGBO(0, 0, 0, 0.0),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
} else if (length > 3) {
|
||||
placeholderWidget = _BackDrop(
|
||||
backDropImage: files[0],
|
||||
children: [
|
||||
LayoutBuilder(
|
||||
builder: (context, constraint) {
|
||||
final imageHeightSmall = constraint.maxHeight * 0.43;
|
||||
final imageHeightLarge = constraint.maxHeight * 0.50;
|
||||
final boxHeight = constraint.maxHeight * 0.15;
|
||||
return Stack(
|
||||
children: [
|
||||
Positioned(
|
||||
top: 30,
|
||||
left: 25,
|
||||
child: _CustomImage(
|
||||
height: imageHeightSmall,
|
||||
width: imageHeightSmall,
|
||||
file: files[1],
|
||||
zIndex: 0.0,
|
||||
),
|
||||
),
|
||||
Positioned(
|
||||
top: 202,
|
||||
left: 50,
|
||||
child: _CustomImage(
|
||||
height: imageHeightSmall,
|
||||
width: imageHeightSmall,
|
||||
file: files[2],
|
||||
zIndex: 0.0,
|
||||
),
|
||||
),
|
||||
Positioned(
|
||||
top: 75,
|
||||
right: 25,
|
||||
child: _CustomImage(
|
||||
height: imageHeightLarge,
|
||||
width: imageHeightLarge,
|
||||
file: files[0],
|
||||
zIndex: 0.0,
|
||||
imageShadow: const [
|
||||
BoxShadow(
|
||||
offset: Offset(0, 1.02),
|
||||
blurRadius: 2.04,
|
||||
color: Color.fromRGBO(0, 0, 0, 0.23),
|
||||
),
|
||||
BoxShadow(
|
||||
offset: Offset(0, 3.06),
|
||||
blurRadius: 3.06,
|
||||
color: Color.fromRGBO(0, 0, 0, 0.2),
|
||||
),
|
||||
BoxShadow(
|
||||
offset: Offset(0, 6.12),
|
||||
blurRadius: 4.08,
|
||||
color: Color.fromRGBO(0, 0, 0, 0.12),
|
||||
),
|
||||
BoxShadow(
|
||||
offset: Offset(0, 11.22),
|
||||
blurRadius: 5.1,
|
||||
color: Color.fromRGBO(0, 0, 0, 0.04),
|
||||
),
|
||||
BoxShadow(
|
||||
offset: Offset(0, 18.36),
|
||||
blurRadius: 5.1,
|
||||
color: Color.fromRGBO(0, 0, 0, 0.0),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
Positioned(
|
||||
top: 290,
|
||||
left: 270,
|
||||
child: Stack(
|
||||
children: [
|
||||
Center(
|
||||
child: Container(
|
||||
height: boxHeight + 3,
|
||||
width: boxHeight + 3,
|
||||
decoration: ShapeDecoration(
|
||||
color: const Color.fromRGBO(129, 129, 129, 0.1),
|
||||
shape: SmoothRectangleBorder(
|
||||
borderRadius: SmoothBorderRadius(
|
||||
cornerRadius: 15.0,
|
||||
cornerSmoothing: 1.0,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
Center(
|
||||
child: ClipSmoothRect(
|
||||
radius: SmoothBorderRadius(
|
||||
cornerRadius: 12,
|
||||
cornerSmoothing: 1.0,
|
||||
),
|
||||
child: Container(
|
||||
height: boxHeight,
|
||||
width: boxHeight,
|
||||
color: const Color.fromRGBO(255, 255, 255, 1),
|
||||
child: Center(
|
||||
child: Text(
|
||||
"+" "${length - 3}",
|
||||
style: const TextStyle(
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 24,
|
||||
color: Color.fromRGBO(0, 0, 0, 1),
|
||||
fontFamily: 'Inter',
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
@@ -206,7 +303,6 @@ class LinkPlaceholder extends StatelessWidget {
|
||||
|
||||
class _BackDrop extends StatelessWidget {
|
||||
const _BackDrop({
|
||||
super.key,
|
||||
required this.backDropImage,
|
||||
required this.children,
|
||||
});
|
||||
@@ -216,21 +312,25 @@ class _BackDrop extends StatelessWidget {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Stack(
|
||||
children: [
|
||||
ThumbnailWidget(
|
||||
backDropImage,
|
||||
shouldShowArchiveStatus: false,
|
||||
shouldShowSyncStatus: false,
|
||||
),
|
||||
BackdropFilter(
|
||||
filter: ImageFilter.blur(sigmaX: 12, sigmaY: 12),
|
||||
child: Container(
|
||||
color: Colors.transparent,
|
||||
return AspectRatio(
|
||||
aspectRatio: 1,
|
||||
child: Stack(
|
||||
children: [
|
||||
ThumbnailWidget(
|
||||
backDropImage,
|
||||
shouldShowArchiveStatus: false,
|
||||
shouldShowSyncStatus: false,
|
||||
thumbnailSize: thumbnailLargeSize,
|
||||
),
|
||||
),
|
||||
...children,
|
||||
],
|
||||
BackdropFilter(
|
||||
filter: ImageFilter.blur(sigmaX: 12, sigmaY: 12),
|
||||
child: Container(
|
||||
color: Colors.transparent,
|
||||
),
|
||||
),
|
||||
...children,
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -239,12 +339,12 @@ class _CustomImage extends StatelessWidget {
|
||||
const _CustomImage({
|
||||
required this.width,
|
||||
required this.height,
|
||||
super.key,
|
||||
required this.collages,
|
||||
required this.file,
|
||||
required this.zIndex,
|
||||
this.imageShadow,
|
||||
});
|
||||
|
||||
final EnteFile collages;
|
||||
final List<BoxShadow>? imageShadow;
|
||||
final EnteFile file;
|
||||
final double zIndex;
|
||||
final double height;
|
||||
final double width;
|
||||
@@ -255,35 +355,48 @@ class _CustomImage extends StatelessWidget {
|
||||
transform: Matrix4.rotationZ(zIndex),
|
||||
height: height,
|
||||
width: width,
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(20.0),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.5),
|
||||
spreadRadius: 1,
|
||||
blurRadius: 1,
|
||||
offset: const Offset(1, 1),
|
||||
child: Stack(
|
||||
children: [
|
||||
Center(
|
||||
child: Container(
|
||||
height: height,
|
||||
width: width,
|
||||
decoration: ShapeDecoration(
|
||||
color: const Color.fromRGBO(129, 129, 129, 0.1),
|
||||
shadows: imageShadow,
|
||||
shape: SmoothRectangleBorder(
|
||||
borderRadius: SmoothBorderRadius(
|
||||
cornerRadius: 21.0,
|
||||
cornerSmoothing: 1.0,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.5),
|
||||
spreadRadius: 1,
|
||||
blurRadius: 1,
|
||||
offset: const Offset(-1, -1),
|
||||
Center(
|
||||
child: SizedBox(
|
||||
height: height - 5,
|
||||
width: width - 5,
|
||||
child: ClipSmoothRect(
|
||||
radius: SmoothBorderRadius(
|
||||
cornerRadius: 16.0,
|
||||
cornerSmoothing: 1,
|
||||
),
|
||||
clipBehavior: Clip.antiAliasWithSaveLayer,
|
||||
child: Container(
|
||||
decoration: BoxDecoration(boxShadow: imageShadow),
|
||||
child: ThumbnailWidget(
|
||||
file,
|
||||
shouldShowArchiveStatus: false,
|
||||
shouldShowSyncStatus: false,
|
||||
thumbnailSize: thumbnailLargeSize,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: ClipSmoothRect(
|
||||
radius: SmoothBorderRadius(
|
||||
cornerRadius: 20.0,
|
||||
cornerSmoothing: 1,
|
||||
),
|
||||
clipBehavior: Clip.antiAliasWithSaveLayer,
|
||||
child: ThumbnailWidget(
|
||||
collages,
|
||||
shouldShowArchiveStatus: false,
|
||||
shouldShowSyncStatus: false,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -223,5 +223,5 @@ Future<void> shareImageAndUrl(
|
||||
String imagePath,
|
||||
String url,
|
||||
) async {
|
||||
await Share.shareFiles([imagePath], text: url);
|
||||
await Share.shareXFiles([XFile(imagePath)], text: url);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user