2024-11-09 04:04:03 +00:00
|
|
|
import 'package:flutter/gestures.dart';
|
|
|
|
import 'package:flutter/material.dart';
|
|
|
|
import 'package:gap/gap.dart';
|
2024-11-10 09:21:57 +00:00
|
|
|
import 'package:responsive_framework/responsive_framework.dart';
|
2024-11-09 04:04:03 +00:00
|
|
|
import 'package:surface/types/attachment.dart';
|
|
|
|
import 'package:surface/widgets/attachment/attachment_item.dart';
|
|
|
|
|
|
|
|
class AttachmentList extends StatelessWidget {
|
2024-11-17 16:55:39 +00:00
|
|
|
final List<SnAttachment?> data;
|
2024-11-18 13:38:15 +00:00
|
|
|
final bool bordered;
|
|
|
|
final bool noGrow;
|
2024-11-13 16:20:59 +00:00
|
|
|
final double? maxHeight;
|
2024-11-14 14:21:13 +00:00
|
|
|
final EdgeInsets? listPadding;
|
2024-11-10 08:41:11 +00:00
|
|
|
const AttachmentList({
|
|
|
|
super.key,
|
|
|
|
required this.data,
|
2024-11-18 13:38:15 +00:00
|
|
|
this.bordered = false,
|
|
|
|
this.noGrow = false,
|
2024-11-13 16:20:59 +00:00
|
|
|
this.maxHeight,
|
2024-11-14 14:21:13 +00:00
|
|
|
this.listPadding,
|
2024-11-10 08:41:11 +00:00
|
|
|
});
|
2024-11-09 04:04:03 +00:00
|
|
|
|
2024-11-10 09:21:57 +00:00
|
|
|
static const BorderRadius kDefaultRadius =
|
|
|
|
BorderRadius.all(Radius.circular(8));
|
|
|
|
|
2024-11-09 04:04:03 +00:00
|
|
|
@override
|
|
|
|
Widget build(BuildContext context) {
|
2024-11-18 13:38:15 +00:00
|
|
|
final borderSide = bordered
|
2024-11-09 04:04:03 +00:00
|
|
|
? BorderSide(width: 1, color: Theme.of(context).dividerColor)
|
|
|
|
: BorderSide.none;
|
2024-11-14 14:42:06 +00:00
|
|
|
final backgroundColor = Theme.of(context).colorScheme.surfaceContainer;
|
|
|
|
final constraints = BoxConstraints(
|
|
|
|
minWidth: 80,
|
|
|
|
maxHeight: maxHeight ?? double.infinity,
|
|
|
|
);
|
2024-11-09 04:04:03 +00:00
|
|
|
|
|
|
|
if (data.isEmpty) return const SizedBox.shrink();
|
|
|
|
if (data.length == 1) {
|
2024-11-18 13:38:15 +00:00
|
|
|
if (ResponsiveBreakpoints.of(context).largerThan(MOBILE) || noGrow) {
|
2024-11-14 14:21:13 +00:00
|
|
|
return Padding(
|
|
|
|
// Single child list-like displaying
|
|
|
|
padding: listPadding ?? EdgeInsets.zero,
|
|
|
|
child: Container(
|
2024-11-14 14:42:06 +00:00
|
|
|
constraints: constraints,
|
2024-11-14 14:21:13 +00:00
|
|
|
decoration: BoxDecoration(
|
2024-11-14 14:42:06 +00:00
|
|
|
color: backgroundColor,
|
2024-11-14 14:21:13 +00:00
|
|
|
border: Border(top: borderSide, bottom: borderSide),
|
2024-11-10 09:21:57 +00:00
|
|
|
borderRadius: kDefaultRadius,
|
2024-11-14 14:21:13 +00:00
|
|
|
),
|
|
|
|
child: AspectRatio(
|
2024-11-21 15:28:02 +00:00
|
|
|
aspectRatio: data[0]?.metadata['ratio']?.toDouble() ??
|
|
|
|
switch (data[0]?.mimetype.split('/').firstOrNull) {
|
|
|
|
'audio' => 16 / 9,
|
|
|
|
'video' => 16 / 9,
|
|
|
|
_ => 1,
|
|
|
|
},
|
2024-11-14 14:21:13 +00:00
|
|
|
child: ClipRRect(
|
|
|
|
borderRadius: kDefaultRadius,
|
|
|
|
child: AttachmentItem(data: data[0], isExpandable: true),
|
|
|
|
),
|
2024-11-10 09:21:57 +00:00
|
|
|
),
|
|
|
|
),
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2024-11-09 04:04:03 +00:00
|
|
|
return Container(
|
|
|
|
decoration: BoxDecoration(
|
2024-11-14 14:42:06 +00:00
|
|
|
color: backgroundColor,
|
2024-11-09 04:04:03 +00:00
|
|
|
border: Border(top: borderSide, bottom: borderSide),
|
|
|
|
),
|
2024-11-10 09:21:57 +00:00
|
|
|
child: AspectRatio(
|
2024-11-17 16:55:39 +00:00
|
|
|
aspectRatio: data[0]?.metadata['ratio']?.toDouble() ?? 1,
|
2024-11-10 09:21:57 +00:00
|
|
|
child: AttachmentItem(data: data[0], isExpandable: true),
|
|
|
|
),
|
2024-11-09 04:04:03 +00:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
return Container(
|
2024-11-13 16:20:59 +00:00
|
|
|
constraints: BoxConstraints(maxHeight: maxHeight ?? 320),
|
2024-11-09 04:04:03 +00:00
|
|
|
child: ScrollConfiguration(
|
|
|
|
behavior: _AttachmentListScrollBehavior(),
|
|
|
|
child: ListView.separated(
|
|
|
|
shrinkWrap: true,
|
|
|
|
itemCount: data.length,
|
|
|
|
itemBuilder: (context, idx) {
|
2024-11-14 14:42:06 +00:00
|
|
|
return Stack(
|
|
|
|
children: [
|
|
|
|
Container(
|
|
|
|
constraints: constraints,
|
|
|
|
decoration: BoxDecoration(
|
|
|
|
color: backgroundColor,
|
|
|
|
border: Border(top: borderSide, bottom: borderSide),
|
|
|
|
borderRadius: kDefaultRadius,
|
|
|
|
),
|
|
|
|
child: AspectRatio(
|
2024-11-17 16:55:39 +00:00
|
|
|
aspectRatio: data[idx]?.metadata['ratio']?.toDouble() ?? 1,
|
2024-11-14 14:42:06 +00:00
|
|
|
child: ClipRRect(
|
|
|
|
borderRadius: kDefaultRadius,
|
|
|
|
child:
|
|
|
|
AttachmentItem(data: data[idx], isExpandable: true),
|
|
|
|
),
|
|
|
|
),
|
2024-11-10 08:41:11 +00:00
|
|
|
),
|
2024-11-14 14:42:06 +00:00
|
|
|
Positioned(
|
|
|
|
right: 12,
|
|
|
|
bottom: 12,
|
|
|
|
child: Chip(
|
|
|
|
label: Text('${idx + 1}/${data.length}'),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
],
|
2024-11-09 04:04:03 +00:00
|
|
|
);
|
|
|
|
},
|
|
|
|
separatorBuilder: (context, index) => const Gap(8),
|
2024-11-14 14:21:13 +00:00
|
|
|
padding: listPadding,
|
2024-11-09 04:04:03 +00:00
|
|
|
physics: const BouncingScrollPhysics(),
|
|
|
|
scrollDirection: Axis.horizontal,
|
|
|
|
),
|
|
|
|
),
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
class _AttachmentListScrollBehavior extends MaterialScrollBehavior {
|
|
|
|
@override
|
|
|
|
Set<PointerDeviceKind> get dragDevices => {
|
|
|
|
PointerDeviceKind.touch,
|
|
|
|
PointerDeviceKind.mouse,
|
|
|
|
};
|
|
|
|
}
|