add carousel on tap
This commit is contained in:
Salvatore Giordano
@@ -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,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
|
||||
+109
-52
@@ -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<Attachment> 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: <Widget>[
|
||||
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: <Widget>[
|
||||
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: <Widget>[
|
||||
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: <Widget>[
|
||||
_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,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -530,17 +530,16 @@ class _MessageWidgetState extends State<MessageWidget> {
|
||||
.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,
|
||||
),
|
||||
|
||||
@@ -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:
|
||||
|
||||
Reference in New Issue
Block a user