✨ Better attachment list
This commit is contained in:
@ -1,11 +1,14 @@
|
||||
import 'package:dismissible_page/dismissible_page.dart';
|
||||
import 'package:flutter/gestures.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:gap/gap.dart';
|
||||
import 'package:responsive_framework/responsive_framework.dart';
|
||||
import 'package:surface/types/attachment.dart';
|
||||
import 'package:surface/widgets/attachment/attachment_detail.dart';
|
||||
import 'package:surface/widgets/attachment/attachment_item.dart';
|
||||
import 'package:uuid/uuid.dart';
|
||||
|
||||
class AttachmentList extends StatelessWidget {
|
||||
class AttachmentList extends StatefulWidget {
|
||||
final List<SnAttachment?> data;
|
||||
final bool bordered;
|
||||
final bool noGrow;
|
||||
@ -23,96 +26,148 @@ class AttachmentList extends StatelessWidget {
|
||||
static const BorderRadius kDefaultRadius =
|
||||
BorderRadius.all(Radius.circular(8));
|
||||
|
||||
@override
|
||||
State<AttachmentList> createState() => _AttachmentListState();
|
||||
}
|
||||
|
||||
class _AttachmentListState extends State<AttachmentList> {
|
||||
late final List<String> heroTags = List.generate(
|
||||
widget.data.length,
|
||||
(_) => const Uuid().v4(),
|
||||
);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final borderSide = bordered
|
||||
final borderSide = widget.bordered
|
||||
? BorderSide(width: 1, color: Theme.of(context).dividerColor)
|
||||
: BorderSide.none;
|
||||
final backgroundColor = Theme.of(context).colorScheme.surfaceContainer;
|
||||
final constraints = BoxConstraints(
|
||||
minWidth: 80,
|
||||
maxHeight: maxHeight ?? double.infinity,
|
||||
maxHeight: widget.maxHeight ?? double.infinity,
|
||||
);
|
||||
|
||||
if (data.isEmpty) return const SizedBox.shrink();
|
||||
if (data.length == 1) {
|
||||
if (ResponsiveBreakpoints.of(context).largerThan(MOBILE) || noGrow) {
|
||||
return Padding(
|
||||
// Single child list-like displaying
|
||||
padding: listPadding ?? EdgeInsets.zero,
|
||||
child: Container(
|
||||
constraints: constraints,
|
||||
decoration: BoxDecoration(
|
||||
color: backgroundColor,
|
||||
border: Border(top: borderSide, bottom: borderSide),
|
||||
borderRadius: kDefaultRadius,
|
||||
),
|
||||
child: AspectRatio(
|
||||
aspectRatio: data[0]?.metadata['ratio']?.toDouble() ??
|
||||
switch (data[0]?.mimetype.split('/').firstOrNull) {
|
||||
'audio' => 16 / 9,
|
||||
'video' => 16 / 9,
|
||||
_ => 1,
|
||||
},
|
||||
child: ClipRRect(
|
||||
borderRadius: kDefaultRadius,
|
||||
child: AttachmentItem(data: data[0], isExpandable: true),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
return Container(
|
||||
decoration: BoxDecoration(
|
||||
color: backgroundColor,
|
||||
border: Border(top: borderSide, bottom: borderSide),
|
||||
),
|
||||
child: AspectRatio(
|
||||
aspectRatio: data[0]?.metadata['ratio']?.toDouble() ?? 1,
|
||||
child: AttachmentItem(data: data[0], isExpandable: true),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
return Container(
|
||||
constraints: BoxConstraints(maxHeight: maxHeight ?? 320),
|
||||
child: ScrollConfiguration(
|
||||
behavior: _AttachmentListScrollBehavior(),
|
||||
child: ListView.separated(
|
||||
shrinkWrap: true,
|
||||
itemCount: data.length,
|
||||
itemBuilder: (context, idx) {
|
||||
return Stack(
|
||||
children: [
|
||||
Container(
|
||||
if (widget.data.isEmpty) return const SizedBox.shrink();
|
||||
if (widget.data.length == 1) {
|
||||
return GestureDetector(
|
||||
child: Builder(
|
||||
builder: (context) {
|
||||
if (ResponsiveBreakpoints.of(context).largerThan(MOBILE) ||
|
||||
widget.noGrow) {
|
||||
return Padding(
|
||||
// Single child list-like displaying
|
||||
padding: widget.listPadding ?? EdgeInsets.zero,
|
||||
child: Container(
|
||||
constraints: constraints,
|
||||
decoration: BoxDecoration(
|
||||
color: backgroundColor,
|
||||
border: Border(top: borderSide, bottom: borderSide),
|
||||
borderRadius: kDefaultRadius,
|
||||
borderRadius: AttachmentList.kDefaultRadius,
|
||||
),
|
||||
child: AspectRatio(
|
||||
aspectRatio: data[idx]?.metadata['ratio']?.toDouble() ?? 1,
|
||||
aspectRatio: widget.data[0]?.metadata['ratio']
|
||||
?.toDouble() ??
|
||||
switch (
|
||||
widget.data[0]?.mimetype.split('/').firstOrNull) {
|
||||
'audio' => 16 / 9,
|
||||
'video' => 16 / 9,
|
||||
_ => 1,
|
||||
},
|
||||
child: ClipRRect(
|
||||
borderRadius: kDefaultRadius,
|
||||
child:
|
||||
AttachmentItem(data: data[idx], isExpandable: true),
|
||||
borderRadius: AttachmentList.kDefaultRadius,
|
||||
child: AttachmentItem(
|
||||
data: widget.data[0],
|
||||
heroTag: heroTags[0],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
Positioned(
|
||||
right: 12,
|
||||
bottom: 12,
|
||||
child: Chip(
|
||||
label: Text('${idx + 1}/${data.length}'),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
return Container(
|
||||
decoration: BoxDecoration(
|
||||
color: backgroundColor,
|
||||
border: Border(top: borderSide, bottom: borderSide),
|
||||
),
|
||||
child: AspectRatio(
|
||||
aspectRatio: widget.data[0]?.metadata['ratio']?.toDouble() ?? 1,
|
||||
child: AttachmentItem(
|
||||
data: widget.data[0],
|
||||
heroTag: heroTags.first,
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
onTap: () {
|
||||
context.pushTransparentRoute(
|
||||
AttachmentZoomView(
|
||||
data: widget.data.where((ele) => ele != null).cast(),
|
||||
initialIndex: 0,
|
||||
heroTags: heroTags,
|
||||
),
|
||||
backgroundColor: Colors.black.withOpacity(0.7),
|
||||
rootNavigator: true,
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
return Container(
|
||||
constraints: BoxConstraints(maxHeight: widget.maxHeight ?? 320),
|
||||
child: ScrollConfiguration(
|
||||
behavior: _AttachmentListScrollBehavior(),
|
||||
child: ListView.separated(
|
||||
shrinkWrap: true,
|
||||
itemCount: widget.data.length,
|
||||
itemBuilder: (context, idx) {
|
||||
return GestureDetector(
|
||||
onTap: () {
|
||||
context.pushTransparentRoute(
|
||||
AttachmentZoomView(
|
||||
data: widget.data.where((ele) => ele != null).cast(),
|
||||
initialIndex: idx,
|
||||
heroTags: heroTags,
|
||||
),
|
||||
backgroundColor: Colors.black.withOpacity(0.7),
|
||||
rootNavigator: true,
|
||||
);
|
||||
},
|
||||
child: Stack(
|
||||
children: [
|
||||
Container(
|
||||
constraints: constraints,
|
||||
decoration: BoxDecoration(
|
||||
color: backgroundColor,
|
||||
border: Border(top: borderSide, bottom: borderSide),
|
||||
borderRadius: AttachmentList.kDefaultRadius,
|
||||
),
|
||||
child: AspectRatio(
|
||||
aspectRatio:
|
||||
widget.data[idx]?.metadata['ratio']?.toDouble() ?? 1,
|
||||
child: ClipRRect(
|
||||
borderRadius: AttachmentList.kDefaultRadius,
|
||||
child: AttachmentItem(
|
||||
data: widget.data[idx],
|
||||
heroTag: heroTags[idx],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
Positioned(
|
||||
right: 12,
|
||||
bottom: 12,
|
||||
child: Chip(
|
||||
label: Text('${idx + 1}/${widget.data.length}'),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
},
|
||||
separatorBuilder: (context, index) => const Gap(8),
|
||||
padding: listPadding,
|
||||
padding: widget.listPadding,
|
||||
physics: const BouncingScrollPhysics(),
|
||||
scrollDirection: Axis.horizontal,
|
||||
),
|
||||
|
||||
Reference in New Issue
Block a user