Opens and displays a scene from a Mobile Scene Package (.mspk).
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
.
- Create a
MobileScenePackage
using the path to the local .mspk file. - Call
MobileScenePackage.load()
to load the mobile scene package. - When the
MobileScenePackage
is loaded, obtain the firstArcGISScene
from theMobileScenePackage.scenes
property. - Create an
ArcGISSceneViewController
and set the scene from the package to theArcGISSceneViewController.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
//
// 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);
}
}