Skip to content

Display scene from mobile scene package

View on GitHub

Opens and displays a scene from a Mobile Scene Package (.mspk).

Image of display scene from mobile scene package

Use case

An .mspk file is an archive containing the data (specifically, basemaps and features), used to display an offline 3D scene.

How to use the sample

When the sample opens, it will automatically display the Scene in the Mobile Scene Package.

How it works

This sample takes a Mobile Scene Package that was created in ArcGIS Pro, and displays an ArcGISScene from within the package in an ArcGISSceneView.

  1. Create a MobileScenePackage using the path to the local .mspk file.
  2. Call MobileScenePackage.load() to load the mobile scene package.
  3. When the MobileScenePackage is loaded, obtain the first ArcGISScene from the MobileScenePackage.scenes property.
  4. Create an ArcGISSceneViewController and set the scene from the package to the ArcGISSceneViewController.arcGISScene property.

Relevant API

  • ArcGISSceneView
  • MobileScenePackage

Offline data

The sample downloads a Mobile Scene Package of Philadelphia, Pennsylvania from ArcGISOnline. The data was authored in ArcGIS Pro.

Tags

offline, scene

Sample Code

display_scene_from_mobile_scene_package.dart
Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
//
// Copyright 2025 Esri
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//   https://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
//

import 'dart:io';

import 'package:arcgis_maps/arcgis_maps.dart';
import 'package:arcgis_maps_sdk_flutter_samples/common/common.dart';
import 'package:flutter/material.dart';
import 'package:path_provider/path_provider.dart';

class DisplaySceneFromMobileScenePackage extends StatefulWidget {
  const DisplaySceneFromMobileScenePackage({super.key});

  @override
  State<DisplaySceneFromMobileScenePackage> createState() =>
      _DisplaySceneFromMobileScenePackageState();
}

class _DisplaySceneFromMobileScenePackageState
    extends State<DisplaySceneFromMobileScenePackage>
    with SampleStateSupport {
  // Create a controller for the scene view.
  final _sceneViewController = ArcGISSceneView.createController();
  // A flag for when the scene view is ready.
  var _ready = false;
  // The download progress of the sample data.
  var _downloadProgress = 0.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // Add a scene view to the widget tree and set a controller.
      body: Stack(
        children: [
          ArcGISSceneView(
            controllerProvider: () => _sceneViewController,
            onSceneViewReady: onSceneViewReady,
          ),
          // Display a progress indicator and prevent interaction until state is ready.
          Visibility(
            visible: !_ready,
            child: Center(
              child: Column(
                spacing: 10,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  CircularProgressIndicator(
                    value: _downloadProgress,
                    backgroundColor: Colors.white,
                    valueColor: const AlwaysStoppedAnimation<Color>(
                      Colors.blue,
                    ),
                  ),
                  Text(
                    'Downloading sample data ${(_downloadProgress * 100).toStringAsFixed(0)}%',
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  Future<void> onSceneViewReady() async {
    final appDir = await getApplicationDocumentsDirectory();
    // Load the local mobile scene package.
    final mspkFile = File('${appDir.absolute.path}/philadelphia.mspk');

    if (!mspkFile.existsSync()) {
      await downloadSampleDataWithProgress(
        itemIds: ['7dd2f97bb007466ea939160d0de96a9d'],
        destinationFiles: [mspkFile],
        onProgress: (progress) {
          setState(() => _downloadProgress = progress);
        },
      );
    }

    final mspk = MobileScenePackage.withFileUri(mspkFile.uri);
    await mspk.load();

    if (mspk.scenes.isNotEmpty) {
      // Get the first scene in the mobile scene package and set to the scene view.
      _sceneViewController.arcGISScene = mspk.scenes.first;
    }

    // Set the ready state variable to true to enable the sample UI.
    setState(() => _ready = true);
  }
}

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.