nouffer/rog_app
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

CPラベルが１文字しか出ない、起動が遅い

Browse Source
This commit is contained in:
Akira Miyata
2024-04-14 20:16:13 +09:00
parent f6b2a6c7d4
commit 4ef42216f8
18 changed files with 1520 additions and 372 deletions
Download Patch File Download Diff File Expand all files Collapse all files

463
lib/widgets/map_widget.dart
View File

@ -2,7 +2,6 @@ import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:flutter_map_location_marker/flutter_map_location_marker.dart';
import 'package:flutter_map_marker_cluster/flutter_map_marker_cluster.dart';
import 'package:flutter_polyline_points/flutter_polyline_points.dart';
import 'package:geojson_vi/geojson_vi.dart';
import 'package:get/get.dart';
@ -17,22 +16,8 @@ import 'package:rogapp/widgets/base_layer_widget.dart';
import 'package:rogapp/widgets/bottom_sheet_new.dart';
import 'package:rogapp/widgets/current_position_widget.dart';
import 'package:rogapp/widgets/game_state_view.dart';
import 'package:flutter_map_tile_caching/flutter_map_tile_caching.dart';
// map_widget.dartファイルは、アプリ内の地図表示を担当するウィジェットを定義しています。以下に、主要な部分を解説します。
// 地図表示に関連する主要な機能を提供しています。以下のような機能が含まれています。
//
// 地図の表示と操作
// マーカーの表示とカスタマイズ
// ルートの表示
// 現在位置の表示
// アイドル状態の処理
// ローディングインジケーターの表示
// ゲーム状態の表示
// 現在位置ボタンの表示
// StatefulWidgetを継承したクラスで、地図表示のメインウィジェットです。
//
class MapWidget extends StatefulWidget {
const MapWidget({Key? key}) : super(key: key);
@ -40,36 +25,131 @@ class MapWidget extends StatefulWidget {
State<MapWidget> createState() => _MapWidgetState();
}
// MapWidgetの状態を管理するクラスです。
//
class _MapWidgetState extends State<MapWidget> {
final IndexController indexController = Get.find<IndexController>();
// IndexControllerのインスタンスを保持します。
final DestinationController destinationController =
Get.find<DestinationController>();
// DestinationControllerのインスタンスを保持します。
final LocationController locationController = Get.find<LocationController>();
// LocationControllerのインスタンスを保持します。
StreamSubscription? subscription; // 地図イベントの購読を保持します。
Timer? _timer; // アイドル状態のタイマーを保持します。
late MapController mapController;
final Completer<MapController> mapControllerCompleter = Completer<MapController>();
// 地図上のマーカーのUIを生成するメソッドです。
// GeoJSONFeatureを受け取り、マーカーのUIを返します。
//
Widget getMarkerShape(GeoJSONFeature i, BuildContext context) {
StreamSubscription? subscription;
Timer? _timer;
Map<LatLng, Marker> _markerCache = {};
List<Marker> _markers = [];
@override
void initState() {
super.initState();
_startIdleTimer();
mapController = MapController();
indexController.mapController = mapController;
//_initMarkers();
// indexController.mapController = MapController(initCompleter: mapControllerCompleter);
}
@override
void dispose() {
mapController?.dispose();
_timer?.cancel();
super.dispose();
}
void _startIdleTimer() {
_timer = Timer(const Duration(milliseconds: (1000 * 10)), _centerMapOnUser);
}
void _resetTimer() {
_timer?.cancel();
_startIdleTimer();
}
void _centerMapOnUser() {
destinationController.centerMapToCurrentLocation();
}
Future<void> _initMarkers() async {
List<Marker> markers = await _getMarkers();
setState(() {
_markers = markers;
});
}
Future<List<Marker>> _getMarkers() async {
List<Marker> markers = [];
if (indexController.locations.isNotEmpty && indexController.locations[0].features.isNotEmpty) {
for (var feature in indexController.locations[0].features) {
GeoJSONMultiPoint point = feature!.geometry as GeoJSONMultiPoint;
LatLng latLng = LatLng(point.coordinates[0][1], point.coordinates[0][0]);
markers.add(Marker(
point: latLng,
width: 30.0,
height: 30.0,
child: getMarkerShape(feature),
));
/*
if (_markerCache.containsKey(latLng)) {
markers.add(_markerCache[latLng]!);
} else {
Marker marker = Marker(
point: latLng,
width: 30.0,
height: 30.0,
child: getMarkerShape(feature),
// child: getMarkerShape(feature, context),
);
_markerCache[latLng] = marker;
markers.add(marker);
}
*/
}
}
return markers;
}
/*
Future<List<Marker>> _getMarkers() async {
List<Marker> markers = [];
for (var feature in indexController.locations[0].features) {
GeoJSONMultiPoint point = feature!.geometry as GeoJSONMultiPoint;
LatLng latLng = LatLng(point.coordinates[0][1], point.coordinates[0][0]);
if (_markerCache.containsKey(latLng)) {
markers.add(_markerCache[latLng]!);
} else {
Marker marker = Marker(
point: latLng,
width: 30.0,
height: 30.0,
builder: (ctx) => getMarkerShape(feature, ctx),
//child: null,
);
_markerCache[latLng] = marker;
markers.add(marker);
}
}
return markers;
}
*/
// Widget getMarkerShape(GeoJSONFeature i, BuildContext context) {
Widget getMarkerShape(GeoJSONFeature i) {
final String labelText = TextUtils.getDisplayTextFeture(i);
//final double maxWidth = labelText.length * 40.0;
GeoJSONMultiPoint p = i.geometry as GeoJSONMultiPoint;
//print("lat is ${p.geoSerie!.geoPoints[0].latitude} and lon is ${p.geoSerie!.geoPoints[0].longitude}");
//RegExp regex = RegExp(r'([.]*0)(?!.*\d)');
return InkWell(
onTap: () {
GeoJSONFeature? fs = indexController.getFeatureForLatLong(
p.coordinates[0][1], p.coordinates[0][0]);
//print("------- fs $fs------");
if (fs != null) {
indexController.currentFeature.clear();
indexController.currentFeature.add(fs);
//print("----- fs is ${fs.properties!['photos']}");
Destination des = destinationController.festuretoDestination(fs);
@ -77,15 +157,14 @@ class _MapWidgetState extends State<MapWidget> {
db.getDestinationByLatLon(des.lat!, des.lon!).then((value) {
destinationController.shouldShowBottomSheet = false;
showModalBottomSheet(
constraints:
BoxConstraints.loose(Size(Get.width, Get.height * 0.85)),
context: context,
isScrollControlled: true,
isDismissible: true,
builder: ((context) => BottomSheetNew(
destination: des, isAlreadyCheckedIn: value.isNotEmpty))
//builder:((context) => BottomSheetWidget())
).whenComplete(() {
constraints:
BoxConstraints.loose(Size(Get.width, Get.height * 0.85)),
context: context,
isScrollControlled: true,
isDismissible: true,
builder: ((context) => BottomSheetNew(
destination: des, isAlreadyCheckedIn: value.isNotEmpty)),
).whenComplete(() {
destinationController.shouldShowBottomSheet = true;
destinationController.skipGps = false;
});
@ -94,82 +173,86 @@ class _MapWidgetState extends State<MapWidget> {
},
child: Stack(
fit: StackFit.expand,
//mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 32,
width: 32,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.transparent,
border: Border.all(
color: i.properties!['buy_point'] > 0
? Colors.blue
: Colors.red,
width: 3,
style: BorderStyle.solid)),
child: Stack(
alignment: Alignment.center,
children: [
const Icon(
Icons.circle,
size: 6.0,
),
i.properties!['cp'] == -1
? Transform.translate(
offset: const Offset(18, 0),
child: Transform.rotate(
alignment: Alignment.centerLeft,
origin: Offset.fromDirection(1, 26),
angle: 270 * pi / 180,
child: const Icon(
Icons.play_arrow_outlined,
color: Colors.red,
size: 70,
)),
)
: Container(
color: Colors.transparent,
height: 32,
width: 32,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.transparent,
border: Border.all(
color: i.properties!['buy_point'] > 0 ? Colors.blue : Colors.red,
width: 3,
style: BorderStyle.solid,
),
),
child: Stack(
alignment: Alignment.center,
children: [
const Icon(
Icons.circle,
size: 6.0,
),
i.properties!['cp'] == -1
? Transform.translate(
offset: const Offset(18, 0),
child: Transform.rotate(
alignment: Alignment.centerLeft,
origin: Offset.fromDirection(1, 26),
angle: 270 * pi / 180,
child: const Icon(
Icons.play_arrow_outlined,
color: Colors.red,
size: 70,
),
),
],
)),
)
: Container(
color: Colors.transparent,
),
],
),
),
Transform.translate(
offset: const Offset(45, 0),
offset: const Offset(30, 0),
child: Align(
alignment: Alignment.center,
child: Container(
color: Colors.purple.withOpacity(0.2),
// child: Text(TextUtils.getDisplayTextFeture(i),
// style: const TextStyle(
// fontSize: 16,
// fontWeight: FontWeight.bold,
// color: Colors.red,
// ))),
child: Stack(
children: <Widget>[
// Text with white outline
Text(
TextUtils.getDisplayTextFeture(i),
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w700,
foreground: Paint()
..style = PaintingStyle.stroke
..strokeWidth = 1
..color = Colors.white,
),
color: Colors.transparent,
constraints: const BoxConstraints(maxWidth: 500), // 最大幅を設定
//constraints: BoxConstraints(maxWidth: maxWidth), // 最大幅を設定
//color: Colors.purple.withOpacity(0.2),
child: Stack(
children: <Widget>[
Text(
labelText,
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w700,
foreground: Paint()
..style = PaintingStyle.stroke
..strokeWidth = 2
..color = Colors.white,
),
// Text with black fill
Text(
TextUtils.getDisplayTextFeture(i),
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.w700,
color: Colors.black,
),
overflow: TextOverflow.ellipsis, // テキストが長すぎる場合に`...`で省略
//softWrap: true, // 複数行に渡って表示
//overflow: TextOverflow.visible, // テキストが切れないように
),
Text(
labelText,
//TextUtils.getDisplayTextFeture(i),
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.w700,
color: Colors.black,
),
],
)),
overflow: TextOverflow.ellipsis, // テキストが長すぎる場合に`...`で省略
//softWrap: true, // 複数行に渡って表示
//overflow: TextOverflow.visible, // テキストが切れないように
),
],
),
),
),
)
],
@ -177,11 +260,7 @@ class _MapWidgetState extends State<MapWidget> {
);
}
// ルートポイントをLatLngのリストに変換するメソッドです。
// IndexControllerのroutePointsからLatLngのリストを生成しています。
//
List<LatLng>? getPoints() {
//print("##### --- route point ${indexController.routePoints.length}");
List<LatLng> pts = [];
for (PointLatLng p in indexController.routePoints) {
LatLng l = LatLng(p.latitude, p.longitude);
@ -190,87 +269,27 @@ class _MapWidgetState extends State<MapWidget> {
return pts;
}
// ウィジェットの初期化時に呼び出されるメソッドです。
// _startIdleTimerメソッドを呼び出して、アイドル状態のタイマーを開始します。
//
@override
void initState() {
super.initState();
_startIdleTimer(); // _startIdleTimerメソッドを呼び出してアイドル状態のタイマーを開始しています。
}
// アイドル状態のタイマーを開始するメソッドです。
// 一定時間後に_centerMapOnUserメソッドを呼び出すようにタイマーを設定しています。
//
void _startIdleTimer() {
_timer = Timer(const Duration(milliseconds: (1000 * 10)), _centerMapOnUser);
}
// アイドル状態のタイマーをリセットするメソッドです。
//
void _resetTimer() {
_timer?.cancel();
_startIdleTimer();
}
// 地図をユーザーの現在位置に中央揃えするメソッドです。
//
void _centerMapOnUser() {
assert(() {
print("showBottomSheet ${destinationController.shouldShowBottomSheet}");
return true;
}());
// 2024-04-03 Akira Log enabled only debug mode..
//
//if (destinationController.shouldShowBottomSheet) {
destinationController.centerMapToCurrentLocation();
//}
}
// ウィジェットのUIを構築するメソッドです。
// FlutterMapウィジェットを使用して地図を表示します。
// layersプロパティに、ベースレイヤー、ルートレイヤー、現在位置レイヤー、マーカーレイヤーを設定します。
// PopupControllerを使用して、ポップアップの制御を行います。
// IndexControllerのisLoading変数に基づいて、ローディングインジケーターを表示します。
// GameStateWidgetとCurrentPositionウィジェットを重ねて表示します。
//
@override
Widget build(BuildContext context) {
// print(
// "---------- rog mode is ${indexController.rog_mode.value.toString()}----------");
final PopupController popupController = PopupController();
//final PopupController popupController = PopupController();
return Stack(
children: [
// IndexControllerのisLoading変数に基づいて、ローディングインジケーターを表示します。
// isLoadingがtrueの場合はCircularProgressIndicatorを表示し、falseの場合は地図を表示します。
Obx(() => indexController.isLoading.value == true
? const Padding(
padding: EdgeInsets.only(top: 60.0),
child: CircularProgressIndicator(),
)
: FlutterMap(
// 地図の表示を担当
mapController: indexController.mapController,
mapController: mapController,
//mapController: indexController.mapController,
options: MapOptions(
// 地図の初期設定（最大ズームレベル、初期位置、ズームレベルなど）を行っています。
maxZoom: 18.4,
onMapReady: () {
// print("Map controller ready!!"); ... working corretly
indexController.isMapControllerReady.value = true; // Added Akira,2024-4-6 for #2800
subscription = indexController.mapController.mapEventStream
.listen((MapEvent mapEvent) {
if (mapEvent is MapEventMoveStart) {
// print(DateTime.now().toString() +
// ' [MapEventMoveStart] START');
// do something
}
if (mapEvent is MapEventMoveEnd) {}
});
_initMarkers();
//indexController.isMapControllerReady.value = true;
},
initialCenter: const LatLng(37.15319600454702, 139.58765950528198),
initialCenter:
const LatLng(37.15319600454702, 139.58765950528198),
bounds: indexController.currentBound.isNotEmpty
? indexController.currentBound[0]
: LatLngBounds.fromPoints([
@ -280,42 +299,39 @@ class _MapWidgetState extends State<MapWidget> {
initialZoom: 1,
interactiveFlags:
InteractiveFlag.pinchZoom | InteractiveFlag.drag,
onPositionChanged: (MapPosition pos, hasGesture) {
// 地図の位置が変更された際の処理を行います。
//print("map position changed ${pos.center!.latitude}");
if (hasGesture) {
_resetTimer();
}
indexController.currentBound = [pos.bounds!];
},
onTap: (_, __) => popupController
.hideAllPopups(), // Hide popup when the map is tapped.
onMapEvent: (MapEvent mapEvent) {
if (mapEvent is MapEventMove) {
destinationController.shouldShowBottomSheet = true;
}
},
//onTap: (_, __) => popupController.hideAllPopups(),
),
children: [
const BaseLayer(),
Obx(
() => indexController.routePointLenght > 0
? PolylineLayer(
// ルートの表示を担当
polylines: [
Polyline(
points: getPoints()!, // ルートのポイントを設定しています。
strokeWidth: 6.0,
color: Colors.indigo),
points: getPoints()!,
strokeWidth: 6.0,
color: Colors.indigo,
),
],
)
: Container(),
),
CurrentLocationLayer(
// 現在位置の表示を担当
positionStream: locationController
.locationMarkerPositionStreamController.stream,
// locationMarkerPositionStreamController.streamを設定して、現在位置の更新を監視しています。
alignDirectionOnUpdate: AlignOnUpdate.never,
//turnOnHeadingUpdate: TurnOnHeadingUpdate.never,
//alignDirectionOnUpdate: AlignOnUpdate.never,
style: const LocationMarkerStyle(
// styleプロパティで、現在位置のマーカーのスタイルを設定しています。
marker: Stack(
children: [
CircleAvatar(
@ -323,70 +339,39 @@ class _MapWidgetState extends State<MapWidget> {
backgroundColor: Colors.blue,
child: Icon(Icons.navigation, color: Colors.white),
),
//if (locationController.getGpsSignalStrength() == 'low')
// child: Icon(Icons.warning, color: Colors.red),
],
),
/*
marker: DefaultLocationMarker(
child: Icon(
Icons.navigation,
color: Colors.yellowAccent,
),
),
*/
markerSize: Size(27, 27),
markerDirection: MarkerDirection.heading,
),
//child: const Icon(Icons.navigation),
),
indexController.locations.isNotEmpty &&
indexController.locations[0].features.isNotEmpty
? MarkerLayer(
// マーカーの表示を担当
markers:
indexController.locations[0].features.map((i) {
//print("i si ${i.properties!['location_id']}");
//RegExp regex = RegExp(r'([.]*0)(?!.*\d)');
GeoJSONMultiPoint p =
i!.geometry as GeoJSONMultiPoint;
//print(
// "lat is ${p.geoSerie!.geoPoints[0].latitude} and lon is ${p.geoSerie!.geoPoints[0].longitude}");
return Marker(
alignment: Alignment.center,
height: 27.0,
width: 127.0,
point: LatLng(
p.coordinates[0][1], p.coordinates[0][0]),
child: getMarkerShape(i, context));
// マーカーのUIを生成しています。
// マーカーのアイコン、ラベル、色などをカスタマイズしています。
}).toList(),
)
: const Center(child: CircularProgressIndicator()),
FutureBuilder<List<Marker>>(
future: indexController.locations.isNotEmpty ? _getMarkers() : null,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return const Center(child: CircularProgressIndicator());
} else if (snapshot.hasError) {
return const Center(child: Text('マーカーの読み込みに失敗しました'));
} else {
return MarkerLayer(markers: snapshot.data ?? []);
}
},
),
//MarkerLayer(markers: indexController.locations.isNotEmpty ? _getMarkers() : []),
],
)),
const Positioned(top: 0, left: 0, child: GameStateWidget()),
// ゲーム状態の表示を担当。ゲームの状態（開始、終了など）を表示するカスタムウィジェットです。
const Positioned(bottom: 10, right: 10, child: CurrentPosition()),
// 現在位置ボタンの表示を担当。現在位置に移動するためのボタンを表示するカスタムウィジェットです。
StreamBuilder<LocationMarkerPosition?>(
stream: locationController.locationMarkerPositionStream,
builder: (context, snapshot) {
if (snapshot.hasData) {
print("Display current marker");
} else {
print("Not display current marker");
if (!snapshot.hasData) {
print("====== Not display current marker");
}
return Container();
},
)
// const Positioned(
// bottom: 10,
// left: 0,
// child: DebugWidget(),
// )
],
);
}