From 808cc223a10f3e0bedfe71312e274fe051a7a742 Mon Sep 17 00:00:00 2001 From: Salvatore Giordano Date: Thu, 23 Jul 2020 13:57:16 +0200 Subject: [PATCH] add carousel on tap --- lib/src/full_screen_image.dart | 14 ++- lib/src/image_attachment.dart | 19 ++-- lib/src/image_group.dart | 161 ++++++++++++++++++++++----------- lib/src/message_widget.dart | 5 +- pubspec.yaml | 1 + 5 files changed, 130 insertions(+), 70 deletions(-) diff --git a/lib/src/full_screen_image.dart b/lib/src/full_screen_image.dart index c6f5804f..cc6a244a 100644 --- a/lib/src/full_screen_image.dart +++ b/lib/src/full_screen_image.dart @@ -15,14 +15,12 @@ class FullScreenImage extends StatelessWidget { @override Widget build(BuildContext context) { - return Container( - child: PhotoView( - imageProvider: CachedNetworkImageProvider(url), - maxScale: PhotoViewComputedScale.covered, - minScale: PhotoViewComputedScale.contained, - heroAttributes: PhotoViewHeroAttributes( - tag: url, - ), + return PhotoView( + imageProvider: CachedNetworkImageProvider(url), + maxScale: PhotoViewComputedScale.covered, + minScale: PhotoViewComputedScale.contained, + heroAttributes: PhotoViewHeroAttributes( + tag: url, ), ); } diff --git a/lib/src/image_attachment.dart b/lib/src/image_attachment.dart index e05f401b..ba11252a 100644 --- a/lib/src/image_attachment.dart +++ b/lib/src/image_attachment.dart @@ -39,13 +39,18 @@ class ImageAttachment extends StatelessWidget { Expanded( child: GestureDetector( onTap: () { - Navigator.push(context, MaterialPageRoute(builder: (_) { - return FullScreenImage( - url: attachment.imageUrl ?? - attachment.assetUrl ?? - attachment.thumbUrl, - ); - })); + Navigator.push( + context, + MaterialPageRoute( + builder: (_) { + return FullScreenImage( + url: attachment.imageUrl ?? + attachment.assetUrl ?? + attachment.thumbUrl, + ); + }, + ), + ); }, child: CachedNetworkImage( height: size?.height, diff --git a/lib/src/image_group.dart b/lib/src/image_group.dart index 70acca23..51b7be80 100644 --- a/lib/src/image_group.dart +++ b/lib/src/image_group.dart @@ -1,17 +1,18 @@ +import 'package:cached_network_image/cached_network_image.dart'; +import 'package:carousel_slider/carousel_options.dart'; +import 'package:carousel_slider/carousel_slider.dart'; import 'package:flutter/material.dart'; import 'package:stream_chat/stream_chat.dart'; -import 'package:stream_chat_flutter/src/message_widget.dart'; +import 'package:stream_chat_flutter/src/full_screen_image.dart'; class ImageGroup extends StatelessWidget { const ImageGroup({ Key key, - @required this.imageBuilder, @required this.images, @required this.message, this.size, }) : super(key: key); - final AttachmentBuilder imageBuilder; final List images; final Message message; final Size size; @@ -20,72 +21,77 @@ class ImageGroup extends StatelessWidget { Widget build(BuildContext context) { return ConstrainedBox( constraints: BoxConstraints.loose(size), - child: Column( - mainAxisSize: MainAxisSize.min, + child: Flex( + direction: Axis.vertical, children: [ - FittedBox( - fit: BoxFit.cover, - child: Row( - mainAxisSize: MainAxisSize.min, + Flexible( + flex: 1, + fit: FlexFit.tight, + child: Flex( + crossAxisAlignment: CrossAxisAlignment.stretch, + direction: Axis.horizontal, children: [ - imageBuilder( - context, - message, - images[0], + Flexible( + flex: 1, + fit: FlexFit.tight, + child: _buildImage(context, 0), ), - Padding( - padding: const EdgeInsets.only(left: 4.0), - child: imageBuilder( - context, - message, - images[1], + Flexible( + flex: 1, + fit: FlexFit.tight, + child: Padding( + padding: const EdgeInsets.only(left: 2.0), + child: _buildImage(context, 1), ), ), ], ), ), if (images.length >= 3) - Padding( - padding: const EdgeInsets.only(top: 2.0), - child: FittedBox( - fit: BoxFit.cover, - child: Row( - mainAxisSize: MainAxisSize.min, + Flexible( + fit: FlexFit.tight, + flex: 1, + child: Padding( + padding: const EdgeInsets.only(top: 2.0), + child: Flex( + direction: Axis.horizontal, + crossAxisAlignment: CrossAxisAlignment.stretch, children: [ - imageBuilder( - context, - message, - images[2], + Flexible( + fit: FlexFit.tight, + flex: 1, + child: _buildImage(context, 2), ), if (images.length >= 4) - Padding( - padding: const EdgeInsets.only(left: 4.0), - child: Stack( - children: [ - imageBuilder( - context, - message, - images[3], - ), - if (images.length > 4) - Positioned.fill( - child: Material( - color: Colors.black38, - child: InkWell( - onTap: () {}, - child: Center( - child: Text( - '${images.length - 4} +', - style: TextStyle( - color: Colors.white, - fontSize: 28, + Flexible( + fit: FlexFit.tight, + flex: 1, + child: Padding( + padding: const EdgeInsets.only(left: 2.0), + child: Stack( + fit: StackFit.expand, + children: [ + _buildImage(context, 3), + if (images.length > 4) + Positioned.fill( + child: GestureDetector( + onTap: () => _onTap(context, 3), + child: Material( + color: Colors.black38, + child: Center( + child: Text( + '${images.length - 4} +', + style: TextStyle( + color: Colors.white, + fontSize: 28, + ), ), ), ), ), ), - ), - ], + ], + ), ), ), ], @@ -96,4 +102,55 @@ class ImageGroup extends StatelessWidget { ), ); } + + void _onTap( + BuildContext context, [ + int index, + ]) { + Navigator.push( + context, + MaterialPageRoute( + builder: (context) { + return Scaffold( + appBar: AppBar( + backgroundColor: Colors.transparent, + iconTheme: IconThemeData( + color: Colors.white, + ), + ), + backgroundColor: Colors.black, + body: SizedBox.expand( + child: CarouselSlider( + items: images + .map((image) => FullScreenImage( + url: image.imageUrl ?? + image.thumbUrl ?? + image.assetUrl, + )) + .toList(), + options: CarouselOptions( + initialPage: index ?? 0, + enableInfiniteScroll: false, + viewportFraction: 0.95, + height: MediaQuery.of(context).size.height, + ), + ), + ), + ); + }, + ), + ); + } + + Widget _buildImage(BuildContext context, int index) { + return GestureDetector( + onTap: () => _onTap(context, index), + child: CachedNetworkImage( + imageUrl: images[index].imageUrl ?? + images[index].thumbUrl ?? + images[index].assetUrl, + fit: BoxFit.cover, + ), + ); + } } diff --git a/lib/src/message_widget.dart b/lib/src/message_widget.dart index 09d9dc13..2fc448ad 100644 --- a/lib/src/message_widget.dart +++ b/lib/src/message_widget.dart @@ -530,17 +530,16 @@ class _MessageWidgetState extends State { .toList(); if (images.length > 1) { - final imageBuilder = widget.attachmentBuilders['image']; return [ wrapAttachmentWidget( context, Material( color: widget.messageTheme.messageBackgroundColor, child: ImageGroup( - size: Size.fromWidth( + size: Size( MediaQuery.of(context).size.width * 0.8, + MediaQuery.of(context).size.height * 0.3, ), - imageBuilder: imageBuilder, images: images, message: widget.message, ), diff --git a/pubspec.yaml b/pubspec.yaml index b221a83b..8c25ab28 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -30,6 +30,7 @@ dependencies: line_awesome_icons: ^1.0.4+2 http_parser: ^3.1.4 flutter_slidable: ^0.5.4 + carousel_slider: ^2.2.1 flutter: assets: