dependencies:
  flutter_map: any # or the latest version on Pub

Configure the map using MapOptions and layer options:

  Widget build(BuildContext context) {
    return new FlutterMap(
      options: new MapOptions(
        center: new LatLng(51.5, -0.09),
        zoom: 13.0,
      ),
      layers: [
        new TileLayerOptions(
          urlTemplate: "https://api.tiles.mapbox.com/v4/"
              "{id}/{z}/{x}/{y}@2x.png?access_token={accessToken}",
          additionalOptions: {
            'accessToken': '<PUT_ACCESS_TOKEN_HERE>',
            'id': 'mapbox.streets',
          },
        ),
        new MarkerLayerOptions(
          markers: [
            new Marker(
              width: 80.0,
              height: 80.0,
              point: new LatLng(51.5, -0.09),
              builder: (ctx) =>
              new Container(
                child: new FlutterLogo(),
              ),
            ),
          ],
        ),
      ],
    );
  }

See the flutter_map_example/ folder for a working example app.

Mapbox Tiles

You can use map tiles from a number of free and paid map suppliers, or you can host your own map tiles.

The example uses OpenStreetMap tiles, which are free but can be slow.

Use TileLayerOptions to configure other tile providers, such as mapbox:

new TileLayerOptions(
  urlTemplate: "https://api.mapbox.com/v4/"
      "{id}/{z}/{x}/{y}@2x.png?access_token={accessToken}",
  additionalOptions: {
    'accessToken': '<PUT_ACCESS_TOKEN_HERE>',
    'id': 'mapbox.streets',
  },
),

Offline maps

Once you have your map exported to .mbtiles, you can use mbtilesToPng to unpack into /{z}/{x}/{y}.png. Move this to Assets folder and add Asset directories to pubspec.yaml. Minimum required fields for offline maps are:

new FlutterMap(
  options: new MapOptions(
    center: new LatLng(56.704173, 11.543808),
    minZoom: <offline map minimum zoom>,
    maxZoom: <offline map maximum zoom>,
    zoom: 13.0,
    swPanBoundary: LatLng(56.6877, 11.5089),
    nePanBoundary: LatLng(56.7378, 11.6644),
  ),
  layers: [
    new TileLayerOptions(
      offlineMode: true,
      maxZoom: <offline map maximum zoom>,
      urlTemplate: "assets/offlineMap/{z}/{x}/{y}.png",
    ),
  ],
),

Make sure PanBoundaries are within offline map boundary to stop missing asset errors.

See the flutter_map_example/ folder for a working example.

Credit (github url) : https://github.com/johnpryan/flutter_map

Next Article : https://flutterappdev.com/2019/02/01/animated-radial-and-pie-charts-for-flutter-mobile-app-development/