"}],"short_description":"Learn how to easily bring satellite imagery into your mobile app development using an image service and ArcGIS Maps SDK for Flutter.","flexible_content":[{"acf_fc_layout":"content","content":"With more satellites than ever monitoring our planet, the volume of available remote sensing data is growing rapidly. This creates opportunities for organizations to integrate satellite imagery into software applications that support critical workflows in sectors such as agriculture, forestry, climate monitoring, and more. ArcGIS Maps SDK for Flutter (aka Flutter Maps SDK), one of several SDKs that Esri provides for native app development, gives developers tools to visualize, interact with, and analyze raster data, including satellite imagery, directly within mobile or desktop applications.<\/p>\n
In this blog, I\u2019ll show you how to integrate imagery from Esri\u2019s hosted Sentinel-2 image service into a mobile app using the Flutter Maps SDK. You\u2019ll learn how to query the image service using parameters like location, date and cloud cover, and how to display the results with an interactive, time-based slider. The result is a custom-made mobile application that can be used to visually monitor the changes in the landscape over time, such as tree foliage changes across the seasons.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2865002,"id":2865002,"title":"SatelliteImageryAppSmall","filename":"SatelliteImageryAppSmall.png","filesize":2643445,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/SatelliteImageryAppSmall.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/sdk-flutter\/developers\/how-to-integrate-satellite-imagery-in-mobile-app-development-with-flutter-maps-sdk\/satelliteimageryappsmall","alt":"Five screenshots of a mobile phone screen displaying satellite imagery and user notifications.","author":"10242","description":"","caption":"The Sentinel-2 imagery viewer app we'll be building in this blog with the Flutter Maps SDK.","name":"satelliteimageryappsmall","status":"inherit","uploaded_to":2861932,"date":"2025-06-27 09:20:08","modified":"2025-06-27 16:12:57","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":2289,"height":1095,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/SatelliteImageryAppSmall-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/SatelliteImageryAppSmall.png","medium-width":464,"medium-height":222,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/SatelliteImageryAppSmall.png","medium_large-width":768,"medium_large-height":367,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/SatelliteImageryAppSmall.png","large-width":1920,"large-height":918,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/SatelliteImageryAppSmall-1536x735.png","1536x1536-width":1536,"1536x1536-height":735,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/SatelliteImageryAppSmall-2048x980.png","2048x2048-width":2048,"2048x2048-height":980,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/SatelliteImageryAppSmall-826x395.png","card_image-width":826,"card_image-height":395,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/SatelliteImageryAppSmall-1920x918.png","wide_image-width":1920,"wide_image-height":918}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"
Before we dive into the code, let\u2019s look at what rasters and image services are, and why they benefit software developers building native applications that work with satellite imagery.<\/p>\n
Rasters<\/a> are a fundamental geospatial data type, representing geographic information as a matrix of pixels. Each pixel holds a value which corresponds to a specific location. These values can represent various data types such as spectral bands, elevation, temperature or categorical classifications. For example, in a digital aerial photographic image, each pixel typically contains RGB values which can be used to display true-color imagery. In satellite imagery, multiple spectral bands (including those beyond the visible spectrum, such as near-infrared) are captured in each pixel. These bands can be used to analyze vegetative health, water body delineation, and land cover classification.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2861952,"id":2861952,"title":"Satellite Imagery Raster","filename":"Satellite-Imagery-Raster.png","filesize":210355,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/Satellite-Imagery-Raster.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/sdk-flutter\/developers\/how-to-integrate-satellite-imagery-in-mobile-app-development-with-flutter-maps-sdk\/satellite-imagery-raster","alt":"A diagram of data from satellite imagery","author":"10242","description":"An illustrative overview of how satellite imagery can be stored as raster data, with each pixel corresponding to real world data.","caption":"","name":"satellite-imagery-raster","status":"inherit","uploaded_to":2861932,"date":"2025-06-26 14:49:22","modified":"2025-06-26 14:51:15","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":854,"height":710,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/Satellite-Imagery-Raster-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/Satellite-Imagery-Raster.png","medium-width":314,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/Satellite-Imagery-Raster.png","medium_large-width":768,"medium_large-height":639,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/Satellite-Imagery-Raster.png","large-width":854,"large-height":710,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/Satellite-Imagery-Raster.png","1536x1536-width":854,"1536x1536-height":710,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/Satellite-Imagery-Raster.png","2048x2048-width":854,"2048x2048-height":710,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/Satellite-Imagery-Raster-559x465.png","card_image-width":559,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/Satellite-Imagery-Raster.png","wide_image-width":854,"wide_image-height":710}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":" An Esri image service<\/strong> is a web service that provides access to raster data (such as satellite imagery) directly in your application. Instead of downloading large datasets, you can request just the specific areas, dates, cloud cover levels, etc. that you need, when you need them, which the service then sends to you on the fly. This approach enhances performance and scalability, especially for applications requiring dynamic access to large or frequently updated raster datasets.<\/p>\n Sentinel-2 is a satellite mission from the European Space Agency (ESA) that captures high-resolution imagery of Earth\u2019s surface, useful for monitoring vegetation, water, land use, and more. Esri provides access to the Level-1C Top of Atmosphere imagery through the Sentinel-2 Image Service<\/strong><\/a>, <\/strong>which is updated daily. The raster data from this image service consists of multispectral 13-band images with visual renderings. By default, it renders natural color (bands 4, 3, 2), but developers can explore other band combinations by using the 21 available raster functions<\/a> (such as Agriculture and Color Infrared).<\/p>\n Note that Sentinel-2 Level-2A data is also available<\/a> and viewable with the Esri Sentinel-2 Explorer web app<\/a> (see below).<\/p><\/blockquote>\n"},{"acf_fc_layout":"image","image":{"ID":2862012,"id":2862012,"title":"Sentinel2Explorer_Richat","filename":"Sentinel2Explorer_Richat.png","filesize":5424749,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/Sentinel2Explorer_Richat.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/sdk-flutter\/developers\/how-to-integrate-satellite-imagery-in-mobile-app-development-with-flutter-maps-sdk\/sentinel2explorer_richat","alt":"Screenshot of the Esri Sentinel-2 Explorer web app, showing the Richat Structure satellite imagery.","author":"10242","description":"","caption":"The Esri Sentinel-2 Explorer web app allows you to explore and analyze satellite imagery from the Sentinel-2 Level-2A data collection.","name":"sentinel2explorer_richat","status":"inherit","uploaded_to":2861932,"date":"2025-06-26 14:56:20","modified":"2025-06-26 14:59:35","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":3400,"height":1710,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/Sentinel2Explorer_Richat-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/Sentinel2Explorer_Richat.png","medium-width":464,"medium-height":233,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/Sentinel2Explorer_Richat.png","medium_large-width":768,"medium_large-height":386,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/Sentinel2Explorer_Richat.png","large-width":1920,"large-height":966,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/Sentinel2Explorer_Richat-1536x773.png","1536x1536-width":1536,"1536x1536-height":773,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/Sentinel2Explorer_Richat-2048x1030.png","2048x2048-width":2048,"2048x2048-height":1030,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/Sentinel2Explorer_Richat-826x415.png","card_image-width":826,"card_image-height":415,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/Sentinel2Explorer_Richat-1920x966.png","wide_image-width":1920,"wide_image-height":966}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/livingatlas.arcgis.com\/sentinel2explorer\/#mapCenter=-11.39800%2C21.12400%2C12.000&mode=dynamic&mainScene=2024-10-26%7CAgriculture+for+Visualization%7C27906279"},{"acf_fc_layout":"content","content":" If you\u2019re looking to integrate satellite imagery into your apps, using image services like Esri\u2019s Sentinel-2 image service makes it easy to deliver responsive, visually rich remote sensing experiences in your native apps without having to manage or download large datasets. With support for date filtering, cloud masking, and server-side raster rendering, all you need is an image service URL and a geographical extent to get started with Flutter Maps SDK.<\/p>\n Now that we understand some raster and image service fundamentals, I\u2019ll step through how to display satellite imagery from the Sentinel-2 image service in a mobile application using Flutter Maps SDK.<\/p>\n The mobile app we’ll build is for a user who wants to visualize how tree foliage cover changes throughout the seasons in a forested area of Laurel Ridge State Park, Pennsylvania, in the USA. The app allows the user to control which satellite imagery is retrieved by selecting a cloud cover filter and a start and end date of imagery to be viewed. \u00a0\u00a0It\u2019s beyond the scope of this blog to go into the app\u2019s UI controls and Flutter state management, but you can check out the full code on my GitHub repo<\/a> to see how that all hooks together.<\/p>\n Note, even though I\u2019m using Flutter Maps SDK throughout this blog, the concepts and workflows that follow are the same for the other ArcGIS Maps SDKs for Native Apps (.NET, Kotlin, Qt, and Swift).<\/em><\/p>\n First, you\u2019ll need to install Flutter Maps SDK and sign up for an API key if you don\u2019t already have one. Learn how to install and get a key on the\u00a0Get Started<\/a>\u00a0doc pages, then follow the steps in the Display a Map tutorial<\/a> to create a basic map app template to build upon. The tutorial walks you through how to import the arcgis_maps package from pub.dev, set your API key, and display a map.<\/p>\n Now you have a basic map app set up, so it\u2019s time to configure the code for our satellite imagery. In our app, the map provides the spatial context for the satellite imagery. Since we\u2019re working with raster data, the underlying basemap style will be obscured once it\u2019s loaded. Let\u2019s go for a dark gray base map style which matches the app\u2019s dark themed welcome screen:<\/p>\n Now that we have a basemap, we need to define the bounding box (envelope) of the geographical area we want satellite imagery from. We\u2019ll create an envelope which takes the x and y min and max co-ordinates and use the envelope to set the viewpoint of the map view. We\u2019ll also use these coordinates later to request the satellite imagery:<\/p>\n As image services render on the fly, panning and zooming the map view to an area outside the original extent will trigger a redraw of the imagery which can take time. To avoid unnecessary redraws and improve the user experience of viewing imagery in just one area (Laurel Ridge State Park), let\u2019s lock the map view by disabling interaction with:<\/p>\n Now that the app is set up to display a dark gray basemap in the area we\u2019re focusing on, it\u2019s time to find out what imagery is available for that area from the image service.<\/p>\n For this app, I want the user to be able to view satellite imagery available within their chosen extent. I want them to be able to filter by how much cloud cover the image has, and by the date on which the imagery was acquired. You can use the image service REST directory<\/a> to check what fields are available to filter on – in our case the fields Tip<\/strong>: Clouds obscure Sentinel-2 imagery, so for the best images you should ideally filter for cloud free imagery by using a value of 0 for We can encode and pass values for Tip<\/strong>: If we didn\u2019t pass in a geometry extent, we would retrieve satellite imagery across the whole globe for our given cloud cover and date filters.<\/p><\/blockquote>\n Then, we set the When we make a query to the image service with those parameters, we get a response that returns the requested The app is now set up to quickly check what images are available from the image service for the given geometry, cloud cover, and acquisition dates. This workflow of quickly querying the service allows the app to remain fast and responsive and give the user flexibility over choosing filters without loading unwanted imagery, saving time and memory.<\/p>\n <\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2865122,"id":2865122,"title":"SatImgUserControls","filename":"SatImgUserControls.png","filesize":3254223,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/SatImgUserControls.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/sdk-flutter\/developers\/how-to-integrate-satellite-imagery-in-mobile-app-development-with-flutter-maps-sdk\/satimgusercontrols","alt":"Three mobile phone screens showing user options for filtering imagery","author":"10242","description":"","caption":"The user can select a date range and cloud cover to query the image service and quickly find how many results match their filters.","name":"satimgusercontrols","status":"inherit","uploaded_to":2861932,"date":"2025-06-27 13:39:45","modified":"2025-06-27 13:50:50","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1829,"height":1238,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/SatImgUserControls-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/SatImgUserControls.png","medium-width":386,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/SatImgUserControls.png","medium_large-width":768,"medium_large-height":520,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/SatImgUserControls.png","large-width":1596,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/SatImgUserControls-1536x1040.png","1536x1536-width":1536,"1536x1536-height":1040,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/SatImgUserControls.png","2048x2048-width":1829,"2048x2048-height":1238,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/SatImgUserControls-687x465.png","card_image-width":687,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/SatImgUserControls-1596x1080.png","wide_image-width":1596,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":" Now that we know which rasters are available from our query, the next step is to display them on the map. We do this by creating a new Tip<\/strong>: If we didn\u2019t supply this where clause, we would be retrieving all rasters available within the map view space, which would be bandwidth and time costly.<\/p><\/blockquote>\n Finally, create a raster layer from that result and add it to the map\u2019s operational layers.<\/p>\n Note: To optimize performance and to avoid requesting and redrawing multiple raster layers containing the same raster, the app checks whether a raster has already been added to the map\u2019s operational layers using its unique Now that the app is configured to fetch and display rasters from the image service, it\u2019s time to configure the user interface to display the results. Below, I\u2019ll briefly summarize the key components as it\u2019s beyond the scope of this blog to go into the full details of Flutter UI configuration (but remember you can check out the full source code in my GitHub repo<\/a> for this app).<\/p>\n To create a responsive and intuitive experience, you can connect the map view controller\u2019s draw status<\/strong> to your Flutter UI. Since multiple satellite imagery requests can take time to draw, it\u2019s useful to listen in to the map view controller\u2019s draw status event to coordinate your UI elements. For this app, a slider widget is used to allow the user to browse the displayed satellite images. By listening in to the draw status, you can temporarily hide interactive widgets<\/strong> like the slider while the map loads new data. You can then reveal the slider again once rendering is complete and interact with it to browse the images loaded. This ensures that the user interacts only with fully loaded content.<\/p>\n Once the raster layers are ready, the user can interact with the slider to view different rasters. As the slider\u2019s index changes, the app updates the visible raster layer by setting the visibility Boolean property on the layer accordingly.<\/p>\n Once you\u2019ve hooked in the UI operations to the raster filtering and selection logic, you have an app powered by Flutter Maps SDK that allows your user to quickly browse satellite imagery from an image service, display it on the device, and interact with the results – all on a mobile device without requiring access to desktop software.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2865072,"id":2865072,"title":"SliderActionSatelliteImagery","filename":"SliderActionSatelliteImagery.gif","filesize":1623579,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/SliderActionSatelliteImagery.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/sdk-flutter\/developers\/how-to-integrate-satellite-imagery-in-mobile-app-development-with-flutter-maps-sdk\/slideractionsatelliteimagery","alt":"A mobile phone screen where a slider is dragged left to right and imagery changes on the main screen","author":"10242","description":"","caption":"The slider in the app allows the user to tap through the raster imagery that matched their request.","name":"slideractionsatelliteimagery","status":"inherit","uploaded_to":2861932,"date":"2025-06-27 10:09:34","modified":"2025-06-27 10:13:51","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":392,"height":794,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/SliderActionSatelliteImagery-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/SliderActionSatelliteImagery.gif","medium-width":129,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/SliderActionSatelliteImagery.gif","medium_large-width":392,"medium_large-height":794,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/SliderActionSatelliteImagery.gif","large-width":392,"large-height":794,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/SliderActionSatelliteImagery.gif","1536x1536-width":392,"1536x1536-height":794,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/SliderActionSatelliteImagery.gif","2048x2048-width":392,"2048x2048-height":794,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/SliderActionSatelliteImagery-230x465.gif","card_image-width":230,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/SliderActionSatelliteImagery.gif","wide_image-width":392,"wide_image-height":794}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":" The user of this app can now easily see the changes in autumn foliage over time at Laurel Ridge State Park. This capability could be used for anything from planning a sightseeing trip to see the colors at their best (mid October looks like peak time!) or to understanding how elevation affects the speed of foliage fall in the area.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2865022,"id":2865022,"title":"SatelliteResults","filename":"SatelliteResults.png","filesize":4149882,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/SatelliteResults.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/sdk-flutter\/developers\/how-to-integrate-satellite-imagery-in-mobile-app-development-with-flutter-maps-sdk\/satelliteresults","alt":"Five mobile screens showing satellite imagery changes over time","author":"10242","description":"","caption":"The app showing satellite images from August to November 2024. You can see how foliage cover and color change over the autumn season.","name":"satelliteresults","status":"inherit","uploaded_to":2861932,"date":"2025-06-27 09:44:25","modified":"2025-06-27 09:47:24","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":2195,"height":891,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/SatelliteResults-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/SatelliteResults.png","medium-width":464,"medium-height":188,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/SatelliteResults.png","medium_large-width":768,"medium_large-height":312,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/SatelliteResults.png","large-width":1920,"large-height":779,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/SatelliteResults-1536x623.png","1536x1536-width":1536,"1536x1536-height":623,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/SatelliteResults-2048x831.png","2048x2048-width":2048,"2048x2048-height":831,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/SatelliteResults-826x335.png","card_image-width":826,"card_image-height":335,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/SatelliteResults-1920x779.png","wide_image-width":1920,"wide_image-height":779}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":" By default, the Sentinel-2 image service renders rasters in natural color<\/strong>, which closely resembles what the human eye would see. This visualization is a great starting point for general exploration, but because Sentinel-2 imagery contains multiple spectral bands, the imagery can also be rendered in several other ways depending on your user\u2019s needs. This process of rendering can be controlled using raster functions<\/a> which are operations that apply processing directly to the pixels of raster datasets.<\/p>\n The image service provides a range of predefined raster functions<\/strong> that allow you to dynamically change how the imagery is visualized. You can browse the raster functions available for the Sentinel-2 image service on its rasterFunctionInfos URL<\/a>. For example, you could apply the Color Infrared with Dynamic Range Adjustment (DRA<\/a>)<\/strong> function to emphasize vegetation health and seasonal change, making shifts in foliage across autumn far more pronounced than with natural color alone. Here healthy vegetation appears bright red, while areas of stressed or no vegetation appear dull red or brown. You can apply this visualization via a rendering rule with the following code:<\/p>\n In the above image, this Color Infrared raster function shows the user that the area was covered in healthy living vegetation on 12th<\/sup> September. Then in the second half of October, the user sees rapid changes as the leaves die and fall from the trees. By the end date of 27th<\/sup> October, evergreen vegetation present beneath the now bare trees can be seen where it was obscured before.<\/p>\n This rendering flexibility gives you the ability to tailor the imagery to your use case, whether it\u2019s monitoring vegetation, identifying urban features, or visualizing moisture content – all without needing to preprocess the data manually.<\/p>\n A quick visual analysis is great, but if you want to go beyond visualizing and processing raster data from image services, such as quantifying the data to chart and compare vegetation changes over time, you can use the Raster API tools<\/a> available from ArcGIS Maps SDKs for Native Apps. These tools let you apply a range of raster functions on rasters stored on the device (such as applying hillshade renderers to single band rasters like digital terrain models), and identify pixel values when interacting with a raster. You can check which raster functions are supported on the Esri Developers website<\/a> (note, these are limited in number compared to those which may be available on image services). If you want to perform deeper statistical analysis, check out the ArcGIS Python API<\/a> or the Raster Analysis service<\/a> to build more advanced workflows.<\/p>\n In this blog I\u2019ve stepped through how to use Flutter Maps SDK to create a mobile application that displays filtered and pre-processed satellite imagery from the Esri hosted Sentinel-2 Image Service. You\u2019ve learned a little about rasters and ArcGIS Image Services along the way too. Image services such as these allow developers to provide powerful imagery capabilities to their apps, backed by scalable, cloud hosted services and flexible client-side rendering. Quick visualization and server-side processing of rasters ensures seamless access to massive and constantly updated datasets without taking up local storage on the device.<\/p>\n What I\u2019ve covered in this blog is just a small part of how you can manage working with rasters using Flutter Maps SDK (or any of ArcGIS Maps SDKs for Native Apps). For example, you can also render multiple rasters simultaneously and control their filtering order using mosaic rules. You can also work with locally stored raster data offline and apply raster functions to the data, such as applying hillshades to single band rasters or using raster calculator to calculate indices such as Normalized Difference Vegetation Index (NDVI), used to quantify vegetation greenness.<\/p>\n You can learn more about working with rasters in Flutter Maps SDK in the Add Raster Data<\/a> documentation pages. Check out the following Flutter Maps SDK samples to learn more about how to build mobile apps using raster data (samples are also available for the other Native Maps SDKs):<\/p>\nSentinel-2 Image Service<\/strong><\/h2>\n
Building a satellite imagery viewer app<\/strong><\/h2>\n
Install Flutter Maps SDK<\/strong><\/h3>\n
How to set up the map view<\/strong><\/h3>\n
_map = ArcGISMap.withBasemapStyle(BasemapStyle.arcGISDarkGrayBase);\r\n_mapViewController.arcGISMap = _map;\r\n<\/code><\/pre>\n_envelope = Envelope.fromXY(\r\n xMin: xMin,\r\n yMin: yMin,\r\n xMax: xMax,\r\n yMax: yMax,\r\n spatialReference: SpatialReference.wgs84,\r\n);\r\n\r\n _mapViewController\r\n .setViewpoint(Viewpoint.fromTargetExtent(_envelope.extent));\r\n<\/code><\/pre>\n_mapViewController.interactionOptions.enabled = false<\/span>;\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"content","content":"How to query for available satellite imagery<\/strong><\/h3>\n
cloudcover<\/code> and acquisitiondate<\/code> are important.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2862212,"id":2862212,"title":"s2_fields","filename":"s2_fields.png","filesize":145937,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/s2_fields.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/sdk-flutter\/developers\/how-to-integrate-satellite-imagery-in-mobile-app-development-with-flutter-maps-sdk\/s2_fields","alt":"Screenshot of text displaying fields from image service","author":"10242","description":"","caption":"Fields available to filter on from the Sentinel-2 image service","name":"s2_fields","status":"inherit","uploaded_to":2861932,"date":"2025-06-26 15:33:10","modified":"2025-06-26 15:37:12","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1025,"height":492,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/s2_fields-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/s2_fields.png","medium-width":464,"medium-height":223,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/s2_fields.png","medium_large-width":768,"medium_large-height":369,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/s2_fields.png","large-width":1025,"large-height":492,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/s2_fields.png","1536x1536-width":1025,"1536x1536-height":492,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/s2_fields.png","2048x2048-width":1025,"2048x2048-height":492,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/s2_fields-826x396.png","card_image-width":826,"card_image-height":396,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/s2_fields.png","wide_image-width":1025,"wide_image-height":492}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"cloudcover<\/code>. However, in hilly regions such as Laurel Ridge State Park, it\u2019s rare to have many cloud free days and so long gaps may occur between cloud free images. For this app I\u2019ve therefore incorporated a 5% and 10% cloud cover filter for the user to explore.<\/p><\/blockquote>\n"},{"acf_fc_layout":"content","content":"cloudcover<\/code> and acquisitiondate<\/code> into the image service\u2019s REST query as a where clause to find out how many images that match the user\u2019s filter are available, and importantly, what is the relevant raster image object ID. The objectid<\/code> is what we will need to later display individual raster images on our app. We will also pass the geometry extent we set up earlier as parameters to limit the query to our specific area.<\/p>\noutFields<\/code> to define the attributes we want to retrieve from the service, specifically acquisitiondate<\/code>, cloudcover<\/code> and objectid<\/code>.<\/p>\n\r\n final<\/span> whereClause = \"acquisitiondate >= DATE '$start<\/span>' \"<\/span>\r\n \"AND acquisitiondate < DATE '$end<\/span>' \"<\/span>\r\n \"AND cloudcover <= $_selectedCloudCover<\/span>\"<\/span>;\r\n\r\n final<\/span> encodedWhere = Uri<\/span>.encodeComponent(whereClause);\r\n\r\n final<\/span> uri = Uri<\/span>.parse(\r\n 'https:\/\/sentinel.arcgis.com\/arcgis\/rest\/services\/Sentinel2\/ImageServer\/query'<\/span>\r\n '?where=$encodedWhere<\/span>'<\/span>\r\n '&geometry=$xMin<\/span>, $yMin<\/span>, $xMax<\/span>, $yMax<\/span>'<\/span>\r\n '&geometryType=esriGeometryEnvelope'<\/span>\r\n '&inSR=4326'<\/span>\r\n '&spatialRel=esriSpatialRelIntersects'<\/span>\r\n '&outFields=acquisitiondate,objectid,cloudcover'<\/span>\r\n '&returnGeometry=false'<\/span>\r\n '&f=json'<\/span>,\r\n ); \r\n\r\n<\/code><\/pre>\noutFields<\/code> for any rasters matching the required inputs.<\/p>\nHow to display raster images<\/strong><\/h3>\n
ImageServiceRaster<\/code> object for each available raster using the Sentinel-2 image service URI, then setting a mosaic rule (specifies how a collection of raster datasets, such as those available through the image service, are displayed) to the image service raster and applying a where clause to it. This limits the imagery to a single result using the image\u2019s object ID we retrieved earlier.<\/p>\nobjectID<\/code>. The app won\u2019t request the raster again if it\u2019s already there. Check out the code in my Github repo<\/a> learn more.<\/em><\/p>\n\r\nfinal<\/span> raster = ImageServiceRaster(\r\n uri: Uri<\/span>.parse('https:\/\/sentinel.arcgis.com\/arcgis\/rest\/services\/Sentinel2\/ImageServer'<\/span>),\r\n);\r\n\r\nraster.mosaicRule = MosaicRule()\r\n ..whereClause = 'OBJECTID = $objectId<\/span>'<\/span>;\r\n\r\nfinal<\/span> rasterLayer = RasterLayer.withRaster(raster)..name = layerName;\r\nawait<\/span> rasterLayer.load().whenComplete(() => map.operationalLayers.add(rasterLayer));\r\n\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"content","content":"How to configure the interaction with the map<\/strong><\/h3>\n
\r\n _mapViewController.onDrawStatusChanged.listen((event) {\r\n if<\/span> (event == DrawStatus.completed) {\r\n markLayerDrawnIfComplete(layerName);\r\n }\r\n });\r\n\r\n<\/code><\/pre>\n\r\n for<\/span> (final<\/span> layer in<\/span> _map.operationalLayers.whereType<RasterLayer>()) {\r\n layer.isVisible = false<\/span>;\r\n }\r\n\r\n if<\/span> (selectedLayer != null<\/span>) {\r\n selectedLayer.isVisible = true<\/span>;\r\n }\r\n\r\n<\/code><\/pre>\nIntegrating raster functions into the app<\/strong><\/h2>\n
\r\n imageServiceRaster.renderingRule = RenderingRule.withRenderingRuleJson(\r\n jsonEncode({\r\n 'rasterFunction'<\/span>: 'Color Infrared with DRA'<\/span>,\r\n }),\r\n );\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"image","image":{"ID":2865052,"id":2865052,"title":"ImageryIR","filename":"ImageryIR.png","filesize":3615234,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/ImageryIR.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/sdk-flutter\/developers\/how-to-integrate-satellite-imagery-in-mobile-app-development-with-flutter-maps-sdk\/imageryir","alt":"Four mobile phone screens displaying satellite imagery","author":"10242","description":"","caption":"Imagery is rendered with the Color Infrared with DRA raster function. Red areas reflect areas of healthy vegetation and earthy shades reflect poor or no vegetation.","name":"imageryir","status":"inherit","uploaded_to":2861932,"date":"2025-06-27 09:50:47","modified":"2025-06-27 09:52:13","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1767,"height":896,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/ImageryIR-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/ImageryIR.png","medium-width":464,"medium-height":235,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/ImageryIR.png","medium_large-width":768,"medium_large-height":389,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/ImageryIR.png","large-width":1767,"large-height":896,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/ImageryIR-1536x779.png","1536x1536-width":1536,"1536x1536-height":779,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/ImageryIR.png","2048x2048-width":1767,"2048x2048-height":896,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/ImageryIR-826x419.png","card_image-width":826,"card_image-height":419,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/06\/ImageryIR.png","wide_image-width":1767,"wide_image-height":896}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Beyond image services<\/h3>\n
Conclusion<\/strong><\/h2>\n