# Display Cursor Street Name

Last updated:

<!-- -->

October 18, 2026

<!-- -->

\| 2 minutes read

<br />

<br />

This example demonstrates how to create a Flutter app that displays the name of the street at the cursor position using Maps SDK for Flutter. When the user taps on the map, the app retrieves and displays the street name at that location.

## How it works[​](#how-it-works "Direct link to How it works")

* Main App Setup : Initializes the Maps SDK and sets up the app’s home screen with a map.
* Displaying Street Name : The map detects touch input, centers on the selected coordinates, and displays the street name at the tapped location in a bottom-centered container.

![Initial map view](/docs/flutter/assets/images/example_flutter_display_cursor_street_name1-beb5e603e4534bd41f6763371b3826df.png)

**Initial map view**

![Tapped on street](/docs/flutter/assets/images/example_flutter_display_cursor_street_name2-a97f9575747c131003d39f50b1066bd3.png)

**Tapped on street**

### UI and Map Integration[​](#ui-and-map-integration "Direct link to UI and Map Integration")

The map screen includes an AppBar and displays a container at the bottom showing the street name upon tapping a location on the map. The container at the bottom displays the street name when it is available.

main.dart[View on Github](https://github.com/magiclane/magiclane-maps-sdk-examples-for-flutter/tree/main/display_cursor_street_name/lib/main.dart?ref_type=heads#L29)

```dart
class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late GemMapController _mapController;
  String _currentStreetName = "";

  @override
  void dispose() {
    GemKit.release();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.deepPurple[900],
        title: const Text(
          'Display Cursor Street Name',
          style: TextStyle(color: Colors.white),
        ),
      ),
      body: Stack(
        alignment: AlignmentDirectional.bottomCenter,
        children: [
          GemMap(
            key: ValueKey("GemMap"),
            onMapCreated: _onMapCreated,
            appAuthorization: projectApiToken,
          ),
          if (_currentStreetName != "")
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 25.0),
              child: Container(
                color: Colors.white,
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text(_currentStreetName),
                ),
              ),
            ),
        ],
      ),
    );
  }

```

### Handling Cursor Position and Retrieving Street Name[​](#handling-cursor-position-and-retrieving-street-name "Direct link to Handling Cursor Position and Retrieving Street Name")

This code sets the cursor to follow the tapped location and retrieves the street name. This code initializes the map controller, sets the cursor to follow the user’s taps, and retrieves the street name, which is then displayed in the UI.

main.dart[View on Github](https://github.com/magiclane/magiclane-maps-sdk-examples-for-flutter/tree/main/display_cursor_street_name/lib/main.dart?ref_type=heads#L81)

```dart
  void _onMapCreated(GemMapController controller) async {
    // Save controller for further usage.
    _mapController = controller;

    _mapController.centerOnCoordinates(
      Coordinates(latitude: 45.472358, longitude: 9.184945),
      zoomLevel: 80,
    );

    // Enable cursor to render on screen
    _mapController.preferences.enableCursor = true;
    _mapController.preferences.enableCursorRender = true;

    // Register touch callback to set cursor to tapped position
    _mapController.registerOnTouch((point) async {
      await _mapController.setCursorScreenPosition(point);

      final streets = _mapController.cursorSelectionStreets();
      setState(() {
        _currentStreetName = streets.isEmpty
            ? "Unnamed street"
            : streets.first.name;
      });
    });
  }

```