mirror of
https://github.com/wger-project/flutter.git
synced 2026-02-18 00:17:48 +01:00
Add MasonryGridView to the Gallery
This commit is contained in:
@@ -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,
|
||||
),
|
||||
);
|
||||
}),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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:
|
||||
|
||||
@@ -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:
|
||||
|
||||
Reference in New Issue
Block a user