stadtbote-app/lib/popups/map_popup.dart

import 'dart:async';

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

import '../model/job_tour.dart';

void showMapPopup(BuildContext context, JobTour currentTour, List<JobTour> tourList) {
  showPopupWindow(
    context,
    //childSize:Size(240, 800),
    gravity: KumiPopupGravity.center,
    //curve: Curves.elasticOut,
    bgColor: Colors.grey.withOpacity(0.5),
    clickOutDismiss: true,
    clickBackDismiss: true,
    customAnimation: false,
    customPop: false,
    customPage: false,
    // targetRenderBox: (btnKey.currentContext.findRenderObject() as RenderBox),
    //needSafeDisplay: true,
    underStatusBar: false,
    underAppBar: false,
    //offsetX: -180,
    //offsetY: 50,
    duration: const Duration(milliseconds: 300),
    onShowStart: (pop) {},
    onShowFinish: (pop) {},
    onDismissStart: (pop) {},
    onDismissFinish: (pop) {},
    onClickOut: (pop) {},
    onClickBack: (pop) {},
    childFun: (pop) {
      var mapController = MapController();
      Map<int, StreamController<bool>> streamController = {};

      List<Widget> tourWidgets = [];
      for(JobTour tour in tourList) {
        var currentStreamController = StreamController<bool>();
        streamController[tour.sort] = currentStreamController;

        tourWidgets.add(
          GestureDetector(
            onTap: () async {
              mapController.move(LatLng(tour.pos!.lat, tour.pos!.long), mapController.zoom);

              streamController[currentTour.sort]!.sink.add(false);

              currentTour = tour;
              streamController[tour.sort]!.sink.add(true);
            },
            child: SizedBox(
              width: 70,
              height: 80,
              child: Column(
                children: [
                  Container(
                    height: 50,
                    width: 70,
                    color: Colors.transparent,
                    child: const Icon(
                      Icons.person_pin_circle,
                      color: Colors.blue,
                      size: 56,
                    ),
                  ),
                  const SizedBox(height: 2),
                  SizedBox(
                    height: 12.0,
                    width: 70,
                    child: Text(
                      "Station ${tour.sort}",
                      softWrap: true,
                      textAlign: TextAlign.center,
                      style: const TextStyle(
                        color: Colors.black,
                        fontSize: 10.0,
                      ),
                    ),
                  ),
                  StreamBuilder<bool>(
                      stream: currentStreamController.stream,
                      builder: (context, snapshot) {
                        bool tourSelected = tour.sort == currentTour.sort;
                        if (snapshot.hasData) {
                          tourSelected = snapshot.data as bool;
                        }

                        return Container(
                          height: 2,
                          color: tourSelected ? Colors.green : Colors.transparent,
                        );
                      }
                  ),
                ],
              ),
            ),
          ),
        );
      }

      final ValueNotifier<bool> valueNotifier = ValueNotifier<bool>(true);

      List<Marker> markers = [];
      for (var tour in tourList) {
        markers.add(
          Marker(
            builder: (context) => const Icon(Icons.person_pin_circle, size: 56, color: Colors.blue),
            point: LatLng(tour.pos!.lat, tour.pos!.long)
          )
        );
      }

      return Container(
          padding: const EdgeInsets.fromLTRB(30, 0, 30, 0),
          key: GlobalKey(),
          height: MediaQuery.of(context).size.height * 0.6,
          child: Container(
            height: 100,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10),
              color: Colors.white,
              border: Border.all(
                color: Colors.grey,
                width: 0.5,
              ),
            ),
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Column(
                children: [
                  SizedBox(
                    height: 80,
                    child: SingleChildScrollView(
                      scrollDirection: Axis.horizontal,
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: tourWidgets,
                      ),
                    )
                  ),
                  Row(
                    children: [
                      Expanded(
                        child: ValueListenableBuilder<bool>(
                          valueListenable: valueNotifier,
                          builder: (context, value, child) {
                            return AnimatedToggleSwitch<bool>.dual(
                              current: value,
                              first: true,
                              second: false,
                              dif: 0.0,
                              borderColor: Colors.transparent,
                              borderWidth: 5.0,
                              height: 25,
                              boxShadow: const [
                                BoxShadow(
                                  color: Colors.black26,
                                  spreadRadius: 1,
                                  blurRadius: 2,
                                  offset: Offset(0, 1.5),
                                ),
                              ],
                              onChanged: (b) {
                                valueNotifier.value = b;
                                mapController.move(mapController.center, b ? 14.0 : 16.0);
                              },
                              colorBuilder: (b) => b ? Colors.red : Colors.green,
                              textBuilder: (value) => value
                                  ? const Center(child: Text('Fern'))
                                  : const Center(child: Text('Nah')),
                            );
                          },
                        ),
                      ),
                    ],
                  ),
                  const SizedBox(height: 10),
                  Expanded(
                    child:
                    AbsorbPointer(
                      absorbing: true,
                      child: FlutterMap(
                        mapController: mapController,
                        options: MapOptions(
                          center: LatLng(currentTour.pos!.lat, currentTour.pos!.long),
                          zoom: 14,
                        ),
                        children: [
                          TileLayer(
                            urlTemplate: 'https://google-maps.assecutor.de/vt/lyrs=m@130&hl=en&x={x}&y={y}&z={z}',
                            userAgentPackageName: 'com.example.app',
                          ),
                          MarkerLayer(
                            markers: markers,
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
        )
      );
    },
  );
}