TesteurManiak/flutter_map_animations

技术话题

# animation # dart # flutter

使用的依赖

依赖清单 5 项

flutter{"sdk":"flutter"}
flutter_map^8.3.0
latlong2>=0.9.1 <0.11.0
fd_lints开发依赖^3.0.0
flutter_test开发依赖{"sdk":"flutter"}

原始 README

以下为英文项目原文快照，最新内容请访问 GitHub。

展开 / 收起项目 README

Flutter Map Animations

Pub Version (including pre-releases)

Animation utility for the flutter_map package.

Try the example app

Documentation

AnimatedMapController

Just create an AnimatedMapController and you're good to go:

class _MyWidgetState extends State<MyWidget> with TickerProviderStateMixin {
    late final _animatedMapController = AnimatedMapController(vsync: this);

    // ...
}

You can specify globally the animation's duration, curve and if previous animations should be stopped with cancelPreviousAnimations:

AnimatedMapController(
    vsync: this,
    duration: const Duration(milliseconds: 500),
    curve: Curves.easeInOut,
    cancelPreviousAnimations: true, // Default to false
);

And add it to your FlutterMap widget:

FlutterMap(
    mapController: _animatedMapController.mapController,
    // ...
)

Animated Movement

Rotation	Zoom	Center on point
https://github.com/TesteurManiak/flutter_map_animations/blob/main/gifs/rotate.gif?raw=true	https://github.com/TesteurManiak/flutter_map_animations/blob/main/gifs/zoom.gif?raw=true	https://github.com/TesteurManiak/flutter_map_animations/blob/main/gifs/center-on-point.gif?raw=true

Check the AnimatedMapController API for more!

AnimatedMarkerLayer & AnimatedMarker

AnimatedMarker
https://raw.githubusercontent.com/TesteurManiak/flutter_map_animations/main/gifs/animated-marker.gif

FlutterMap(
    mapController: _animatedMapController.mapController,
    children: [
        TileLayer(
            urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
            userAgentPackageName: 'com.example.app',
        ),
        AnimatedMarkerLayer(
            markers: [
                AnimatedMarker(
                    point: LatLng(51.509364, -0.128928),
                    builder: (_, animation) {
                        final size = 50.0 * animation.value;
                        return Icon(
                            Icons.location_on,
                            size: size,
                        );
                    },
                ),
            ],
        ),
    ],
)

Migration Guide

v0.5.0

With flutter_map v6 some parameters have been removed or renamed:

AnimatedMarker.rotateOrigin, AnimatedMarker.anchorPos have been removed
AnimatedMarker.rotateAlignment has been renamed to AnimatedMarker.alignment
AnimatedMarkerLayer.rotateOrigin, AnimatedMarkerLayer.anchorPos have been removed
AnimatedMarkerLayer.rotateAlignment has been renamed to AnimatedMarkerLayer.alignment

v0.4.0

With flutter_map v5 it's not possible anymore to extend MapControllerImpl which was used to use the AnimatedMapController directly as a MapController in the FlutterMap widget. Now an instance of MapController is created internally or can be passed as a parameter to the AnimatedMapController constructor. You can access it with the mapController getter:

late final _animatedMapController = AnimatedMapController(vsync: this);

@override
Widget build(BuildContext context) {
    return FlutterMap(
        mapController: _animatedMapController.mapController,
        // ...
    );
}