diff --git a/lib/src/full_screen_image.dart b/lib/src/full_screen_image.dart index b616c17a..c88053f9 100644 --- a/lib/src/full_screen_image.dart +++ b/lib/src/full_screen_image.dart @@ -112,6 +112,7 @@ class _FullScreenImageState extends State ImageFooter( currentPage: _currentPage, totalPages: widget.urls.length, + urls: widget.urls, ), ], ), diff --git a/lib/src/image_footer.dart b/lib/src/image_footer.dart index fade96bf..668f556f 100644 --- a/lib/src/image_footer.dart +++ b/lib/src/image_footer.dart @@ -1,3 +1,4 @@ +import 'package:cached_network_image/cached_network_image.dart'; import 'package:flutter/material.dart'; import 'package:stream_chat/stream_chat.dart'; import 'package:stream_chat_flutter/src/back_button.dart'; @@ -24,6 +25,8 @@ class ImageFooter extends StatelessWidget { final int currentPage; final int totalPages; + final List urls; + /// Creates a channel header ImageFooter({ Key key, @@ -32,6 +35,7 @@ class ImageFooter extends StatelessWidget { this.onImageTap, this.currentPage = 0, this.totalPages = 0, + this.urls, }) : preferredSize = Size.fromHeight(kToolbarHeight), super(key: key); @@ -39,7 +43,8 @@ class ImageFooter extends StatelessWidget { Widget build(BuildContext context) { return SafeArea( child: Container( - color: StreamChatTheme.of(context).channelTheme.channelHeaderTheme.color, + color: + StreamChatTheme.of(context).channelTheme.channelHeaderTheme.color, padding: EdgeInsets.symmetric(vertical: 8.0), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, @@ -77,7 +82,9 @@ class ImageFooter extends StatelessWidget { StreamIcons.grid, color: Colors.black, ), - onPressed: () {}, + onPressed: () { + _buildPhotosModal(context); + }, ), ], ), @@ -128,6 +135,73 @@ class ImageFooter extends StatelessWidget { ); } + Widget _buildPhotosModal(context) { + showModalBottomSheet( + context: context, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(16.0), + ), + builder: (context) { + return Column( + mainAxisSize: MainAxisSize.min, + children: [ + Container( + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.only( + topRight: Radius.circular(8.0), + topLeft: Radius.circular(8.0), + ) + ), + child: Stack( + children: [ + Center( + child: Padding( + padding: const EdgeInsets.all(16.0), + child: Text( + 'Photos', + style: TextStyle( + fontSize: 16.0, + fontWeight: FontWeight.w700, + color: Colors.black, + ), + ), + ), + ), + Align( + alignment: Alignment.centerRight, + child: IconButton( + icon: Icon(StreamIcons.close, color: Colors.black,), + onPressed: () { + Navigator.pop(context); + }, + ), + ), + ], + ), + ), + Container( + color: Colors.white, + child: GridView.builder( + shrinkWrap: true, + physics: NeverScrollableScrollPhysics(), + itemBuilder: (context, position) { + return Padding( + padding: const EdgeInsets.all(1.0), + child: AspectRatio(child: CachedNetworkImage(imageUrl: urls[position]), aspectRatio: 1.0,), + ); + }, + itemCount: urls.length, + gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( + crossAxisCount: 3), + ), + ), + ], + ); + }, + ); + } + @override final Size preferredSize; } diff --git a/lib/src/image_group.dart b/lib/src/image_group.dart index 4592d94d..a97bde81 100644 --- a/lib/src/image_group.dart +++ b/lib/src/image_group.dart @@ -111,7 +111,7 @@ class ImageGroup extends StatelessWidget { context, MaterialPageRoute( builder: (context) => - FullScreenImage(urls: images.map((e) => e.imageUrl).toList(), + FullScreenImage(urls: images.map((e) => e.imageUrl ?? e.thumbUrl ?? e.assetUrl).toList(), startIndex: index, userName: message.user.name, sentAt: message.createdAt,