ibrierley / flutter_map_line_editor

A basic line/poly editor that works with flutter_map and dragmarkers.
MIT License
44 stars 25 forks source link

no filled colors on polygon #27

Closed jinsyu closed 1 year ago

jinsyu commented 2 years ago

Thanks for your awesome jobs. really appreciate your dedication.

Everything works on i wanted to, but only filled colors. I did exactly same things with your examples. I don't know why polygons don't have filled colors.

any advice would be great. thanks.

ibrierley commented 2 years ago

What styling are you using ?

jinsyu commented 2 years ago

I don't know what you are asking? I put whole code of the page.

import 'dart:async';

import 'package:flutter/material.dart'; import 'package:flutter_map/plugin_api.dart'; import 'package:flutter_map_dragmarker/dragmarker.dart'; import 'package:flutter_map_line_editor/polyeditor.dart'; import 'package:flutter_map_location_marker/flutter_map_location_marker.dart'; import 'package:latlong2/latlong.dart'; import 'package:myplace/constants/colors.constants.dart'; import 'package:myplace/utils/logger.service.dart';

enum EditType { marker, line, circle, polygon }

class HomeScreen extends StatefulWidget { const HomeScreen({Key? key}) : super(key: key);

@override State createState() => _HomeScreenState(); }

class _HomeScreenState extends State { late CenterOnLocationUpdate _centerOnLocationUpdate; late StreamController<double?> _centerCurrentLocationStreamController; bool isEditMode = false; var editType = EditType.marker;

final mapController = MapController();

late PolyEditor polyEditor;

List polygons = []; var testPolygon = Polygon( color: Colors.deepOrange, points: [], borderColor: Colors.red, isFilled: true, ); List polyLines = []; var testPolyline = Polyline(color: Colors.deepOrange, points: []);

@override void initState() { super.initState(); _centerOnLocationUpdate = CenterOnLocationUpdate.always; _centerCurrentLocationStreamController = StreamController<double?>();

polyEditor = PolyEditor(
  addClosePathMarker: false,
  points: testPolygon.points,
  pointIcon: const Icon(Icons.crop_square, size: 23),
  intermediateIcon: const Icon(Icons.lens, size: 15, color: Colors.grey),
  callbackRefresh: () => {setState(() {})},
);

polygons.add(testPolygon);
polyLines.add(testPolyline);

}

@override void dispose() { _centerCurrentLocationStreamController.close().then((value) => null); mapController.dispose(); super.dispose(); }

@override Widget build(BuildContext context) { return FlutterMap( mapController: mapController, options: MapOptions( onTap: (tapPosition, point) { polyEditor.add(testPolygon.points, point); logger.d(testPolygon.points); }, allowPanningOnScrollingParent: false, center: LatLng(37.5547125, 126.9707878), zoom: 7.0, interactiveFlags: InteractiveFlag.pinchZoom | InteractiveFlag.drag, plugins: [ DragMarkerPlugin(), LocationMarkerPlugin( centerCurrentLocationStream: _centerCurrentLocationStreamController.stream, centerOnLocationUpdate: _centerOnLocationUpdate, ), ], ), nonRotatedChildren: [ Positioned( left: 20, bottom: 20, child: FloatingActionButton( heroTag: "currentLocation", backgroundColor: Colors.white, elevation: 2, onPressed: () { setState( () => _centerOnLocationUpdate = CenterOnLocationUpdate.always, ); _centerCurrentLocationStreamController.add(16); }, child: const Icon( Icons.my_location, color: AppColors.black, ), ), ), Positioned( right: 20, bottom: 20, child: FloatingActionButton( backgroundColor: Colors.white, elevation: 2, onPressed: () { isEditMode = !isEditMode; setState(() {}); }, child: isEditMode ? const Text( "확인", style: TextStyle(color: AppColors.black, fontSize: 16), ) : Image.asset( "assets/images/logo.png", width: 35, height: 35, ), ), ), isEditMode ? Positioned( right: 20, bottom: 90, child: Column( children: [ buildEditButton( EditType.marker, "assets/images/edit-type-marker.png"), const SizedBox(height: 10), buildEditButton( EditType.line, "assets/images/edit-type-line.png"), const SizedBox(height: 10), buildEditButton( EditType.circle, "assets/images/edit-type-circle.png"), const SizedBox(height: 10), buildEditButton(EditType.polygon, "assets/images/edit-type-polygon.png"), ], ), ) : Container(), ], layers: [ MarkerLayerOptions( markers: [ Marker( width: 80.0, height: 80.0, point: LatLng(34.939899, 127.544801), builder: (ctx) => Container( child: const FlutterLogo(), color: Colors.red, )), ], ), TileLayerOptions( urlTemplate: "http://{s}.google.com/vt/lyrs=m&hl=ko&gl=KR&x={x}&y={y}&z={z}", subdomains: ['mt0', 'mt1', 'mt2', 'mt3'], maxZoom: 19, minZoom: 3, ), LocationMarkerLayerOptions(), PolylineLayerOptions(polylines: polyLines), DragMarkerPluginOptions(markers: polyEditor.edit()), ], ); }

FloatingActionButton buildEditButton( EditType thisEditType, String imagePath) { return FloatingActionButton( heroTag: imagePath, backgroundColor: editType == thisEditType ? AppColors.primary : AppColors.white, elevation: 2, onPressed: () { editType = thisEditType; setState(() {}); }, child: Image.asset( imagePath, width: 35, height: 35, color: editType == thisEditType ? AppColors.white : AppColors.black, ), ); } }

=================================

ibrierley commented 2 years ago

Yes, you do, so thats ok.

Try addClosePathMarker: true

MaxiStefan commented 2 years ago

I have also run the example, as is, with addClosedPathMarker: true for polygon and it is still not filled with a color.

ibrierley commented 2 years ago

The polygon example in flutter_maps example folder, or the one above? If the one above, thats a polyline, not a polygon. Swap it over to a Polygon

ibrierley commented 1 year ago

Closing this as I assume resolved, but feel free to re-open.