> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/ja/flutter/maps/llms.txt)

# Display the user's location

![Display the user's location on a map with the default user location puck](https://docs.mapbox.com/ja/assets/ideal-img/maps-examples-location.d636dfe.480.png)

This example shows how to request a user's permission to display their location on the map. Once permission is granted, the map shows the user's location with a blue puck. The user can select different puck styles, including 3D models. For more information on displaying a user's location read the [User Location section](https://docs.mapbox.com/ja/flutter/maps/guides/user-location/).

**dart**

Title: `location_example.dart`

[View on GitHub](https://github.com/mapbox/mapbox-maps-flutter/blob/main/example/lib/location_example.dart)

```dart
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:mapbox_maps_flutter/mapbox_maps_flutter.dart';
import 'package:geolocator/geolocator.dart' show Geolocator;

import 'example.dart';

class LocationExample extends StatefulWidget implements Example {
  @override
  final Widget leading = const Icon(Icons.map);
  @override
  final String title = 'Location Component';
  @override
  final String? subtitle = null;

  @override
  State<StatefulWidget> createState() => LocationExampleState();
}

class LocationExampleState extends State<LocationExample> {
  LocationExampleState();

  final colors = [Colors.amber, Colors.black, Colors.blue];

  MapboxMap? mapboxMap;
  int _accuracyColor = 0;
  int _pulsingColor = 0;
  int _accuracyBorderColor = 0;
  double _puckScale = 10.0;

  _onMapCreated(MapboxMap mapboxMap) {
    this.mapboxMap = mapboxMap;
  }

  @override
  void initState() {
    super.initState();
  }

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

  Widget _show() {
    return TextButton(
      child: Text('show location'),
      onPressed: () {
        mapboxMap?.location
            .updateSettings(LocationComponentSettings(enabled: true));
      },
    );
  }

  Widget _hide() {
    return TextButton(
      child: Text('hide location'),
      onPressed: () {
        mapboxMap?.location
            .updateSettings(LocationComponentSettings(enabled: false));
      },
    );
  }

  Widget _showBearing() {
    return TextButton(
      child: Text('show location bearing'),
      onPressed: () {
        mapboxMap?.location.updateSettings(
            LocationComponentSettings(puckBearingEnabled: true));
      },
    );
  }

  Widget _hideBearing() {
    return TextButton(
      child: Text('hide location bearing'),
      onPressed: () {
        mapboxMap?.location.updateSettings(
            LocationComponentSettings(puckBearingEnabled: false));
      },
    );
  }

  Widget _showPulsing() {
    return TextButton(
      child: Text('show pulsing'),
      onPressed: () {
        mapboxMap?.location
            .updateSettings(LocationComponentSettings(pulsingEnabled: true));
      },
    );
  }

  Widget _hidePulsing() {
    return TextButton(
      child: Text('hide pulsing'),
      onPressed: () {
        mapboxMap?.location
            .updateSettings(LocationComponentSettings(pulsingEnabled: false));
      },
    );
  }

  Widget _showAccuracy() {
    return TextButton(
      child: Text('show accuracy'),
      onPressed: () {
        mapboxMap?.location
            .updateSettings(LocationComponentSettings(showAccuracyRing: true));
      },
    );
  }

  Widget _hideAccuracy() {
    return TextButton(
      child: Text('hide accuracy'),
      onPressed: () {
        mapboxMap?.location
            .updateSettings(LocationComponentSettings(showAccuracyRing: false));
      },
    );
  }

  Widget _switchAccuracyBorderColor() {
    return TextButton(
      child: Text('switch accuracy border color'),
      onPressed: () {
        _accuracyBorderColor++;
        _accuracyBorderColor %= colors.length;
        mapboxMap?.location.updateSettings(LocationComponentSettings(
            accuracyRingBorderColor: colors[_accuracyBorderColor].value));
      },
    );
  }

  Widget _switchAccuracyColor() {
    return TextButton(
      child: Text('switch accuracy color'),
      onPressed: () {
        _pulsingColor++;
        _pulsingColor %= colors.length;
        mapboxMap?.location.updateSettings(LocationComponentSettings(
            accuracyRingColor: colors[_pulsingColor].value));
      },
    );
  }

  Widget _switchPulsingColor() {
    return TextButton(
      child: Text('switch pulsing color'),
      onPressed: () {
        _accuracyColor++;
        _accuracyColor %= colors.length;
        mapboxMap?.location.updateSettings(LocationComponentSettings(
            pulsingColor: colors[_accuracyColor].value));
      },
    );
  }

  Widget _switchLocationPuck2D() {
    return TextButton(
      child: Text('switch to 2d puck'),
      onPressed: () async {
        final ByteData bytes =
            await rootBundle.load('assets/symbols/custom-icon.png');
        final Uint8List list = bytes.buffer.asUint8List();

        mapboxMap?.location.updateSettings(LocationComponentSettings(
            enabled: true,
            puckBearingEnabled: true,
            locationPuck: LocationPuck(
                locationPuck2D: DefaultLocationPuck2D(
                    topImage: list, shadowImage: Uint8List.fromList([])))));
      },
    );
  }

  Widget _switchLocationPuck3D_duck() {
    return TextButton(
      child: Text('switch to 3d puck with duck model'),
      onPressed: () {
        mapboxMap?.location.updateSettings(LocationComponentSettings(
            locationPuck: LocationPuck(
                locationPuck3D: LocationPuck3D(
                    modelUri:
                        "https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Duck/glTF-Embedded/Duck.gltf",
                    modelScale: [_puckScale, _puckScale, _puckScale]))));
      },
    );
  }

  Widget _switchLocationPuck3D_car() {
    return TextButton(
      child: Text('switch to 3d puck with car model'),
      onPressed: () {
        mapboxMap?.location.updateSettings(LocationComponentSettings(
            locationPuck: LocationPuck(
                locationPuck3D: LocationPuck3D(
                    modelUri: "asset://assets/sportcar.glb",
                    modelScale: [_puckScale, _puckScale, _puckScale]))));
      },
    );
  }

  Widget _switchPuckScale() {
    return TextButton(
      child: Text('scale 3d puck'),
      onPressed: () {
        _puckScale /= 2;
        if (_puckScale < 1) {
          _puckScale = 10.0;
        }
        print("Scale : $_puckScale");
        mapboxMap?.location.updateSettings(LocationComponentSettings(
            locationPuck: LocationPuck(
                locationPuck3D: LocationPuck3D(
                    modelUri:
                        "https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Duck/glTF-Embedded/Duck.gltf",
                    modelScale: [_puckScale, _puckScale, _puckScale]))));
      },
    );
  }

  Widget _getPermission() {
    return TextButton(
      child: Text('get location permission'),
      onPressed: () async {
        var status = await Geolocator.requestPermission();
        print("Location granted : $status");
      },
    );
  }

  Widget _getSettings() {
    return TextButton(
      child: Text('get settings'),
      onPressed: () {
        mapboxMap?.location.getSettings().then(
            (value) => ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                  content: Text("""
                  Location settings : 
                    enabled : ${value.enabled}, 
                    puckBearingEnabled : ${value.puckBearingEnabled}
                    puckBearing : ${value.puckBearing}
                    pulsing : ${value.pulsingEnabled}
                    pulsing radius : ${value.pulsingMaxRadius}
                    pulsing color : ${value.pulsingColor}
                    accuracy :  ${value.showAccuracyRing},
                    accuracy color :  ${value.accuracyRingColor}
                    accuracyRingBorderColor : ${value.accuracyRingBorderColor}
                    """
                      .trim()),
                  backgroundColor: Theme.of(context).primaryColor,
                  duration: Duration(seconds: 2),
                )));
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    final MapWidget mapWidget =
        MapWidget(key: ValueKey("mapWidget"), onMapCreated: _onMapCreated);

    final List<Widget> listViewChildren = <Widget>[];

    listViewChildren.addAll(
      <Widget>[
        _getPermission(),
        _show(),
        _hide(),
        _switchLocationPuck2D(),
        _switchLocationPuck3D_duck(),
        _switchLocationPuck3D_car(),
        _switchPuckScale(),
        _showBearing(),
        _hideBearing(),
        _showAccuracy(),
        _hideAccuracy(),
        _showPulsing(),
        _hidePulsing(),
        _switchAccuracyColor(),
        _switchPulsingColor(),
        _switchAccuracyBorderColor(),
        _getSettings(),
      ],
    );

    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Center(
          child: SizedBox(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height - 400,
              child: mapWidget),
        ),
        Expanded(
          child: ListView(
            children: listViewChildren,
          ),
        )
      ],
    );
  }
}
```