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

Set rotateGesturesEnabled to false to lock the map bearing:

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

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('No Rotation Map')),
      body: MapMetrics(
        styleUrl:
            'https://gateway.mapmetrics.org/styles/YOUR_STYLE_ID?token=YOUR_API_KEY',
        onMapCreated: (MapMetricsController controller) {
          mapController = controller;
        },
        initialCameraPosition: CameraPosition(
          target: LatLng(48.8566, 2.3522),
          zoom: 12.0,
        ),
        rotateGesturesEnabled: false, // Disable rotation
      ),
    );
  }
}

Disable Rotation and Tilt

Lock both rotation and 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> {
  MapMetricsController? mapController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Flat 2D Map')),
      body: MapMetrics(
        styleUrl:
            'https://gateway.mapmetrics.org/styles/YOUR_STYLE_ID?token=YOUR_API_KEY',
        onMapCreated: (MapMetricsController controller) {
          mapController = controller;
        },
        initialCameraPosition: CameraPosition(
          target: LatLng(48.8566, 2.3522),
          zoom: 12.0,
          bearing: 0.0,
          tilt: 0.0,
        ),
        rotateGesturesEnabled: false,  // No rotation
        tiltGesturesEnabled: false,    // No tilt
      ),
    );
  }
}

Toggle Rotation with a Button

Let users turn rotation on and off:

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

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

class _ToggleRotationScreenState extends State<ToggleRotationScreen> {
  MapMetricsController? 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: MapMetrics(
        styleUrl:
            'https://gateway.mapmetrics.org/styles/YOUR_STYLE_ID?token=YOUR_API_KEY',
        onMapCreated: (MapMetricsController controller) {
          mapController = controller;
        },
        initialCameraPosition: CameraPosition(
          target: LatLng(48.8566, 2.3522),
          zoom: 12.0,
        ),
        rotateGesturesEnabled: rotationEnabled,
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Reset bearing to north
          mapController?.animateCamera(
            CameraUpdate.newCameraPosition(
              CameraPosition(
                target: LatLng(48.8566, 2.3522),
                zoom: 12.0,
                bearing: 0.0,
              ),
            ),
          );
        },
        child: Icon(Icons.north),
        tooltip: 'Reset to North',
      ),
    );
  }
}

Gesture Control Properties

Property	Type	Default	Description
rotateGesturesEnabled	bool	true	Allow two-finger rotation
tiltGesturesEnabled	bool	true	Allow two-finger tilt
scrollGesturesEnabled	bool	true	Allow panning
zoomGesturesEnabled	bool	true	Allow pinch-to-zoom

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.