2023.7.24 FlutterͰ΋஍ਤΛඳ͖͍͓ͨ࿩ YUMEMI Inc. Flutter Engineer - Onoue Ryotaro YOUTRUST × ΏΊΈ Flutter LTձ@ौ୩ #2

0. whoami

1. Today’s topic FlutterͰ΋஍ਤΛඳ͖͍ͨΜ͡Όɻ

https: / / github.com/ingen084/KyoshinEewViewerIngen ஍ਤඳըʹؔͯ͠KyoshinEewViewer for Ingenͱ͍͏ ΦʔϓϯιʔεͷΞϓϦέʔγϣϯΛࢀߟʹ ͍ͯ͠·͢ (C#.NET, AvaloniaUI੡)

1. ཁ݅ ࡞Δલʹ .. . 1. άϦάϦಈ͔ͤΔ (=ΠϯλϥΫςΟϒͳ)Ϛοϓʹ͍ͨ͠ - Ҡಈɾ֦େॖখ - ͳΊΒ͔ʹಈ͘Α͏ʹ͍ͨ͠ 2. දࣔྖҬΛ Controller ͔Βࣗ༝ʹૢ࡞Ͱ͖ΔΑ͏ʹ͍ͨ͠ - த৺ͷҢ౓ܦ౓ɾζʔϜ཰ͷมߋɾΞχϝʔγϣϯ 3. ೚ҙͷ Widget Λ஍ਤͷ্ʹॏͶΒΕΔΑ͏ʹ͍ͨ͠ - PlatformViewΛ࢖͏ͱɺϚοϓҠಈ࣌ʹগ͠஗ΕͯWidgetͷҐஔमਖ਼͕͔͔ΔͨΊ BAD - ը໘্ͷWidgetͷ਺͕ଟ͍ͱ Ң౓ܦ౓ <—> ը໘࠲ඪͷMethodChannelΛୟ͘ճ਺͕ଟ͘ͳΓ ΍ΓऔΓʹ͕͔͔࣌ؒΔ ↑ ͜ͷ໰୊͸ ڈ೥ͷ12݄ʙ2݄ࠒͷMapBoxΛ࢖ͬͨΞϓϦ։ൃڠྗͰࢮ͵΄Ͳۤ࿑ͨ͠

2. ஍ਤσʔλͷ४උ ͓ֆ͔͖લͷԼ४උ

2. ஍ਤσʔλͷ४උ https: / / www.data.jma.go.jp/developer/gis.html https: / / github.com/datasets/geo-countries/ blob/master/data/countries.geojson

No content

߹ܭͰ2GB͘Β͍͋Δ! Ͱ͔͗͢Δ!!!! GeoJSON

Douglas–Peucker๏ Λ༻͍ͯɺઢ෼ͷ؆ૉԽΛߦ͏ 2-1. σʔλѹॖख๏ 1 ڐ༰ൣғ಺Ͱ஍ਤσʔλΛখ͘͞Ͱ͖Δ

2-2. σʔλѹॖख๏ 2 A B A B Ң౓ܦ౓ͷ഑ྻ ཁૉ͝ͱʹ෼ղ͢Δͱʜ GeoJSONͱTopoJSONͷҧ͍ GeoJSON

2-2. ѹॖख๏ 2 A B A B Ң౓ܦ౓ͷ഑ྻ ཁૉ͝ͱʹ෼ղ͢Δͱʜ GeoJSONͱTopoJSONͷҧ͍ GeoJSON ॏෳ͍ͯͯ͠ϜμͰ͸ σʔλαΠζతʹ΋͓ֆ͔͖తʹ΋ A B

A B 0 arcs ʹ෼ղ͢Δ 1 GeoJSONͱTopoJSONͷҧ͍ TopoJSON 2-2. ѹॖख๏ 2

ݩσʔλ (FP+40/ .# %PVHMBVT1FVDLFS ద༻ޙ (FP+40/ .# ݩσʔλ (FP+40/ .#

3. ࠲ඪܥͷ͓࿩ Ң౓ܦ౓ͷ··͡Ό͓ֆ͔͖Ͱ͖ͳ͍!

3. ࠲ඪܥͷ͓࿩ ؙ͍஍ٿΛͲ͏΍ͬͯฏ໘ʹඳ͘ͷ͔ .. . ? ౤Ө࠲ඪ GlobalPoint(224.0, 101.4010) class LatLng extends Point { const LatLng(this.lat, this.lon) : super(lat, lon); final double lat; final double lon; } class GlobalPoint extends Point { const GlobalPoint(super.x, super.y); factory GlobalPoint.fromLatlng( LatLng latLng, Projection proj ) = > proj.project(latLng); LatLng toLatLng(Projection proj) = > proj.unproject(this); } Ң౓ܦ౓ LatLng(35,135) ը໘࠲ඪ -PDBM Offset(0, 0)

3. ࠲ඪܥͷ͓࿩ ͬ͟ͱ֓ཁ class LatLng extends Point { const LatLng(this.lat, this.lon) : super(lat, lon); final double lat; final double lon; } class GlobalPoint extends Point { const GlobalPoint(super.x, super.y); factory GlobalPoint.fromLatlng( LatLng latLng, Projection proj ) = > proj.project(latLng); LatLng toLatLng(Projection proj) = > proj.unproject(this); } ը໘࠲ඪ -PDBM GlobalPoint(35,135) Ң౓ܦ౓ LatLng(35,135) ౤Ө࠲ඪ GlobalPoint(224.0, 101.4010) class WebMercatorProjection implements Projection { static const int tileSize = 256; static const pixelsPerLonDegree = tileSize / 360; static const pixelsPerLonRadian = tileSize / (2 * math.pi); static const origin = Offset(128, 128); @override GlobalPoint project(LatLng latLng) { final siny = math.min( math.max( math.sin(latLng.lat * (math.pi / 180)), -0.9999, ), 0.9999, ); return GlobalPoint( origin.dx + latLng.lon * pixelsPerLonDegree, origin.dy + 0.5 * math.log((1 + siny) / (1 - siny)) * -pixelsPerLonRadian, ); } @override LatLng unproject(GlobalPoint point) { final lng = point.x - origin.dx / pixelsPerLonDegree; final latRadians = (point.y - origin.dy) / -pixelsPerLonRadian; final lat = 180 / math.pi * (2 * math.atan(math.exp(latRadians)) - math.pi / 2); return LatLng(lat, lng); } } WebϝϧΧτϧਤ๏Λ༻͍ͯ౤Ө

3. ࠲ඪܥͷ͓࿩ ͬ͟ͱ֓ཁ ౤Ө࠲ඪ GlobalPoint(35,135) class LatLng extends Point { const LatLng(this.lat, this.lon) : super(lat, lon); final double lat; final double lon; } class GlobalPoint extends Point { const GlobalPoint(super.x, super.y); factory GlobalPoint.fromLatlng( LatLng latLng, Projection proj ) = > proj.project(latLng); LatLng toLatLng(Projection proj) = > proj.unproject(this); } Ң౓ܦ౓ LatLng(35,135) ը໘࠲ඪ -PDBM GlobalPoint(35,135) ౤Ө࠲ඪ GlobalPoint(224.0, 101.4010) class ProjectedPolygonFeature { ProjectedPolygonFeature._({ required this.code, required this.bbox, required this.points, }); final int? code; final LatLngBoundary bbox; final List points; } ىಈ࣌ʹɺಡΈࠐΈ - > ౤ӨΛࡁ·͓͖ͤͯ ౤ӨޙͷσʔλΛอ͓࣋ͯ͘͠

3. ࠲ඪܥͷ͓࿩ ͬ͟ͱ֓ཁ ౤Ө࠲ඪ GlobalPoint(35,135) class LatLng extends Point { const LatLng(this.lat, this.lon) : super(lat, lon); final double lat; final double lon; } class GlobalPoint extends Point { const GlobalPoint(super.x, super.y); factory GlobalPoint.fromLatlng( LatLng latLng, Projection proj ) = > proj.project(latLng); LatLng toLatLng(Projection proj) = > proj.unproject(this); } Ң౓ܦ౓ LatLng(35,135) ը໘࠲ඪ -PDBM GlobalPoint(35,135) 0 925 0 427 @freezed class MapState with _$MapState { const factory MapState({ @JsonKey(fromJson: _offsetFromJson, toJson: _offsetToJson) required Offset offset, required double zoomLevel, }) = _MapState; factory MapState.fromJson(Map json) = > _$MapStateFromJson(json); } extension MapStateProjection on MapState { / / / GlobalPointΛOffsetʹม׵͢Δ Offset globalPointToOffset(GlobalPoint point) { return Offset( (point.x - offset.dx) * zoomLevel, (point.y - offset.dy) * zoomLevel, ); } / / / ը໘࠲ඪOffsetΛGlobalPointʹม׵͢Δ GlobalPoint offsetToGlobalPoint(Offset offset) { return GlobalPoint( offset.dx / zoomLevel + this.offset.dx, offset.dy / zoomLevel + this.offset.dy, ); }a } 1. Offset(x,y)෼ͣΒ͢ 2. ݪ఺Λத৺ʹzoomLevelഒ͢Δ

3. ࠲ඪܥͷ͓࿩ ͬ͟ͱ֓ཁ ౤Ө࠲ඪ GlobalPoint(35,135) class LatLng extends Point { const LatLng(this.lat, this.lon) : super(lat, lon); final double lat; final double lon; } class GlobalPoint extends Point { const GlobalPoint(super.x, super.y); factory GlobalPoint.fromLatlng( LatLng latLng, Projection proj ) = > proj.project(latLng); LatLng toLatLng(Projection proj) = > proj.unproject(this); } Ң౓ܦ౓ LatLng(35,135) ը໘࠲ඪ -PDBM GlobalPoint(35,135) @freezed class MapState with _$MapState { const factory MapState({ @JsonKey(fromJson: _offsetFromJson, toJson: _offsetToJson) required Offset offset, required double zoomLevel, }) = _MapState; factory MapState.fromJson(Map json) = > _$MapStateFromJson(json); } extension MapStateProjection on MapState { / / / GlobalPointΛOffsetʹม׵͢Δ Offset globalPointToOffset(GlobalPoint point) { return Offset( (point.x - offset.dx) * zoomLevel, (point.y - offset.dy) * zoomLevel, ); } / / / ը໘࠲ඪOffsetΛGlobalPointʹม׵͢Δ GlobalPoint offsetToGlobalPoint(Offset offset) { return GlobalPoint( offset.dx / zoomLevel + this.offset.dx, offset.dy / zoomLevel + this.offset.dy, ); }a } 925 427 0 0

3. ࠲ඪܥͷ͓࿩ ͬ͟ͱ֓ཁ ౤Ө࠲ඪ GlobalPoint(35,135) class LatLng extends Point { const LatLng(this.lat, this.lon) : super(lat, lon); final double lat; final double lon; } class GlobalPoint extends Point { const GlobalPoint(super.x, super.y); factory GlobalPoint.fromLatlng( LatLng latLng, Projection proj ) = > proj.project(latLng); LatLng toLatLng(Projection proj) = > proj.unproject(this); } Ң౓ܦ౓ LatLng(35,135) ը໘࠲ඪ -PDBM GlobalPoint(35,135) 0 925 0 427 @freezed class MapState with _$MapState { const factory MapState({ @JsonKey(fromJson: _offsetFromJson, toJson: _offsetToJson) required Offset offset, required double zoomLevel, }) = _MapState; factory MapState.fromJson(Map json) = > _$MapStateFromJson(json); } extension MapStateProjection on MapState { / / / GlobalPointΛOffsetʹม׵͢Δ Offset globalPointToOffset(GlobalPoint point) { return Offset( (point.x - offset.dx) * zoomLevel, (point.y - offset.dy) * zoomLevel, ); } / / / ը໘࠲ඪOffsetΛGlobalPointʹม׵͢Δ GlobalPoint offsetToGlobalPoint(Offset offset) { return GlobalPoint( offset.dx / zoomLevel + this.offset.dx, offset.dy / zoomLevel + this.offset.dy, ); }a }

4. ࣮ࡍʹFlutterͰ͓ֆ͔͖͢Δ CustomPainter × GestureDetectorͷເͷίϥϘϨʔγϣϯ

4-1. CustomPainter ͓ֆ͔͖Widget flutter/rendering

4-1. CustomPainterͷ঺հ ͓ֆ͔͖Widget CustomPaint Widgetʹ CustomPainter classͷΠϯελϯεΛ౉͢ paintؔ਺಺Ͱ canvas ʹԿΛඳ͔͘఻͑Δ ࠶ඳը͢Δඞཁ͕͋Δ͔Ͳ͏͔

4-1. CustomPainter ͓ֆ͔͖Widget - ༷ʑͳਤܗΛඳըͰ͖Δ - ਤܗඳը࣌ʹϨΠΞ΢τ͢Δඞཁ͕ͳ͍ͷͰ ۪௚ʹStackͰॏͶͨΓ͢ΔΑΓ΋ߴύϑΥʔϚϯε flutter/rendering IUUQTEPDT fl VUUFSEFWDPPLCPPLF ff FDUTHSBEJFOUCVCCMFT

4-1. CustomPainter ͓ֆ͔͖Widget - ༷ʑͳਤܗΛඳըͰ͖Δ - ਤܗඳը࣌ʹϨΠΞ΢τ͢Δඞཁ͕ͳ͍ͷͰ ۪௚ʹStackͰॏͶͨΓ͢ΔΑΓ΋ߴύϑΥʔϚϯε flutter/rendering Flutter ๮άϥϑͷ࣮૷͔ΒֶͿ Container ͱ Canvas ͷ࢖͍෼͚ | CyberAgent Developers Blog https: / / developers.cyberagent.co.jp/blog/archives/36573/

͓ֆ͔͖Widget - ༷ʑͳਤܗΛඳըͰ͖Δ - ਤܗඳը࣌ʹϨΠΞ΢τ͢Δඞཁ͕ͳ͍ͷͰ ۪௚ʹStackͰॏͶͨΓ͢ΔΑΓ΋ߴύϑΥʔϚϯε Flutter ๮άϥϑͷ࣮૷͔ΒֶͿ Container ͱ Canvas ͷ࢖͍෼͚ | CyberAgent Developers Blog https: / / developers.cyberagent.co.jp/blog/archives/36573/ 4-1. CustomPainter Widget ਤܗඳըͰ͖ΔͷͰ ஍ਤඳ͚Δ! -> Ͳ͏΍ͬͯಈ͔͢…?

ΠϯλϥΫςΟϒͳૢ࡞ΛՄೳʹ - ը૾΍ө૾ͷදࣔྖҬΛ֦େɾॖখɾҠಈɾճస͢Δͷʹ࢖͑Δ - Listener - > GestureDetector - > Transform Ϣʔβͷૢ࡞؂ࢹ දࣔௐ੔ https: / / dartpad.dev/?id=e6f75e0d35a958257440ab514a4196af flutter/widgets 4-2. InteractiveViewer

ΠϯλϥΫςΟϒͳૢ࡞ΛՄೳʹ - ը૾΍ө૾ͷදࣔྖҬΛ֦େɾॖখɾҠಈɾճస͢Δͷʹ࢖͑Δ - Listener - > GestureDetector - > Transform Ϣʔβͷૢ࡞؂ࢹ දࣔௐ੔ https: / / dartpad.dev/?id=e6f75e0d35a958257440ab514a4196af flutter/widgets - ໰୊఺ - Ҡಈɾ֦େͯ͠ ཁૉ͕ը໘֎ʹग़͔ͨͲ͏͔Λ൑ผͰ͖ͳ͍ - Πϝʔδͱͯ͠͸WidgetΛը૾Խͯ͠ ͦΕΛࣸਅΞϓϦͰද͍ࣔͯ͠Δײ͡ - > දࣔྖҬʹ߹Θͤͯ࠷దԽͰ͖ͳ͍ - Controller͕ੜ͍͑ͯΔ͕ɺঢ়ଶΛߦྻͰอ͍࣋ͯ͠Δ - ஍ਤ޲͚ͷૢ࡞Λૢ࡞͠ʹ͍͘ 4-2. InteractiveViewer

4-3-1. MapStateͱMapViewModel ૊ΜͰͧ͘ʙ ঢ়ଶ؅ཧ InteractiveViewer Widgetͷத਎Λࢀߟʹͭͭ͠ ࣗલͰ஍ਤؔ࿈ͷؔ਺Λ࣮૷͍ͯ͘͠ (with Riverpod) - globalPointToOffset - handleScaleStart / handleScaleUpdate / . . . - animatedMoveTo(LatLng, Duration, Curve) - animatedZoomTo(double, Duration, Curve) - animatedApplyBounds (LatLngBoundary, Duration, Curve) ࣗ࡞

4-3-2. MapTouchHandlerWidget ૊ΜͰͧ͘ʙ λονݕ஌ͱঢ়ଶ؅ཧ - λονͷݕग़෦෼ (ಁ໌) - Listener - > GestureDetectorͰ Ϣʔβͷૢ࡞Λ؂ࢹ - ൃՐ࣌ʹ͸ MapViewModelͷ .handleXXؔ਺ΛݺΜͰ ঢ়ଶΛߋ৽ͤ͞Δ ࣗ࡞

4-3-3. BaseMapPainter ૊ΜͰͧ͘ʙ ஍ਤඳը - ੈք஍ਤɾ೔ຊ஍ਤΛCustomPainterͰ͓ֆ͔͖ - ֤छ࠷దԽ - ζʔϜഒ཰ʹԠͯ͡Douglas-Peucker ๏ Λద ༻ͯ͠ઢ෼Λ؆ૉԽ - ௿ζʔϜϨϕϧ࣌ͷ఺ͷ਺ΛݮΒ͢ - > ύϑΥʔϚϯε͕ྑ͘ͳΔ ↑ Ωϟογϡ͓ͯ͘͠ - ը໘֎ͷϙϦΰϯ͸ඳը͠ͳ͍Α͏ʹ ࣗ࡞

4-3-4. ׬੒඼ 39 - stackͰॏͶ͍ͯ͘ Stack( children: [ <എܠ৭>, <஍ਤඳը>, <΋Ζ΋Ζͷඳը> <δΣενϟʔݕ஌>, ], );

5. ·ͱΊ ૊Μͩͧ! - ஍ਤ͸೉͍͚͠ΕͲ ςΫ͍ ࣮૷͕͋ͬͨΓͯ͠ ͓΋͠Ζ͍ - leaflet.js ΍ MapLibre౳ͷ஍ਤؔ࿈ͷϥΠϒϥϦ΋ࢀߟʹͳΔ - FlutterͰ஍ਤΛඳ͍͍͘ײ͡ͷϥΠϒϥϦ͕ͳ͔ͬͨͷͰ ࠓޙ࡞͍͖͍ͬͯͨ - InteractiveViewer౳ͷWidgetͷ಺෦࣮૷ΛோΊͯ ͦΕΛࢀߟʹ࣮૷͢Δ͜ͱ͕Ͱ͖Δ - SwiftUIͱ͔ͩͱ͜ͷٕ͸࢖͑ͳ͍…? Φʔϓϯιʔεͷ͋Γ͕ͨΈ - CustomPainterͰදݱͷ෯͕޿͕Δ - ൺֱత௿ϨϕϧͳCanvasΛ࢖͏͜ͱͰ ٯʹදݱͷ෯͕޿͕Δ(͜ͱ΋͋Δ)

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠! ࣭໰ɾؾʹͳΔ͜ͱ͕͋Ε͹ ͍ͭͰ΋࿈བྷ͍ͩ͘͞! Follow me on Twitter (X?): @YumNumm TestFlight ιʔείʔυ