Aplicacions amb Flutter, Dart i Flame

L'usuari pot afegir marcadors

Podem fer que l'usuari pugui afegir marcadors. Cada cop que l'usuari piqui a la pantalla, se li preguntarà el nom del marcador desitjat; un cop introduït, s'afegirà el nou marcador. La funció corresponent es crida a l'opció onTap del mapa.

...
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Mapa")),
      body: GoogleMap(
        initialCameraPosition: _posicioInicial,
        mapType: MapType.satellite,
        markers: _marcadors,
        onTap: (posicio) => posaMarcador(posicio),
      ),
    );
  }
}

A la funció posaMarcador se li passa, com a paràmetre, la posició on s'ha picat. Creem un objecte TextEditingController que serà el que gestionarà el camp de text. Creem un quadre de diàleg que, a més d'un títol, tindrà un camp de text i dos botons. Aquest camp tindrà un text d'ajuda (hintText). El botó de cancel·lar retornarà un nul i el de guardar enviarà el text introduït per l'usuari. El quadre de diàleg pot trigar, per això s'ha definit com asíncron (async) i s'hi ha posat una espera (await). El resultat del quadre de diàleg és un text que es guarda a la variable titol. Si aquesta té un contingut vàlid, s'afegeix un nou marcador; indicant la posició, l'identificador i el títol. Com a identificador hem posat la posició, així evitem que es puguin crear dos marcadors en el mateix punt.

pant_principal.dart

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

class PantPrincipal extends StatefulWidget {
  const PantPrincipal({super.key});

  @override
  State<PantPrincipal> createState() => _PantPrincipalState();
}

class _PantPrincipalState extends State<PantPrincipal> {
  //GoogleMapController? _controlador;
  final CameraPosition _posicioInicial = CameraPosition(
    target: LatLng(41.382865, 2.1153599),
    zoom: 16
  );
  final Set<Marker> _marcadors = {
    Marker(
      markerId: MarkerId("ETSEIB"), 
      position: LatLng(41.384929, 2.115582),
      infoWindow: InfoWindow(title: "ETSEIB")
    ),
    Marker(
      markerId: MarkerId("EPSEB"), 
      position: LatLng(41.383905, 2.112732),
      infoWindow: InfoWindow(title: "EPSEB")
    ),
    Marker(
      markerId: MarkerId("ETSAB"), 
      position: LatLng(41.384425, 2.113749),
      infoWindow: InfoWindow(title: "ETSAB")
    ),
    Marker(
      markerId: MarkerId("FME"), 
      position: LatLng(41.383522, 2.115755),
      infoWindow: InfoWindow(title: "FME")
    ),
  };

  void posaMarcador(LatLng posicio) async{
    TextEditingController controlText = TextEditingController();
    String? titol = await showDialog<String>(context: context, builder: (BuildContext context){
      return AlertDialog(
        title: Text("Afegeix el nom del marcador"),
        content: TextField(
          controller: controlText,
          decoration: InputDecoration(hintText: "Lloc destacat"),
        ),
        actions: [
          TextButton(onPressed: () => Navigator.of(context).pop(null), child: Text("Cancel·lar")),
          TextButton(onPressed: () => Navigator.of(context).pop(controlText.text), child: Text("Guardar"))
        ],
      );
    });
    if(titol != null && titol.isNotEmpty){
      setState(() {
        _marcadors.add(
          Marker(
            markerId: MarkerId(posicio.toString()),
            position: posicio,
            infoWindow: InfoWindow(title: titol)
          )
        );
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Mapa")),
      body: GoogleMap(
        initialCameraPosition: _posicioInicial,
        mapType: MapType.satellite,
        markers: _marcadors,
        onTap: (posicio) => posaMarcador(posicio),
      ),
    );
  }
}

Aquesta obra d'Oriol Boix està llicenciada sota una llicència no importada Reconeixement-NoComercial-SenseObraDerivada 3.0.