Disable Map Rotation in Flutter

This tutorial shows how to prevent users from rotating the map — useful for simple navigation apps or when a fixed north-up orientation is required.

Prerequisites

Before you begin, ensure you have:

• Completed the Flutter Setup Guide
• A MapMetrics API key and style URL from the MapMetrics Portal

Disable Rotation

Pass a MapGestures value with rotate: false to MapOptions.gestures to lock the map bearing. MapGestures.all(...) enables every gesture by default and lets you flip off just the ones you name:

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

class NoRotationMapScreen extends StatefulWidget {
  @override
  _NoRotationMapScreenState createState() => _NoRotationMapScreenState();
}

class _NoRotationMapScreenState extends State<NoRotationMapScreen> {
  MapController? mapController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('No Rotation Map')),
      body: MapMetricsView(
        options: MapOptions(
          initCenter: Position(2.3522, 48.8566),
          initZoom: 12.0,
          initStyle:
              'https://gateway.mapmetrics-atlas.net/styles/?fileName=YOUR_STYLE_ID/YOUR_STYLE.json&token=YOUR_API_KEY',
          gestures: const MapGestures.all(rotate: false), // Disable rotation
        ),
        onMapCreated: (MapController controller) {
          mapController = controller;
        },
      ),
    );
  }
}

Disable Rotation and Pitch

Lock both rotation and pitch (tilt) for a strictly 2D map view:

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

class Flat2DMapScreen extends StatefulWidget {
  @override
  _Flat2DMapScreenState createState() => _Flat2DMapScreenState();
}

class _Flat2DMapScreenState extends State<Flat2DMapScreen> {
  MapController? mapController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Flat 2D Map')),
      body: MapMetricsView(
        options: MapOptions(
          initCenter: Position(2.3522, 48.8566),
          initZoom: 12.0,
          initBearing: 0.0,
          initPitch: 0.0,
          initStyle:
              'https://gateway.mapmetrics-atlas.net/styles/?fileName=YOUR_STYLE_ID/YOUR_STYLE.json&token=YOUR_API_KEY',
          gestures: const MapGestures.all(
            rotate: false, // No rotation
            pitch: false, // No tilt
          ),
        ),
        onMapCreated: (MapController controller) {
          mapController = controller;
        },
      ),
    );
  }
}

Toggle Rotation with a Button

Let users turn rotation on and off. Because gestures lives on MapOptions, rebuild the MapOptions (and therefore the map widget) with new gesture flags in setState:

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

class ToggleRotationScreen extends StatefulWidget {
  @override
  _ToggleRotationScreenState createState() => _ToggleRotationScreenState();
}

class _ToggleRotationScreenState extends State<ToggleRotationScreen> {
  MapController? mapController;
  bool rotationEnabled = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Toggle Rotation'),
        actions: [
          Row(
            children: [
              Text(rotationEnabled ? 'Rotation ON' : 'Rotation OFF'),
              Switch(
                value: rotationEnabled,
                onChanged: (value) {
                  setState(() {
                    rotationEnabled = value;
                  });
                },
                activeColor: Colors.white,
              ),
            ],
          ),
        ],
      ),
      body: MapMetricsView(
        options: MapOptions(
          initCenter: Position(2.3522, 48.8566),
          initZoom: 12.0,
          initStyle:
              'https://gateway.mapmetrics-atlas.net/styles/?fileName=YOUR_STYLE_ID/YOUR_STYLE.json&token=YOUR_API_KEY',
          gestures: MapGestures.all(rotate: rotationEnabled),
        ),
        onMapCreated: (MapController controller) {
          mapController = controller;
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Reset bearing to north
          mapController?.animateCamera(bearing: 0.0);
        },
        child: Icon(Icons.north),
        tooltip: 'Reset to North',
      ),
    );
  }
}

Gesture Control Properties

MapGestures (passed as MapOptions.gestures) has four boolean fields, all true by default when constructed with MapGestures.all(...):

Property	Type	Default	Description
rotate	bool	true	Allow two-finger rotation
pitch	bool	true	Allow two-finger tilt
pan	bool	true	Allow panning
zoom	bool	true	Allow pinch-to-zoom

Use MapGestures.all(...) to disable a few named gestures while leaving the rest on, or MapGestures.none(...) to enable only a few while leaving the rest off.

Next Steps

• Toggle Interactions — Enable/disable all gestures
• Set Pitch and Bearing — Control camera angle
• Restrict Map Panning — Limit the viewable area

---

Tip: Disabling rotation is common for turn-by-turn navigation apps where you want the map to always face north, or for embedded maps where simplicity is important.