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

Question

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'.

Answer 1

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(),
                        ),
                ],
              ),
          ),
        ],
      ),
    );
  }
}