Add MasonryGridView to the Gallery

This commit is contained in:
Aaliya Ali
2022-10-01 23:15:19 +05:30
parent 6bddff8c05
commit 504b4a76c9
3 changed files with 76 additions and 67 deletions

View File

@@ -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<GalleryProvider>(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<GalleryProvider>(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,
),
);
}),
);
}
}

View File

@@ -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:

View File

@@ -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: