Fullscreen Map in Flutter

This tutorial shows how to create a fullscreen map that fills the entire screen, removing the app bar and status bar for an immersive experience.

Prerequisites

Before you begin, ensure you have:

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

Basic Fullscreen Map

The simplest way — just use the MapMetrics widget as the entire body without an AppBar:

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

class FullscreenMapScreen extends StatefulWidget {
  @override
  _FullscreenMapScreenState createState() => _FullscreenMapScreenState();
}

class _FullscreenMapScreenState extends State<FullscreenMapScreen> {
  MapMetricsController? mapController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      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,
        ),
      ),
    );
  }
}

True Fullscreen (Hide Status Bar)

For a fully immersive experience, hide the system status bar and navigation bar:

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

class ImmersiveMapScreen extends StatefulWidget {
  @override
  _ImmersiveMapScreenState createState() => _ImmersiveMapScreenState();
}

class _ImmersiveMapScreenState extends State<ImmersiveMapScreen> {
  MapMetricsController? mapController;

  @override
  void initState() {
    super.initState();
    // Hide status bar and navigation bar for true fullscreen
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
  }

  @override
  void dispose() {
    // Restore system UI when leaving the screen
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
    mapController?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      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,
        ),
      ),
    );
  }
}

Toggle Fullscreen Mode

Let users switch between normal and fullscreen views:

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

class ToggleFullscreenScreen extends StatefulWidget {
  @override
  _ToggleFullscreenScreenState createState() => _ToggleFullscreenScreenState();
}

class _ToggleFullscreenScreenState extends State<ToggleFullscreenScreen> {
  MapMetricsController? mapController;
  bool isFullscreen = false;

  void _toggleFullscreen() {
    setState(() {
      isFullscreen = !isFullscreen;
    });

    if (isFullscreen) {
      SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
    } else {
      SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
    }
  }

  @override
  void dispose() {
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
    mapController?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: isFullscreen
          ? null
          : AppBar(title: Text('Map View')),
      body: Stack(
        children: [
          MapMetrics(
            styleUrl: 'https://gateway.mapmetrics.org/styles/YOUR_STYLE_ID?token=YOUR_API_KEY',
            onMapCreated: (controller) => mapController = controller,
            initialCameraPosition: CameraPosition(
              target: LatLng(48.8566, 2.3522),
              zoom: 12.0,
            ),
          ),
          // Fullscreen toggle button
          Positioned(
            top: isFullscreen ? 40 : 8,
            right: 8,
            child: FloatingActionButton.small(
              onPressed: _toggleFullscreen,
              backgroundColor: Colors.white,
              child: Icon(
                isFullscreen ? Icons.fullscreen_exit : Icons.fullscreen,
                color: Colors.black87,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

System UI Modes

Mode	Description
SystemUiMode.edgeToEdge	Normal mode — status bar and nav bar visible
SystemUiMode.immersive	Fullscreen — swipe from edge to reveal bars
SystemUiMode.immersiveSticky	Fullscreen — bars appear briefly on swipe, then fade
SystemUiMode.leanBack	Fullscreen — tap anywhere to reveal bars

Next Steps

• Basic Map — Map with standard UI controls
• Set Pitch and Bearing — 3D perspective for an immersive look
• Fly to a Location — Smooth camera animations

---

Tip: Always restore SystemUiMode.edgeToEdge in dispose() so other screens in your app are not affected by the fullscreen mode.