flutterdartopenstreetmap

How to display a map within the flutter app instead of opening it in a web view


import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart';

import 'package:zuri_health/models/hospital/hospital.dart';

class HospitalDetails extends StatelessWidget {
  final Hospital hospital;

  const HospitalDetails({
    Key ? key,
    required this.hospital
  }): super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(hospital.name ? ? 'Hospital Details'),
      ),
      body: Column(
        children: [
          Expanded(
            child: FlutterMap(
              options: MapOptions(
                center: LatLng(
                  hospital.location!.latitude!, hospital.location!.longitude!),
                zoom: 13.0,
              ),
              layers: [
                TileLayerOptions(
                  urlTemplate:
                  "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
                  subdomains: ['a', 'b', 'c'],
                ),
                MarkerLayerOptions(
                  markers: [
                    Marker(
                      width: 80.0,
                      height: 80.0,
                      point: LatLng(hospital.location!.latitude!,
                        hospital.location!.longitude!),
                      builder: (ctx) =>
                      const Icon(
                        Icons.location_on,
                        color: Colors.red,
                      ),
                    ),
                  ],
                ),
              ],
            )),
          Padding(
            padding: const EdgeInsets.all(16.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const Text(
                      'Address:',
                      style: TextStyle(fontWeight: FontWeight.bold),
                    ),
                    Text(hospital.address ? ? 'Unknown Address'),
                    const SizedBox(height: 16.0),
                      const Text(
                          'Services:',
                          style: TextStyle(fontWeight: FontWeight.bold),
                        ),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: hospital.services!.map < Widget > ((service) {
                            return Text(service.name ? ? '');
                          }).toList(),
                        ),
                ],
              ),
          ),
        ],
      ),
    );
  }
}

I am trying to display the map within my Flutter App but am getting the following errors,which I have been trying to debug but am hitting a bottleneck.

The named parameter 'layers' isn't defined. Try correcting the name to an existing named parameter's name, or defining a named parameter with the name 'layers'.

The method 'TileLayerOptions' isn't defined for the type 'HospitalDetails'. Try correcting the name to the name of an existing method, or defining a method named 'TileLayerOptions'.

The method 'MarkerLayerOptions' isn't defined for the type 'HospitalDetails'. Try correcting the name to the name of an existing method, or defining a method named 'MarkerLayerOptions'.


Solution

  • I had to change the named parameter 'layers[]' into children[], changed the method 'TileLayerOptions' into 'TileLayer' and method 'MarkerLayerOptions' into 'MarkerLayer'

    class HospitalDetails extends StatelessWidget {
      final Hospital hospital;
    
      const HospitalDetails({
        Key ? key,
        required this.hospital
      }): super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text(hospital.name ? ? 'Hospital Details'),
          ),
          body: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Expanded(
                child: FlutterMap(
                  options: MapOptions(
                    center: LatLng(
                      hospital.location!.latitude!,
                      hospital.location!.longitude!,
                    ),
                    zoom: 13.0,
                  ),
                  children: [
                    TileLayer(
                      urlTemplate:
                      "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
                      subdomains: const ['a', 'b', 'c'],
                    ),
                    MarkerLayer(
                      markers: [
                        Marker(
                          width: 80.0,
                          height: 80.0,
                          point: LatLng(
                            hospital.location!.latitude!,
                            hospital.location!.longitude!,
                          ),
                          builder: (ctx) => Icon(
                            Icons.location_on,
                            color: AppTheme.red,
                            size: 40.0,
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(16.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      const Text(
                          'Address:',
                          style: TextStyle(fontWeight: FontWeight.bold),
                        ),
                        Text(hospital.address ? ? 'Unknown Address'),
                        const SizedBox(height: 16.0),
                          const Text(
                              'Services:',
                              style: TextStyle(fontWeight: FontWeight.bold),
                            ),
                            Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: hospital.services!.map < Widget > ((service) {
                                return Text(service.name ? ? '');
                              }).toList(),
                            ),
                    ],
                  ),
              ),
            ],
          ),
        );
      }
    }