info: added staggered animation to metadata section

lib/main.dart

@@ -43,6 +43,7 @@ class AvesApp extends StatefulWidget {
 
 class _AvesAppState extends State<AvesApp> {
   Future<void> _appSetup;
+
   // observers are not registered when using the same list object with different items
   // the list itself needs to be reassigned
   List<NavigatorObserver> _navigatorObservers = [];

lib/utils/durations.dart

@@ -7,6 +7,8 @@ class Durations {
   static const sweeperOpacityAnimation = Duration(milliseconds: 150);
   static const sweepingAnimation = Duration(milliseconds: 650);
   static const popupMenuAnimation = Duration(milliseconds: 300); // ref _PopupMenuRoute._kMenuDuration
+  static const dialogTransitionAnimation = Duration(milliseconds: 150); // ref `transitionDuration` in `showDialog()`
+
   static const staggeredAnimation = Duration(milliseconds: 375);
   static const dialogFieldReachAnimation = Duration(milliseconds: 300);
 

lib/widgets/app_debug_page.dart

@@ -12,7 +12,7 @@ import 'package:aves/utils/android_file_utils.dart';
 import 'package:aves/utils/file_utils.dart';
 import 'package:aves/widgets/common/data_providers/media_query_data_provider.dart';
 import 'package:aves/widgets/common/icons.dart';
-import 'package:aves/widgets/fullscreen/info/info_page.dart';
+import 'package:aves/widgets/fullscreen/info/common.dart';
 import 'package:firebase_analytics/firebase_analytics.dart';
 import 'package:firebase_core/firebase_core.dart';
 import 'package:firebase_crashlytics/firebase_crashlytics.dart';

lib/widgets/common/image_providers/thumbnail_provider.dart

@@ -90,7 +90,8 @@ class ThumbnailProviderKey {
     return ThumbnailProviderKey(
       uri: entry.uri,
       mimeType: entry.mimeType,
-      dateModifiedSecs: entry.dateModifiedSecs ?? -1, // can happen in viewer mode
+      // `dateModifiedSecs` can be missing in viewer mode
+      dateModifiedSecs: entry.dateModifiedSecs ?? -1,
       rotationDegrees: entry.rotationDegrees,
       isFlipped: entry.isFlipped,
       extent: extent,

lib/widgets/fullscreen/debug/db.dart

@@ -1,7 +1,7 @@
 import 'package:aves/model/image_entry.dart';
 import 'package:aves/model/image_metadata.dart';
 import 'package:aves/model/metadata_db.dart';
-import 'package:aves/widgets/fullscreen/info/info_page.dart';
+import 'package:aves/widgets/fullscreen/info/common.dart';
 import 'package:flutter/material.dart';
 
 class DbTab extends StatefulWidget {

lib/widgets/fullscreen/debug/metadata.dart

@@ -5,7 +5,7 @@ import 'package:aves/model/image_entry.dart';
 import 'package:aves/services/metadata_service.dart';
 import 'package:aves/utils/constants.dart';
 import 'package:aves/widgets/common/aves_expansion_tile.dart';
-import 'package:aves/widgets/fullscreen/info/info_page.dart';
+import 'package:aves/widgets/fullscreen/info/common.dart';
 import 'package:flutter/material.dart';
 
 class MetadataTab extends StatefulWidget {

lib/widgets/fullscreen/fullscreen_body.dart

@@ -11,6 +11,7 @@ import 'package:aves/widgets/collection/collection_page.dart';
 import 'package:aves/widgets/common/action_delegates/entry_action_delegate.dart';
 import 'package:aves/widgets/fullscreen/image_page.dart';
 import 'package:aves/widgets/fullscreen/info/info_page.dart';
+import 'package:aves/widgets/fullscreen/info/notifications.dart';
 import 'package:aves/widgets/fullscreen/overlay/bottom.dart';
 import 'package:aves/widgets/fullscreen/overlay/top.dart';
 import 'package:aves/widgets/fullscreen/overlay/video.dart';

lib/widgets/fullscreen/fullscreen_debug_page.dart

@@ -5,7 +5,7 @@ import 'package:aves/widgets/common/image_providers/thumbnail_provider.dart';
 import 'package:aves/widgets/common/image_providers/uri_picture_provider.dart';
 import 'package:aves/widgets/fullscreen/debug/db.dart';
 import 'package:aves/widgets/fullscreen/debug/metadata.dart';
-import 'package:aves/widgets/fullscreen/info/info_page.dart';
+import 'package:aves/widgets/fullscreen/info/common.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:tuple/tuple.dart';

lib/widgets/fullscreen/info/basic_section.dart

@@ -9,7 +9,7 @@ import 'package:aves/model/source/collection_lens.dart';
 import 'package:aves/utils/constants.dart';
 import 'package:aves/utils/file_utils.dart';
 import 'package:aves/widgets/common/aves_filter_chip.dart';
-import 'package:aves/widgets/fullscreen/info/info_page.dart';
+import 'package:aves/widgets/fullscreen/info/common.dart';
 import 'package:collection/collection.dart';
 import 'package:flutter/material.dart';
 import 'package:intl/intl.dart';

lib/widgets/fullscreen/info/common.dart

@@ -0,0 +1,90 @@
+import 'package:aves/widgets/common/aves_filter_chip.dart';
+import 'package:flutter/gestures.dart';
+import 'package:flutter/material.dart';
+
+class SectionRow extends StatelessWidget {
+  final IconData icon;
+
+  const SectionRow(this.icon);
+
+  @override
+  Widget build(BuildContext context) {
+    const dim = 32.0;
+    Widget buildDivider() => SizedBox(
+          width: dim,
+          child: Divider(
+            thickness: AvesFilterChip.outlineWidth,
+            color: Colors.white70,
+          ),
+        );
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: [
+        buildDivider(),
+        Padding(
+          padding: EdgeInsets.all(16),
+          child: Icon(
+            icon,
+            size: dim,
+          ),
+        ),
+        buildDivider(),
+      ],
+    );
+  }
+}
+
+class InfoRowGroup extends StatefulWidget {
+  final Map<String, String> keyValues;
+  final int maxValueLength;
+
+  const InfoRowGroup(
+    this.keyValues, {
+    this.maxValueLength = 0,
+  });
+
+  @override
+  _InfoRowGroupState createState() => _InfoRowGroupState();
+}
+
+class _InfoRowGroupState extends State<InfoRowGroup> {
+  final List<String> _expandedKeys = [];
+
+  Map<String, String> get keyValues => widget.keyValues;
+
+  int get maxValueLength => widget.maxValueLength;
+
+  @override
+  Widget build(BuildContext context) {
+    if (keyValues.isEmpty) return SizedBox.shrink();
+    final lastKey = keyValues.keys.last;
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        SelectableText.rich(
+          TextSpan(
+            children: keyValues.entries.expand(
+              (kv) {
+                final key = kv.key;
+                var value = kv.value;
+                final showPreviewOnly = maxValueLength > 0 && value.length > maxValueLength && !_expandedKeys.contains(key);
+                if (showPreviewOnly) {
+                  value = '${value.substring(0, maxValueLength)}…';
+                }
+                return [
+                  TextSpan(text: '$key     ', style: TextStyle(color: Colors.white70, height: 1.7)),
+                  TextSpan(text: '$value${key == lastKey ? '' : '\n'}', recognizer: showPreviewOnly ? _buildTapRecognizer(key) : null),
+                ];
+              },
+            ).toList(),
+          ),
+          style: TextStyle(fontFamily: 'Concourse'),
+        ),
+      ],
+    );
+  }
+
+  GestureRecognizer _buildTapRecognizer(String key) {
+    return TapGestureRecognizer()..onTap = () => setState(() => _expandedKeys.add(key));
+  }
+}

lib/widgets/fullscreen/info/info_page.dart

@@ -1,15 +1,19 @@
+import 'dart:collection';
+
 import 'package:aves/model/filters/filters.dart';
 import 'package:aves/model/image_entry.dart';
 import 'package:aves/model/source/collection_lens.dart';
+import 'package:aves/services/metadata_service.dart';
 import 'package:aves/utils/durations.dart';
-import 'package:aves/widgets/common/aves_filter_chip.dart';
 import 'package:aves/widgets/common/data_providers/media_query_data_provider.dart';
 import 'package:aves/widgets/common/icons.dart';
 import 'package:aves/widgets/fullscreen/info/basic_section.dart';
 import 'package:aves/widgets/fullscreen/info/location_section.dart';
 import 'package:aves/widgets/fullscreen/info/metadata_section.dart';
-import 'package:flutter/gestures.dart';
+import 'package:aves/widgets/fullscreen/info/notifications.dart';
+import 'package:collection/collection.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_staggered_animations/flutter_staggered_animations.dart';
 import 'package:provider/provider.dart';
 import 'package:tuple/tuple.dart';
 
@@ -32,9 +36,44 @@ class InfoPage extends StatefulWidget {
 class InfoPageState extends State<InfoPage> {
   final ScrollController _scrollController = ScrollController();
   bool _scrollStartFromTop = false;
+  List<MetadataDirectory> _metadata = [];
+  String _loadedMetadataUri;
 
   CollectionLens get collection => widget.collection;
 
+  ImageEntry get entry => widget.entryNotifier.value;
+
+  bool get isVisible => widget.visibleNotifier.value;
+
+  @override
+  void initState() {
+    super.initState();
+    _registerWidget(widget);
+    _getMetadata();
+  }
+
+  @override
+  void didUpdateWidget(InfoPage oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    _unregisterWidget(oldWidget);
+    _registerWidget(widget);
+    _getMetadata();
+  }
+
+  @override
+  void dispose() {
+    _unregisterWidget(widget);
+    super.dispose();
+  }
+
+  void _registerWidget(InfoPage widget) {
+    widget.visibleNotifier.addListener(_getMetadata);
+  }
+
+  void _unregisterWidget(InfoPage widget) {
+    widget.visibleNotifier.removeListener(_getMetadata);
+  }
+
   @override
   Widget build(BuildContext context) {
     const horizontalPadding = EdgeInsets.symmetric(horizontal: 8);
@@ -96,10 +135,14 @@ class InfoPageState extends State<InfoPage> {
                           );
                     final metadataSliver = MetadataSectionSliver(
                       entry: entry,
-                      visibleNotifier: widget.visibleNotifier,
+                      metadata: _metadata,
                     );
 
-                    return CustomScrollView(
+                    return AnimationLimiter(
+                      // we update the limiter key after fetching the metadata of a new entry,
+                      // in order to restart the staggered animation of the metadata section
+                      key: Key(_loadedMetadataUri),
+                      child: CustomScrollView(
                         controller: _scrollController,
                         slivers: [
                           appBar,
@@ -112,6 +155,7 @@ class InfoPageState extends State<InfoPage> {
                             sliver: metadataSliver,
                           ),
                         ],
+                      ),
                     );
                   },
                 );
@@ -159,99 +203,32 @@ class InfoPageState extends State<InfoPage> {
     if (collection == null) return;
     FilterNotification(filter).dispatch(context);
   }
-}
 
-class SectionRow extends StatelessWidget {
+  // fetch and hold metadata in the page widget and not in the section sliver,
-  final IconData icon;
+  // so that we can refresh and limit the staggered animation of the metadata section
-
+  Future<void> _getMetadata() async {
-  const SectionRow(this.icon);
+    if (entry == null) return;
-
+    if (_loadedMetadataUri == entry.uri) return;
-  @override
+    if (isVisible) {
-  Widget build(BuildContext context) {
+      final rawMetadata = await MetadataService.getAllMetadata(entry) ?? {};
-    const dim = 32.0;
+      _metadata = rawMetadata.entries.map((dirKV) {
-    Widget buildDivider() => SizedBox(
+        final directoryName = dirKV.key as String ?? '';
-          width: dim,
+        final rawTags = dirKV.value as Map ?? {};
-          child: Divider(
+        final tags = SplayTreeMap.of(Map.fromEntries(rawTags.entries.map((tagKV) {
-            thickness: AvesFilterChip.outlineWidth,
+          final value = tagKV.value as String ?? '';
-            color: Colors.white70,
+          if (value.isEmpty) return null;
-          ),
+          final tagName = tagKV.key as String ?? '';
-        );
+          return MapEntry(tagName, value);
-    return Row(
+        }).where((kv) => kv != null)));
-      mainAxisAlignment: MainAxisAlignment.center,
+        return MetadataDirectory(directoryName, tags);
-      children: [
+      }).toList()
-        buildDivider(),
+        ..sort((a, b) => compareAsciiUpperCase(a.name, b.name));
-        Padding(
+      _loadedMetadataUri = entry.uri;
-          padding: EdgeInsets.all(16),
+    } else {
-          child: Icon(
+      _metadata = [];
-            icon,
+      _loadedMetadataUri = null;
-            size: dim,
+    }
-          ),
+    // _expandedDirectoryNotifier.value = null;
-        ),
+    if (mounted) setState(() {});
-        buildDivider(),
-      ],
-    );
   }
 }
-
-class InfoRowGroup extends StatefulWidget {
-  final Map<String, String> keyValues;
-  final int maxValueLength;
-
-  const InfoRowGroup(
-    this.keyValues, {
-    this.maxValueLength = 0,
-  });
-
-  @override
-  _InfoRowGroupState createState() => _InfoRowGroupState();
-}
-
-class _InfoRowGroupState extends State<InfoRowGroup> {
-  final List<String> _expandedKeys = [];
-
-  Map<String, String> get keyValues => widget.keyValues;
-
-  int get maxValueLength => widget.maxValueLength;
-
-  @override
-  Widget build(BuildContext context) {
-    if (keyValues.isEmpty) return SizedBox.shrink();
-    final lastKey = keyValues.keys.last;
-    return Column(
-      crossAxisAlignment: CrossAxisAlignment.start,
-      children: [
-        SelectableText.rich(
-          TextSpan(
-            children: keyValues.entries.expand(
-              (kv) {
-                final key = kv.key;
-                var value = kv.value;
-                final showPreviewOnly = maxValueLength > 0 && value.length > maxValueLength && !_expandedKeys.contains(key);
-                if (showPreviewOnly) {
-                  value = '${value.substring(0, maxValueLength)}…';
-                }
-                return [
-                  TextSpan(text: '$key     ', style: TextStyle(color: Colors.white70, height: 1.7)),
-                  TextSpan(text: '$value${key == lastKey ? '' : '\n'}', recognizer: showPreviewOnly ? _buildTapRecognizer(key) : null),
-                ];
-              },
-            ).toList(),
-          ),
-          style: TextStyle(fontFamily: 'Concourse'),
-        ),
-      ],
-    );
-  }
-
-  GestureRecognizer _buildTapRecognizer(String key) {
-    return TapGestureRecognizer()..onTap = () => setState(() => _expandedKeys.add(key));
-  }
-}
-
-class BackUpNotification extends Notification {}
-
-class FilterNotification extends Notification {
-  final CollectionFilter filter;
-
-  const FilterNotification(this.filter);
-}

lib/widgets/fullscreen/info/location_section.dart

@@ -5,7 +5,7 @@ import 'package:aves/model/settings/settings.dart';
 import 'package:aves/model/source/collection_lens.dart';
 import 'package:aves/widgets/common/aves_filter_chip.dart';
 import 'package:aves/widgets/common/icons.dart';
-import 'package:aves/widgets/fullscreen/info/info_page.dart';
+import 'package:aves/widgets/fullscreen/info/common.dart';
 import 'package:aves/widgets/fullscreen/info/maps/common.dart';
 import 'package:aves/widgets/fullscreen/info/maps/google_map.dart';
 import 'package:aves/widgets/fullscreen/info/maps/leaflet_map.dart';

lib/widgets/fullscreen/info/maps/common.dart

@@ -1,5 +1,6 @@
 import 'package:aves/model/settings/settings.dart';
 import 'package:aves/services/android_app_service.dart';
+import 'package:aves/utils/durations.dart';
 import 'package:aves/widgets/common/aves_selection_dialog.dart';
 import 'package:aves/widgets/common/borders.dart';
 import 'package:aves/widgets/common/fx/blurred.dart';
@@ -7,6 +8,7 @@ import 'package:aves/widgets/common/icons.dart';
 import 'package:aves/widgets/fullscreen/info/location_section.dart';
 import 'package:aves/widgets/fullscreen/overlay/common.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/scheduler.dart';
 
 class MapDecorator extends StatelessWidget {
   final Widget child;
@@ -76,7 +78,9 @@ class MapButtonPanel extends StatelessWidget {
                         title: 'Map Style',
                       ),
                     );
-                    if (style != null) {
+                    // wait for the dialog to hide because switching to Google Maps layer may block the UI
+                    await Future.delayed(Durations.dialogTransitionAnimation * timeDilation);
+                    if (style != null && style != settings.infoMapStyle) {
                       settings.infoMapStyle = style;
                       MapStyleChangedNotification().dispatch(context);
                     }

lib/widgets/fullscreen/info/metadata_section.dart

@@ -1,92 +1,82 @@
-import 'dart:async';
 import 'dart:collection';
 
 import 'package:aves/model/image_entry.dart';
-import 'package:aves/services/metadata_service.dart';
 import 'package:aves/utils/constants.dart';
+import 'package:aves/utils/durations.dart';
 import 'package:aves/widgets/common/aves_expansion_tile.dart';
 import 'package:aves/widgets/common/icons.dart';
-import 'package:aves/widgets/fullscreen/info/info_page.dart';
+import 'package:aves/widgets/fullscreen/info/common.dart';
 import 'package:aves/widgets/fullscreen/info/metadata_thumbnail.dart';
-import 'package:collection/collection.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_staggered_animations/flutter_staggered_animations.dart';
 
 class MetadataSectionSliver extends StatefulWidget {
   final ImageEntry entry;
-  final ValueNotifier<bool> visibleNotifier;
+  final List<MetadataDirectory> metadata;
 
   const MetadataSectionSliver({
     @required this.entry,
-    @required this.visibleNotifier,
+    @required this.metadata,
   });
 
   @override
-  State<StatefulWidget> createState() => _MetadataSectionSliverState();
+  State<StatefulWidget> createState() => metadataSectionSliverState();
 }
 
-class _MetadataSectionSliverState extends State<MetadataSectionSliver> with AutomaticKeepAliveClientMixin {
+class metadataSectionSliverState extends State<MetadataSectionSliver> with AutomaticKeepAliveClientMixin {
-  List<_MetadataDirectory> _metadata = [];
-  String _loadedMetadataUri;
   final ValueNotifier<String> _expandedDirectoryNotifier = ValueNotifier(null);
 
   ImageEntry get entry => widget.entry;
 
-  bool get isVisible => widget.visibleNotifier.value;
+  List<MetadataDirectory> get metadata => widget.metadata;
 
   // special directory names
   static const exifThumbnailDirectory = 'Exif Thumbnail'; // from metadata-extractor
   static const xmpDirectory = 'XMP'; // from metadata-extractor
   static const mediaDirectory = 'Media'; // additional media (video/audio/images) directory
 
-  @override
-  void initState() {
-    super.initState();
-    _registerWidget(widget);
-    _getMetadata();
-  }
-
-  @override
-  void didUpdateWidget(MetadataSectionSliver oldWidget) {
-    super.didUpdateWidget(oldWidget);
-    _unregisterWidget(oldWidget);
-    _registerWidget(widget);
-    _getMetadata();
-  }
-
-  @override
-  void dispose() {
-    _unregisterWidget(widget);
-    super.dispose();
-  }
-
-  void _registerWidget(MetadataSectionSliver widget) {
-    widget.visibleNotifier.addListener(_getMetadata);
-  }
-
-  void _unregisterWidget(MetadataSectionSliver widget) {
-    widget.visibleNotifier.removeListener(_getMetadata);
-  }
-
   @override
   Widget build(BuildContext context) {
     super.build(context);
 
-    if (_metadata.isEmpty) return SliverToBoxAdapter(child: SizedBox.shrink());
+    if (metadata.isEmpty) return SliverToBoxAdapter(child: SizedBox.shrink());
 
-    final directoriesWithoutTitle = _metadata.where((dir) => dir.name.isEmpty).toList();
+    final directoriesWithoutTitle = metadata.where((dir) => dir.name.isEmpty).toList();
-    final directoriesWithTitle = _metadata.where((dir) => dir.name.isNotEmpty).toList();
+    final directoriesWithTitle = metadata.where((dir) => dir.name.isNotEmpty).toList();
     final untitledDirectoryCount = directoriesWithoutTitle.length;
     return SliverList(
       delegate: SliverChildBuilderDelegate(
         (context, index) {
+          Widget child;
           if (index == 0) {
-            return SectionRow(AIcons.info);
+            child = SectionRow(AIcons.info);
+          } else if (index < untitledDirectoryCount + 1) {
+            child = _buildDirTileWithoutTitle(directoriesWithoutTitle[index - 1]);
+          } else {
+            child = _buildDirTileWithTitle(directoriesWithTitle[index - 1 - untitledDirectoryCount]);
           }
-          if (index < untitledDirectoryCount + 1) {
+          return AnimationConfiguration.staggeredList(
-            final dir = directoriesWithoutTitle[index - 1];
+            position: index,
+            duration: Durations.staggeredAnimation,
+            delay: Durations.staggeredAnimationDelay,
+            child: SlideAnimation(
+              verticalOffset: 50.0,
+              child: FadeInAnimation(
+                child: child,
+              ),
+            ),
+          );
+        },
+        childCount: 1 + metadata.length,
+      ),
+    );
+  }
+
+  Widget _buildDirTileWithoutTitle(MetadataDirectory dir) {
     return InfoRowGroup(dir.tags, maxValueLength: Constants.infoGroupMaxValueLength);
   }
-          final dir = directoriesWithTitle[index - 1 - untitledDirectoryCount];
+
+  Widget _buildDirTileWithTitle(MetadataDirectory dir) {
     Widget thumbnail;
     final prefixChildren = <Widget>[];
     switch (dir.name) {
@@ -131,44 +121,15 @@ class _MetadataSectionSliverState extends State<MetadataSectionSliver> with Auto
         ),
       ],
     );
-        },
-        childCount: 1 + _metadata.length,
-      ),
-    );
-  }
-
-  Future<void> _getMetadata() async {
-    if (_loadedMetadataUri == entry.uri) return;
-    if (isVisible) {
-      final rawMetadata = await MetadataService.getAllMetadata(entry) ?? {};
-      _metadata = rawMetadata.entries.map((dirKV) {
-        final directoryName = dirKV.key as String ?? '';
-        final rawTags = dirKV.value as Map ?? {};
-        final tags = SplayTreeMap.of(Map.fromEntries(rawTags.entries.map((tagKV) {
-          final value = tagKV.value as String ?? '';
-          if (value.isEmpty) return null;
-          final tagName = tagKV.key as String ?? '';
-          return MapEntry(tagName, value);
-        }).where((kv) => kv != null)));
-        return _MetadataDirectory(directoryName, tags);
-      }).toList()
-        ..sort((a, b) => compareAsciiUpperCase(a.name, b.name));
-      _loadedMetadataUri = entry.uri;
-    } else {
-      _metadata = [];
-      _loadedMetadataUri = null;
-    }
-    _expandedDirectoryNotifier.value = null;
-    if (mounted) setState(() {});
   }
 
   @override
   bool get wantKeepAlive => true;
 }
 
-class _MetadataDirectory {
+class MetadataDirectory {
   final String name;
   final SplayTreeMap<String, String> tags;
 
-  const _MetadataDirectory(this.name, this.tags);
+  const MetadataDirectory(this.name, this.tags);
 }

lib/widgets/fullscreen/info/notifications.dart

@@ -0,0 +1,10 @@
+import 'package:aves/model/filters/filters.dart';
+import 'package:flutter/material.dart';
+
+class BackUpNotification extends Notification {}
+
+class FilterNotification extends Notification {
+  final CollectionFilter filter;
+
+  const FilterNotification(this.filter);
+}