flutter - FlutterマップはAPIからデータを取得します

Question

flutter_map を使用して django の API からマーカー情報を追加したいのですが、このマップ ビューのコードで Flutter 2.5 を使用しています。助けが必要です。

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:flutter_map_marker_cluster/flutter_map_marker_cluster.dart';
import 'package:latlong2/latlong.dart';
 
void main() => runApp(const EventsView());
 
class EventsView extends StatelessWidget {
  const EventsView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var markers = <Marker> [
      Marker(
          width: 80.0,
          height: 80.0,
          point: LatLng(50.67, 5.08),
          builder: (ctx) => IconButton(
                icon: const Icon(Icons.location_pin,
                    size: 50.0, color: Colors.black),
                onPressed: () {
                  showModalBottomSheet(
                      shape: const RoundedRectangleBorder(
                        borderRadius: BorderRadius.only(
                            topRight: Radius.circular(30),
                            topLeft: Radius.circular(30)),
                        //side:BorderSide(width:3, color: Colors.black)
                      ),
                      context: context,
                      builder: (builder) {
                        return Card(
                            shape: const RoundedRectangleBorder(
                              borderRadius: BorderRadius.only(
                                  topRight: Radius.circular(30),
                                  topLeft: Radius.circular(30)),
                              //side:BorderSide(width:3, color: Colors.black)
                            ),
                            child: Padding(
                              padding: const EdgeInsets.only(
                                  left: 0, right: 0, top: 2.0, bottom: 15.0),
                              child: SingleChildScrollView(
                                child: Column(
                                  mainAxisSize: MainAxisSize.min,
                                  children: <Widget>[
                                    const Icon(Icons.horizontal_rule_sharp, size: 40.0,),
                                    ListTile(
                                      leading: CircleAvatar(
                                          radius: 40,
                                          backgroundColor:
                                              Colors.brown.shade900,
                                          backgroundImage: const NetworkImage(
                                              'https://opfield.com/media/event/2021/09/13/g11233526659.jpg'),),
                                      title: const Padding(
                                        padding: EdgeInsets.only(bottom: 10),
                                        child: Text(
                                          "Journée Brosserie Le 22/08/2021 PA POMPE SMG (Gaz)",
                                          style: TextStyle(fontSize: 18),
                                        ),
                                      ),
                                      subtitle: RichText(
                                        text: const TextSpan(
                                          children: [
                                            WidgetSpan(
                                                child: Icon(Icons.location_pin,
                                                    size: 18,
                                                    color: Colors.grey)),
                                            TextSpan(
                                                text:
                                                    "Rue De L'abbaye Du Val, 95630 Mériel, France"),
                                          ],
                                          style: TextStyle(color: Colors.grey),
                                        ),
                                      ),
                                    ),
                                    const Divider(),
                                    const Align(
                                      alignment: Alignment.centerLeft,
                                      child: Padding(
                                        padding: EdgeInsets.only(left: 50),
                                        child: Text(
                                          "Date",
                                          style: TextStyle(),
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ));
                      });
                },
              ),),
    ];
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Column(
          children: [
            Flexible(
              child: FlutterMap(
                options: MapOptions(
                  plugins: [
                    MarkerClusterPlugin(),
                  ],
                  center: LatLng(48.5, 5.09),
                  zoom: 4.0,
                ),
                layers: [
                  TileLayerOptions(
                    urlTemplate:
                        'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                    subdomains: ['a', 'b', 'c'],
                    tileProvider: const NonCachingNetworkTileProvider(),
                  ),
                  MarkerClusterLayerOptions(
                    maxClusterRadius: 120,
                    size: const Size(40, 40),
                    fitBoundsOptions: const FitBoundsOptions(
                      padding: EdgeInsets.all(50),
                    ),
                    markers: markers,
                    polygonOptions: const PolygonOptions(
                        borderColor: Colors.blueAccent,
                        color: Colors.black12,
                        borderStrokeWidth: 3),
                    builder: (context, markers) {
                      return FloatingActionButton(
                        child: Text(markers.length.toString()),
                        onPressed: null,
                      );
                    },
                  ),
                ],
              )
            )
          ],
        )
      ),
    );
  }
}

必要なのは、新しい Flutter アプリを flutter_map でビルドし、バックエンドを Django で作成することです ... ... ... 新しい Flutter アプリを flutter_map で作成し、バックエンドを Django で作成するだけです ...