mirror of
https://github.com/feeddeck/feeddeck.git
synced 2026-05-05 10:38:28 -05:00
92bea5d715
This commit improves / simplifies the media handling within the app. Until now we always had to provide the type of the media file (item media / source icon) when we wanted to display it. This is now not necessary anymore. Instead we always display the image from it's original path when the url starts with "http://" or "https://". Additionally we also check the platform to proxy the image request on the web. If the image doesn't start with "http://" or "https://" we always try to display the image from the Supabase storage. For this we also adjusted the corresponding Deno function, so that we check if the image starts with "http://" or "https://" before we upload it to the Supabase storage. If this is the case we upload the source icon to the Supabase storage. If the upload fails, we will use the original path of the icon. Last but not least this commit also introduces our own "CachedNetworkImage" widget, which wraps the original "CachedNetworkImage" widget. Our own widget will ensure that we use the correct url for the image request, so that we do not have to use this function all over the app anymore. Later this widget can also be used to introduce our own cache manager.
128 lines
4.1 KiB
Dart
128 lines
4.1 KiB
Dart
import 'package:flutter/material.dart';
|
|
|
|
import 'package:feeddeck/utils/constants.dart';
|
|
import 'package:feeddeck/widgets/item/details/utils/item_media.dart';
|
|
import 'package:feeddeck/widgets/utils/cached_network_image.dart';
|
|
|
|
/// The [ItemMediaGallery] widget can be used to display multiple media files in
|
|
/// a gallery. Similar to the [ItemMedia] widget the provided [itemMedias]
|
|
/// values can be displayed from the Supabase storage or directly from the
|
|
/// provided url.
|
|
class ItemMediaGallery extends StatelessWidget {
|
|
const ItemMediaGallery({
|
|
super.key,
|
|
required this.itemMedias,
|
|
});
|
|
|
|
final List<String>? itemMedias;
|
|
|
|
/// [_buildSingleMedia] displays a single media file in the gallery. Based on
|
|
/// the provided [itemMedia] value the media file is displayed from the
|
|
/// Supabase storage or directly from the provided url via the
|
|
/// [CachedNetworkImage] widget. If the app is running in the web, the url is
|
|
/// proxied through the Supabase functions.
|
|
Widget _buildSingleMedia(BuildContext context, String itemMedia) {
|
|
return CachedNetworkImage(
|
|
width: MediaQuery.of(context).size.width,
|
|
fit: BoxFit.cover,
|
|
imageUrl: itemMedia,
|
|
placeholder: (context, url) => Container(),
|
|
errorWidget: (context, url, error) => Container(),
|
|
);
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
if (itemMedias == null || itemMedias!.isEmpty) {
|
|
return Container();
|
|
}
|
|
|
|
switch (itemMedias!.length) {
|
|
case 1:
|
|
return _buildSingleMedia(context, itemMedias![0]);
|
|
case 2:
|
|
return Container(
|
|
padding: const EdgeInsets.only(
|
|
bottom: Constants.spacingExtraSmall,
|
|
),
|
|
child: AspectRatio(
|
|
aspectRatio: 3.0 / 2.0,
|
|
child: Row(
|
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
|
children: [
|
|
Expanded(
|
|
child: _buildSingleMedia(context, itemMedias![0]),
|
|
),
|
|
const VerticalDivider(
|
|
color: Constants.secondary,
|
|
width: 1.0,
|
|
),
|
|
Expanded(
|
|
child: _buildSingleMedia(context, itemMedias![1]),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
case 3:
|
|
return Container(
|
|
padding: const EdgeInsets.only(
|
|
bottom: Constants.spacingExtraSmall,
|
|
),
|
|
child: AspectRatio(
|
|
aspectRatio: 3.0 / 2.0,
|
|
child: Row(
|
|
children: [
|
|
Expanded(
|
|
child: _buildSingleMedia(context, itemMedias![0]),
|
|
),
|
|
const VerticalDivider(
|
|
color: Constants.secondary,
|
|
width: 1.0,
|
|
),
|
|
Expanded(
|
|
child: Column(
|
|
children: [
|
|
Expanded(
|
|
child: _buildSingleMedia(context, itemMedias![1]),
|
|
),
|
|
const Divider(
|
|
color: Constants.secondary,
|
|
height: 1.0,
|
|
),
|
|
Expanded(
|
|
child: _buildSingleMedia(context, itemMedias![2]),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
default:
|
|
return Container(
|
|
padding: const EdgeInsets.only(
|
|
bottom: Constants.spacingExtraSmall,
|
|
),
|
|
child: AspectRatio(
|
|
aspectRatio: 1.0,
|
|
child: GridView.builder(
|
|
physics: const NeverScrollableScrollPhysics(),
|
|
itemCount: 4,
|
|
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
|
|
crossAxisCount: 2,
|
|
childAspectRatio: 1.0,
|
|
crossAxisSpacing: 1.0,
|
|
mainAxisSpacing: 1.0,
|
|
),
|
|
itemBuilder: (BuildContext context, int index) {
|
|
return _buildSingleMedia(context, itemMedias![index]);
|
|
},
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
}
|