From 504b4a76c9fdf6d067a54d320491eeb069199742 Mon Sep 17 00:00:00 2001 From: Aaliya Ali Date: Sat, 1 Oct 2022 23:15:19 +0530 Subject: [PATCH 1/2] Add MasonryGridView to the Gallery --- lib/widgets/gallery/overview.dart | 135 +++++++++++++++--------------- pubspec.lock | 7 ++ pubspec.yaml | 1 + 3 files changed, 76 insertions(+), 67 deletions(-) diff --git a/lib/widgets/gallery/overview.dart b/lib/widgets/gallery/overview.dart index b6fd6a277..8aac73f50 100644 --- a/lib/widgets/gallery/overview.dart +++ b/lib/widgets/gallery/overview.dart @@ -19,6 +19,7 @@ import 'package:flutter/material.dart'; import 'package:flutter/widgets.dart'; import 'package:flutter_gen/gen_l10n/app_localizations.dart'; +import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart'; import 'package:intl/intl.dart'; import 'package:provider/provider.dart'; import 'package:wger/providers/gallery.dart'; @@ -35,76 +36,76 @@ class Gallery extends StatelessWidget { return Padding( padding: const EdgeInsets.all(5), - child: GridView.count( - crossAxisCount: 2, - mainAxisSpacing: 5, - crossAxisSpacing: 5, - children: List.generate(provider.images.length, (index) { - final currentImage = provider.images[index]; + child: MasonryGridView.count( + crossAxisCount: 2, + mainAxisSpacing: 5, + crossAxisSpacing: 5, + itemCount: provider.images.length, + itemBuilder: (context, index) { + final currentImage = provider.images[index]; - return GestureDetector( - onTap: () { - showModalBottomSheet( - builder: (context) => Material( - child: Container( - key: Key('image-${currentImage.id}-detail'), - padding: const EdgeInsets.all(10), - color: Colors.white, - child: Column( - children: [ - Text( - DateFormat.yMd(Localizations.localeOf(context).languageCode) - .format(currentImage.date), - style: Theme.of(context).textTheme.headline5, - ), - Expanded( - child: Image.network(currentImage.url!), - ), - Padding( - padding: const EdgeInsets.symmetric(vertical: 8), - child: Text(currentImage.description), - ), - Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - IconButton( - icon: const Icon(Icons.delete), - onPressed: () { - Provider.of(context, listen: false) - .deleteImage(currentImage); - Navigator.of(context).pop(); - }), - IconButton( - icon: const Icon(Icons.edit), - onPressed: () { - Navigator.pushNamed( - context, - FormScreen.routeName, - arguments: FormScreenArguments( - AppLocalizations.of(context).edit, - ImageForm(currentImage), - hasListView: true, - ), - ); - }), - ], - ) - ], + return GestureDetector( + onTap: () { + showModalBottomSheet( + builder: (context) => Material( + child: Container( + key: Key('image-${currentImage.id}-detail'), + padding: const EdgeInsets.all(10), + color: Colors.white, + child: Column( + children: [ + Text( + DateFormat.yMd(Localizations.localeOf(context).languageCode) + .format(currentImage.date), + style: Theme.of(context).textTheme.headline5, + ), + Expanded( + child: Image.network(currentImage.url!), + ), + Padding( + padding: const EdgeInsets.symmetric(vertical: 8), + child: Text(currentImage.description), + ), + Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + IconButton( + icon: const Icon(Icons.delete), + onPressed: () { + Provider.of(context, listen: false) + .deleteImage(currentImage); + Navigator.of(context).pop(); + }), + IconButton( + icon: const Icon(Icons.edit), + onPressed: () { + Navigator.pushNamed( + context, + FormScreen.routeName, + arguments: FormScreenArguments( + AppLocalizations.of(context).edit, + ImageForm(currentImage), + hasListView: true, + ), + ); + }), + ], + ) + ], + ), ), ), - ), - context: context, - ); - }, - child: FadeInImage( - key: Key('image-${currentImage.id}'), - placeholder: const AssetImage('assets/images/placeholder.png'), - image: NetworkImage(currentImage.url!), - fit: BoxFit.cover, - ), - ); - }), - ), + context: context, + ); + }, + child: FadeInImage( + key: Key('image-${currentImage.id}'), + placeholder: const AssetImage('assets/images/placeholder.png'), + image: NetworkImage(currentImage.url!), + fit: BoxFit.cover, + ), + ); + }), ); } } diff --git a/pubspec.lock b/pubspec.lock index 4d4de47e8..2a8af10dc 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -396,6 +396,13 @@ packages: url: "https://pub.dartlang.org" source: hosted version: "2.0.5" + flutter_staggered_grid_view: + dependency: "direct main" + description: + name: flutter_staggered_grid_view + url: "https://pub.dartlang.org" + source: hosted + version: "0.6.2" flutter_svg: dependency: transitive description: diff --git a/pubspec.yaml b/pubspec.yaml index a7a393b37..4a47fe12a 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -54,6 +54,7 @@ dependencies: url_launcher: ^6.1.5 flutter_barcode_scanner: ^2.0.0 video_player: ^2.4.7 + flutter_staggered_grid_view: ^0.6.2 dev_dependencies: flutter_test: From 2bc862c9975af52f4884f7124d8e966468db7d97 Mon Sep 17 00:00:00 2001 From: Aaliya Ali Date: Wed, 19 Oct 2022 13:14:09 +0530 Subject: [PATCH 2/2] Fix Gallery Screen Test --- test/gallery/gallery_screen_test.dart | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/test/gallery/gallery_screen_test.dart b/test/gallery/gallery_screen_test.dart index f75f47051..dfb08a16d 100644 --- a/test/gallery/gallery_screen_test.dart +++ b/test/gallery/gallery_screen_test.dart @@ -18,6 +18,7 @@ import 'package:flutter/material.dart'; import 'package:flutter_gen/gen_l10n/app_localizations.dart'; +import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:mockito/annotations.dart'; import 'package:mockito/mockito.dart'; @@ -57,7 +58,8 @@ void main() { testWidgets('Test the widgets on the gallery screen', (WidgetTester tester) async { await mockNetworkImagesFor(() => tester.pumpWidget(createScreen())); - expect(find.byType(GestureDetector), findsNWidgets(4)); + expect(find.byType(SliverMasonryGrid), findsOneWidget); + expect(find.byType(GestureDetector, skipOffstage: false), findsNWidgets(4)); }); testWidgets('Test opening the form for an existing image', (WidgetTester tester) async {