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/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: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,
),
);
}
}