Aplicacions amb Flutter, Dart i Flame

Mostrem un primer mapa

Per començar, mostrarem un mapa senzill. Sempre que es mostra un mapa, cal indicar la posició on es centrarà la vista. Opcionalment també podem indicar un valor de zoom; és molt convenient fer-ho, si no volem que ens mostri un mapa vist des de molt lluny. Hem posat les coordenades de l'entrada de l'ETSEIB, per tant, el mapa quedarà centrat en aquest punt.

Com ja hem fet en exemples anteriors, crearem una pantalla principal (a la carpeta screens) i li direm al programa principal que la mostri.

main.dart

import 'package:flutter/material.dart';
import 'package:mapes/screens/pant_principal.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: PantPrincipal()
    );
  }
}

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> {
  final CameraPosition _posicioInicial = CameraPosition(
    target: LatLng(41.384929, 2.115582),
    zoom: 17
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Mapa")),
      body: GoogleMap(initialCameraPosition: _posicioInicial),
    );
  }
}

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