Map location with an animated wave.

anim_map_location.dart

import 'package:flutter/material.dart';
import 'dart:async';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.black12,
        body: Center(
          child: Stack(
            overflow: Overflow.visible,
            children: [
              Image.network(
                'https://cdn.images.express.co.uk'
                '/img/dynamic/24/590x/secondary'
                '/google-maps-1890938.jpg?r=1559306062256',
                width: 400,
                height: 237,
              ),
              Positioned(
                left: 170,
                top: 160,
                child: AnimatedLocation(
                  markerSize: 40,
                  scale: 1,
                  waveInitSize: 20,
                  waveLength: 20,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class AnimatedLocation extends StatefulWidget {
  const AnimatedLocation({
    this.markerSize = 40,
    this.scale = 1,
    this.waveInitSize = 20,
    this.waveLength = 20,
  }) : super();

  final duration = const Duration(milliseconds: 500);

  final double markerSize;
  final double scale;
  final double waveInitSize;
  final double waveLength;

  @override
  _AnimatedLocationState createState() => _AnimatedLocationState();
}

class _AnimatedLocationState extends State<AnimatedLocation> {
  bool grow = true;

  @override
  void initState() {
    super.initState();
    Timer.periodic(
      widget.duration,
      (t) => setState(() => grow = !grow),
    );
  }

  @override
  Widget build(BuildContext context) {
    double endSz =
        (widget.waveInitSize + (grow ? widget.waveLength : 0)) * widget.scale;
    double mrkSz = widget.markerSize * widget.scale;

    return Stack(
      overflow: Overflow.visible,
      children: [
        SizedBox(),
        AnimatedPositioned(
          left: -(endSz / 2),
          top: -(endSz / 2),
          width: endSz,
          height: endSz,
          duration: widget.duration,
          curve: Curves.easeOut,
          child: FittedBox(
            child: AnimatedOpacity(
              opacity: grow ? 0 : 1,
              duration: widget.duration,
              curve: Curves.easeIn,
              child: Icon(
                Icons.panorama_fish_eye,
                color: Colors.grey,
              ),
            ),
          ),
        ),
        Positioned(
          left: -(mrkSz / 2),
          top: -(mrkSz * 0.92),
          child: Icon(
            Icons.location_on,
            color: Colors.blue,
            size: mrkSz,
          ),
        ),
      ],
    );
  }
}