Fabio/aves
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

map: icon, density, transition fixes

Browse source
This commit is contained in:
Thibault Deckers 2024-10-18 00:35:29 +02:00
parent 95c279088a
commit 7982c536e4
9 changed files with 86 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
lib/theme/icons.dart
View file

@ -148,7 +148,8 @@ class AIcons {
static final setCover = MdiIcons.imageEditOutline;
static const share = Icons.share_outlined;
static const show = Icons.visibility_outlined;
static final showFullscreen = MdiIcons.arrowExpand;
static final showFullscreenArrows = MdiIcons.arrowExpand;
static const showFullscreenCorners = Icons.fullscreen_outlined;
static const slideshow = Icons.slideshow_outlined;
static const speed = Icons.speed_outlined;
static const stats = Icons.donut_small_outlined;

39
lib/widgets/common/map/buttons/button.dart
View file

@ -1,7 +1,4 @@
import 'package:aves/model/settings/settings.dart';
import 'package:aves/theme/themes.dart';
import 'package:aves/widgets/common/fx/blurred.dart';
import 'package:aves/widgets/common/fx/borders.dart';
import 'package:aves/widgets/common/identity/buttons/overlay_button.dart';
import 'package:aves_map/aves_map.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
@ -22,47 +19,23 @@ class MapOverlayButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final colorScheme = theme.colorScheme;
final blurred = settings.enableBlurEffect;
return Theme(
data: theme.copyWith(
colorScheme: colorScheme.copyWith(
onSurfaceVariant: colorScheme.onSurface,
),
),
child: Selector<MapThemeData, Animation<double>>(
return Selector<MapThemeData, Animation<double>>(
selector: (context, v) => v.scale,
builder: (context, scale, child) => ScaleTransition(
builder: (context, scale, child) => OverlayButton(
scale: scale,
child: child,
child: child!,
),
child: BlurredOval(
enabled: blurred,
child: Material(
type: MaterialType.circle,
color: Themes.overlayBackgroundColor(brightness: Theme.of(context).brightness, blurred: blurred),
child: Ink(
decoration: BoxDecoration(
border: AvesBorder.border(context),
shape: BoxShape.circle,
),
child: Selector<MapThemeData, VisualDensity?>(
child: Selector<MapThemeData, VisualDensity>(
selector: (context, v) => v.visualDensity,
builder: (context, visualDensity, child) => IconButton(
key: buttonKey,
iconSize: 20,
iconSize: 20 + 1.5 * visualDensity.horizontal,
visualDensity: visualDensity,
icon: icon,
onPressed: onPressed,
tooltip: tooltip,
),
),
),
),
),
),
);
}
}

16
lib/widgets/common/map/buttons/panel.dart
View file

@ -52,7 +52,7 @@ class MapButtonPanel extends StatelessWidget {
case MapNavigationButton.map:
if (openMapPage != null) {
navigationButton = MapOverlayButton(
icon: const Icon(AIcons.map),
icon: const Icon(AIcons.showFullscreenCorners),
onPressed: () => openMapPage?.call(context),
tooltip: context.l10n.openMapPageTooltip,
);
@ -62,8 +62,8 @@ class MapButtonPanel extends StatelessWidget {
}
final showCoordinateFilter = context.select<MapThemeData, bool>((v) => v.showCoordinateFilter);
final visualDensity = context.select<MapThemeData, VisualDensity?>((v) => v.visualDensity);
final double padding = visualDensity == VisualDensity.compact ? 4 : 8;
final visualDensity = context.select<MapThemeData, VisualDensity>((v) => v.visualDensity);
final double padding = 8 + visualDensity.horizontal * 2;
return Positioned.fill(
child: TooltipTheme(
@ -133,9 +133,9 @@ class MapButtonPanel extends StatelessWidget {
// key is expected by test driver
child: Column(
children: [
_buildButton(context, MapAction.selectStyle, buttonKey: const Key('map-menu-layers')),
_buildActionButton(context, MapAction.openMapApp),
SizedBox(height: padding),
_buildButton(context, MapAction.openMapApp),
_buildActionButton(context, MapAction.selectStyle, buttonKey: const Key('map-menu-layers')),
],
),
),
@ -148,9 +148,9 @@ class MapButtonPanel extends StatelessWidget {
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
_buildButton(context, MapAction.zoomIn),
_buildActionButton(context, MapAction.zoomIn),
SizedBox(height: padding),
_buildButton(context, MapAction.zoomOut),
_buildActionButton(context, MapAction.zoomOut),
],
),
),
@ -161,7 +161,7 @@ class MapButtonPanel extends StatelessWidget {
);
}
Widget _buildButton(BuildContext context, MapAction action, {Key? buttonKey}) => MapOverlayButton(
Widget _buildActionButton(BuildContext context, MapAction action, {Key? buttonKey}) => MapOverlayButton(
buttonKey: buttonKey,
icon: action.getIcon(),
onPressed: () => MapActionDelegate(controller).onActionSelected(context, action),

48
lib/widgets/common/map/geo_map.dart
View file

@ -20,6 +20,7 @@ import 'package:aves/widgets/common/map/attribution.dart';
import 'package:aves/widgets/common/map/buttons/panel.dart';
import 'package:aves/widgets/common/map/decorator.dart';
import 'package:aves/widgets/common/map/leaflet/map.dart';
import 'package:aves/widgets/common/providers/map_theme_provider.dart';
import 'package:aves/widgets/common/thumbnail/image.dart';
import 'package:aves/widgets/dialogs/selection_dialogs/common.dart';
import 'package:aves/widgets/dialogs/selection_dialogs/single_selection.dart';
@ -245,6 +246,50 @@ class _GeoMapState extends State<GeoMap> {
child = _decorateMap(context, overlay);
}
child = Hero(
tag: 'map',
flightShuttleBuilder: (flightContext, animation, flightDirection, fromHeroContext, toHeroContext) {
final pushing = flightDirection == HeroFlightDirection.push;
final fromMediaQuery = MediaQuery.of(fromHeroContext);
final toMediaQuery = MediaQuery.of(toHeroContext);
final fromRenderBox = fromHeroContext.findRenderObject()! as RenderBox;
final toRenderBox = toHeroContext.findRenderObject()! as RenderBox;
final fromTheme = fromHeroContext.read<MapThemeData>();
final toTheme = toHeroContext.read<MapThemeData>();
return DefaultTextStyle(
style: DefaultTextStyle.of(toHeroContext).style,
child: AnimatedBuilder(
animation: animation,
builder: (context, child) {
final t = pushing ? animation.value : 1 - animation.value;
return MapTheme(
interactive: false,
showCoordinateFilter: false,
navigationButton: toTheme.navigationButton,
visualDensity: VisualDensity.lerp(fromTheme.visualDensity, toTheme.visualDensity, t),
child: MediaQuery(
data: toMediaQuery.copyWith(
padding: EdgeInsets.lerp(fromMediaQuery.padding, toMediaQuery.padding, t),
viewPadding: EdgeInsets.lerp(fromMediaQuery.viewPadding, toMediaQuery.viewPadding, t),
),
child: Align(
alignment: Alignment.topCenter,
child: SizedBox.fromSize(
size: Size.lerp(fromRenderBox.size, toRenderBox.size, t),
child: child,
),
),
),
);
},
child: toHeroContext.widget,
),
);
},
child: child,
);
final mapHeight = context.select<MapThemeData, double?>((v) => v.mapHeight);
child = Column(
crossAxisAlignment: CrossAxisAlignment.start,
@ -258,8 +303,11 @@ class _GeoMapState extends State<GeoMap> {
SafeArea(
top: false,
bottom: false,
child: Padding(
padding: context.select<MapThemeData, EdgeInsets>((v) => v.attributionPadding),
child: Attribution(style: mapStyle),
),
),
],
);

7
lib/widgets/common/providers/map_theme_provider.dart
View file

@ -7,8 +7,9 @@ class MapTheme extends StatelessWidget {
final bool interactive, showCoordinateFilter;
final MapNavigationButton navigationButton;
final Animation<double> scale;
final VisualDensity? visualDensity;
final VisualDensity visualDensity;
final double? mapHeight;
final EdgeInsets attributionPadding;
final Widget child;
const MapTheme({
@ -17,8 +18,9 @@ class MapTheme extends StatelessWidget {
required this.showCoordinateFilter,
required this.navigationButton,
this.scale = kAlwaysCompleteAnimation,
this.visualDensity,
this.visualDensity = VisualDensity.standard,
this.mapHeight,
this.attributionPadding = EdgeInsets.zero,
required this.child,
});
@ -33,6 +35,7 @@ class MapTheme extends StatelessWidget {
scale: scale,
visualDensity: visualDensity,
mapHeight: mapHeight,
attributionPadding: attributionPadding,
);
},
child: child,

2
lib/widgets/common/thumbnail/overlay.dart
View file

@ -108,7 +108,7 @@ class ThumbnailZoomOverlay extends StatelessWidget {
width: interactiveDimension,
height: interactiveDimension,
child: Icon(
AIcons.showFullscreen,
AIcons.showFullscreenArrows,
size: context.select<GridThemeData, double>((t) => t.iconSize),
color: Colors.white70,
),

1
lib/widgets/dialogs/pick_dialogs/location_pick_page.dart
View file

@ -133,6 +133,7 @@ class _ContentState extends State<_Content> with SingleTickerProviderStateMixin
interactive: true,
showCoordinateFilter: false,
navigationButton: MapNavigationButton.back,
attributionPadding: const EdgeInsets.symmetric(horizontal: 8),
child: GeoMap(
controller: _mapController,
collection: openingCollection,

2
lib/widgets/map/map_page.dart
View file

@ -153,6 +153,7 @@ class _ContentState extends State<_Content> with SingleTickerProviderStateMixin
_selectedIndexNotifier.addListener(_onThumbnailIndexChanged);
Future.delayed(ADurations.pageTransitionLoose * timeDilation + const Duration(seconds: 1), () {
if (!mounted) return;
final regionEntries = regionCollection?.sortedEntries ?? [];
final initialEntry = widget.initialEntry ?? regionEntries.firstOrNull;
if (initialEntry != null) {
@ -268,6 +269,7 @@ class _ContentState extends State<_Content> with SingleTickerProviderStateMixin
showCoordinateFilter: true,
navigationButton: canPop ? MapNavigationButton.back : MapNavigationButton.close,
scale: _overlayScale,
attributionPadding: const EdgeInsets.symmetric(horizontal: 8),
child: GeoMap(
// key is expected by test driver
key: const Key('map_view'),

4
plugins/aves_map/lib/src/theme.dart
View file

@ -6,8 +6,9 @@ class MapThemeData {
final bool interactive, showCoordinateFilter;
final MapNavigationButton navigationButton;
final Animation<double> scale;
final VisualDensity? visualDensity;
final VisualDensity visualDensity;
final double? mapHeight;
final EdgeInsets attributionPadding;
const MapThemeData({
required this.interactive,
@ -16,6 +17,7 @@ class MapThemeData {
required this.scale,
required this.visualDensity,
required this.mapHeight,
required this.attributionPadding,
});
static const double markerOuterBorderWidth = 1.5;