Show shapefile data in Flutter app

To display the data from your shapefile on a map in Flutter, you can use the flutter_map package. Here are the steps you can follow:

Add the flutter_map package to your dependencies in pubspec.yaml:
yaml


 dependencies:
      flutter_map: ^0.14.0

Import the package in your code:


 dart
 
    import 'package:flutter_map/flutter_map.dart';


Create a new FlutterMap widget and add a TileLayerWidget to display a map tile layer:
dart



  FlutterMap(
      options: MapOptions(
        center: LatLng(-20, 133), // Center the map on your desired coordinates
        zoom: 5, // Set the initial zoom level
      ),
      layers: [
        TileLayerWidget(
          options: TileLayerOptions(
            urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            subdomains: ['a', 'b', 'c'], // Add subdomains for the tile layer
          ),
        ),
      ],
    )

Add a PolylineLayerWidget to display the shapefile data on the map:
dart



 FlutterMap(
      // ...
      layers: [
        // ...
        PolylineLayerWidget(
          options: PolylineLayerOptions(
            polylines: [
              Polyline(
                points: [
                  LatLng(-21.762688, 130.074418),
                  LatLng(-17.165066, 130.338266),
                  LatLng(-16.027996, 135.043554),
                  LatLng(-18.836765, 138.913324),
                ],
                color: Colors.blue, // Set the color of the polyline
                strokeWidth: 3, // Set the width of the polyline
              ),
            ],
          ),
        ),
      ],
    )

This will display a map with a tile layer from OpenStreetMap and a polyline layer showing the shapefile data. You can customize the appearance of the map and the polyline to suit your needs.