Implement Image viewer

This commit is contained in:
Christian Pauly 2020-02-16 12:35:04 +01:00
parent 32cf2e245a
commit 2242309086
6 changed files with 78 additions and 31 deletions

View file

@ -1,7 +1,6 @@
import 'package:cached_network_image/cached_network_image.dart'; import 'package:cached_network_image/cached_network_image.dart';
import 'package:famedlysdk/famedlysdk.dart'; import 'package:famedlysdk/famedlysdk.dart';
import 'package:fluffychat/utils/app_route.dart'; import 'package:fluffychat/views/image_viewer.dart';
import 'package:fluffychat/views/content_web_view.dart';
import 'package:flutter/foundation.dart'; import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
@ -35,12 +34,7 @@ class ContentBanner extends StatelessWidget {
); );
return InkWell( return InkWell(
onTap: () => mxContent.mxc?.isNotEmpty ?? false onTap: () => mxContent.mxc?.isNotEmpty ?? false
? Navigator.of(context).push( ? ImageViewer.show(context, mxContent)
AppRoute.defaultRoute(
context,
ContentWebView(mxContent),
),
)
: null, : null,
child: Container( child: Container(
height: 300, height: 300,

View file

@ -3,10 +3,9 @@ import 'package:famedlysdk/famedlysdk.dart';
import 'package:fluffychat/components/message_content.dart'; import 'package:fluffychat/components/message_content.dart';
import 'package:fluffychat/components/reply_content.dart'; import 'package:fluffychat/components/reply_content.dart';
import 'package:fluffychat/i18n/i18n.dart'; import 'package:fluffychat/i18n/i18n.dart';
import 'package:fluffychat/utils/app_route.dart';
import 'package:fluffychat/utils/date_time_extension.dart'; import 'package:fluffychat/utils/date_time_extension.dart';
import 'package:fluffychat/utils/string_color.dart'; import 'package:fluffychat/utils/string_color.dart';
import 'package:fluffychat/views/content_web_view.dart'; import 'package:fluffychat/views/image_viewer.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import '../avatar.dart'; import '../avatar.dart';
@ -133,12 +132,7 @@ class Message extends StatelessWidget {
: Avatar( : Avatar(
event.sender.avatarUrl, event.sender.avatarUrl,
event.sender.calcDisplayname(), event.sender.calcDisplayname(),
onTap: () => Navigator.of(context).push( onTap: () => ImageViewer.show(context, event.sender.avatarUrl),
AppRoute.defaultRoute(
context,
ContentWebView(event.sender.avatarUrl),
),
),
); );
if (ownMessage) { if (ownMessage) {
rowChildren.add(avatarOrSizedBox); rowChildren.add(avatarOrSizedBox);

View file

@ -5,6 +5,7 @@ import 'package:fluffychat/i18n/i18n.dart';
import 'package:fluffychat/utils/app_route.dart'; import 'package:fluffychat/utils/app_route.dart';
import 'package:fluffychat/utils/event_extension.dart'; import 'package:fluffychat/utils/event_extension.dart';
import 'package:fluffychat/views/content_web_view.dart'; import 'package:fluffychat/views/content_web_view.dart';
import 'package:fluffychat/views/image_viewer.dart';
import 'package:flutter/foundation.dart'; import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:link_text/link_text.dart'; import 'package:link_text/link_text.dart';
@ -27,7 +28,8 @@ class MessageContent extends StatelessWidget {
case MessageTypes.Image: case MessageTypes.Image:
case MessageTypes.Sticker: case MessageTypes.Sticker:
final int size = 400; final int size = 400;
final String src = MxContent(event.content["url"]).getThumbnail( final MxContent content = MxContent(event.content["url"]);
final String src = content.getThumbnail(
Matrix.of(context).client, Matrix.of(context).client,
width: size * MediaQuery.of(context).devicePixelRatio, width: size * MediaQuery.of(context).devicePixelRatio,
height: size * MediaQuery.of(context).devicePixelRatio, height: size * MediaQuery.of(context).devicePixelRatio,
@ -38,21 +40,23 @@ class MessageContent extends StatelessWidget {
radius: Radius.circular(10), radius: Radius.circular(10),
elevation: 0, elevation: 0,
child: InkWell( child: InkWell(
onTap: () => Navigator.of(context).push( onTap: () => ImageViewer.show(context, content),
AppRoute.defaultRoute( child: Container(
context, height: size.toDouble(),
ContentWebView(MxContent(event.content["url"])), width: size.toDouble(),
), child: kIsWeb
? Image.network(
src,
fit: BoxFit.cover,
)
: CachedNetworkImage(
imageUrl: src,
fit: BoxFit.cover,
placeholder: (c, s) => Center(
child: CircularProgressIndicator(),
),
),
), ),
child: kIsWeb
? Image.network(
src,
width: size.toDouble(),
)
: CachedNetworkImage(
imageUrl: src,
width: size.toDouble(),
),
), ),
); );
case MessageTypes.Audio: case MessageTypes.Audio:

View file

@ -0,0 +1,47 @@
import 'package:cached_network_image/cached_network_image.dart';
import 'package:famedlysdk/famedlysdk.dart';
import 'package:fluffychat/components/matrix.dart';
import 'package:fluffychat/utils/app_route.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart';
import 'package:url_launcher/url_launcher.dart';
class ImageViewer extends StatelessWidget {
final MxContent mxContent;
const ImageViewer(this.mxContent);
static show(BuildContext context, MxContent content) {
if (kIsWeb) {
launch(content.getDownloadLink(Matrix.of(context).client));
} else {
Navigator.of(context).push(
AppRoute(
ImageViewer(content),
),
);
}
}
@override
Widget build(BuildContext context) {
final String url = mxContent.getDownloadLink(Matrix.of(context).client);
return Scaffold(
appBar: AppBar(
actions: <Widget>[
IconButton(
icon: Icon(Icons.file_download),
onPressed: () => launch(url),
),
],
),
body: PhotoView(
loadingBuilder: (c, i) => Center(child: CircularProgressIndicator()),
imageProvider: CachedNetworkImageProvider(
url,
),
),
);
}
}

View file

@ -438,6 +438,13 @@ packages:
url: "https://pub.dartlang.org" url: "https://pub.dartlang.org"
source: hosted source: hosted
version: "2.4.0" version: "2.4.0"
photo_view:
dependency: "direct main"
description:
name: photo_view
url: "https://pub.dartlang.org"
source: hosted
version: "0.9.2"
platform: platform:
dependency: transitive dependency: transitive
description: description:

View file

@ -51,6 +51,7 @@ dependencies:
uni_links: ^0.2.0 uni_links: ^0.2.0
flutter_svg: ^0.17.1 flutter_svg: ^0.17.1
flutter_slidable: ^0.5.4 flutter_slidable: ^0.5.4
photo_view: ^0.9.2
intl: ^0.16.0 intl: ^0.16.0
intl_translation: ^0.17.9 intl_translation: ^0.17.9