talksik/stream-chat-flutter
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

add carousel on tap

Browse Source
This commit is contained in:
Salvatore Giordano
2020-07-23 13:57:16 +02:00
parent 02a3642894
commit 808cc223a1
5 changed files with 130 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/src/full_screen_image.dart
+6 -8
View File
@@ -15,14 +15,12 @@ class FullScreenImage extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Container( return PhotoView(
child: PhotoView( imageProvider: CachedNetworkImageProvider(url),
imageProvider: CachedNetworkImageProvider(url), maxScale: PhotoViewComputedScale.covered,
maxScale: PhotoViewComputedScale.covered, minScale: PhotoViewComputedScale.contained,
minScale: PhotoViewComputedScale.contained, heroAttributes: PhotoViewHeroAttributes(
heroAttributes: PhotoViewHeroAttributes( tag: url,
tag: url,
),
), ),
); );
} }
lib/src/image_attachment.dart
+12 -7
View File
@@ -39,13 +39,18 @@ class ImageAttachment extends StatelessWidget {
Expanded( Expanded(
child: GestureDetector( child: GestureDetector(
onTap: () { onTap: () {
Navigator.push(context, MaterialPageRoute(builder: (_) { Navigator.push(
return FullScreenImage( context,
url: attachment.imageUrl ?? MaterialPageRoute(
attachment.assetUrl ?? builder: (_) {
attachment.thumbUrl, return FullScreenImage(
); url: attachment.imageUrl ??
})); attachment.assetUrl ??
attachment.thumbUrl,
);
},
),
);
}, },
child: CachedNetworkImage( child: CachedNetworkImage(
height: size?.height, height: size?.height,
lib/src/image_group.dart
+109 -52
View File
@@ -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:flutter/material.dart';
import 'package:stream_chat/stream_chat.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 { class ImageGroup extends StatelessWidget {
const ImageGroup({ const ImageGroup({
Key key, Key key,
@required this.imageBuilder,
@required this.images, @required this.images,
@required this.message, @required this.message,
this.size, this.size,
}) : super(key: key); }) : super(key: key);
final AttachmentBuilder imageBuilder;
final List<Attachment> images; final List<Attachment> images;
final Message message; final Message message;
final Size size; final Size size;
@@ -20,72 +21,77 @@ class ImageGroup extends StatelessWidget {
Widget build(BuildContext context) { Widget build(BuildContext context) {
return ConstrainedBox( return ConstrainedBox(
constraints: BoxConstraints.loose(size), constraints: BoxConstraints.loose(size),
child: Column( child: Flex(
mainAxisSize: MainAxisSize.min, direction: Axis.vertical,
children: <Widget>[ children: <Widget>[
FittedBox( Flexible(
fit: BoxFit.cover, flex: 1,
child: Row( fit: FlexFit.tight,
mainAxisSize: MainAxisSize.min, child: Flex(
crossAxisAlignment: CrossAxisAlignment.stretch,
direction: Axis.horizontal,
children: [ children: [
imageBuilder( Flexible(
context, flex: 1,
message, fit: FlexFit.tight,
images[0], child: _buildImage(context, 0),
), ),
Padding( Flexible(
padding: const EdgeInsets.only(left: 4.0), flex: 1,
child: imageBuilder( fit: FlexFit.tight,
context, child: Padding(
message, padding: const EdgeInsets.only(left: 2.0),
images[1], child: _buildImage(context, 1),
), ),
), ),
], ],
), ),
), ),
if (images.length >= 3) if (images.length >= 3)
Padding( Flexible(
padding: const EdgeInsets.only(top: 2.0), fit: FlexFit.tight,
child: FittedBox( flex: 1,
fit: BoxFit.cover, child: Padding(
child: Row( padding: const EdgeInsets.only(top: 2.0),
mainAxisSize: MainAxisSize.min, child: Flex(
direction: Axis.horizontal,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[ children: <Widget>[
imageBuilder( Flexible(
context, fit: FlexFit.tight,
message, flex: 1,
images[2], child: _buildImage(context, 2),
), ),
if (images.length >= 4) if (images.length >= 4)
Padding( Flexible(
padding: const EdgeInsets.only(left: 4.0), fit: FlexFit.tight,
child: Stack( flex: 1,
children: <Widget>[ child: Padding(
imageBuilder( padding: const EdgeInsets.only(left: 2.0),
context, child: Stack(
message, fit: StackFit.expand,
images[3], children: <Widget>[
), _buildImage(context, 3),
if (images.length > 4) if (images.length > 4)
Positioned.fill( Positioned.fill(
child: Material( child: GestureDetector(
color: Colors.black38, onTap: () => _onTap(context, 3),
child: InkWell( child: Material(
onTap: () {}, color: Colors.black38,
child: Center( child: Center(
child: Text( child: Text(
'${images.length - 4} +', '${images.length - 4} +',
style: TextStyle( style: TextStyle(
color: Colors.white, color: Colors.white,
fontSize: 28, 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,
),
);
}
} }
lib/src/message_widget.dart
+2 -3
View File
@@ -530,17 +530,16 @@ class _MessageWidgetState extends State<MessageWidget> {
.toList(); .toList();
if (images.length > 1) { if (images.length > 1) {
final imageBuilder = widget.attachmentBuilders['image'];
return [ return [
wrapAttachmentWidget( wrapAttachmentWidget(
context, context,
Material( Material(
color: widget.messageTheme.messageBackgroundColor, color: widget.messageTheme.messageBackgroundColor,
child: ImageGroup( child: ImageGroup(
size: Size.fromWidth( size: Size(
MediaQuery.of(context).size.width * 0.8, MediaQuery.of(context).size.width * 0.8,
MediaQuery.of(context).size.height * 0.3,
), ),
imageBuilder: imageBuilder,
images: images, images: images,
message: widget.message, message: widget.message,
), ),
pubspec.yaml
+1
View File
@@ -30,6 +30,7 @@ dependencies:
line_awesome_icons: ^1.0.4+2 line_awesome_icons: ^1.0.4+2
http_parser: ^3.1.4 http_parser: ^3.1.4
flutter_slidable: ^0.5.4 flutter_slidable: ^0.5.4
carousel_slider: ^2.2.1
flutter: flutter:
assets: assets: