teratail
回答率
85.47%
質問するログイン新規登録
トップFlutterに関する質問【flutter】タップすると、画面の中心に現在地が来るようなボタンの作成

編集履歴

回答編集履歴

3

変更の説明を追加

2022/11/20 03:49

投稿

moriman
moriman

スコア615

test CHANGED
@@ -10,6 +10,7 @@
10
10
 
11
11
  https://codelabs.developers.google.com/codelabs/google-maps-in-flutter#4
12
12
  マップ自体は上記ページに従って表示させているのでコード自動生成が必要です。
13
+ 11/20追記 : コードを編集したのでコード自動生成は不要になりました。
13
14
  よければ参考にされてください。
14
15
  ```main.dart
15
16
  import 'package:flutter/material.dart';

2

ロジックの修正後のコードに変更

2022/11/19 16:10

投稿

moriman
moriman

スコア615

test CHANGED
@@ -28,11 +28,21 @@
28
28
  class _MyAppState extends State<MyApp> {
29
29
  late GoogleMapController mapController;
30
30
  late Location locationService = Location();
31
+ LocationData? currentLocation;
31
32
 
32
33
  final LatLng _center = const LatLng(45.521563, -122.677433);
33
34
 
34
35
  void _onMapCreated(GoogleMapController controller) {
35
36
  mapController = controller;
37
+ }
38
+
39
+ @override
40
+ void initState() {
41
+ // TODO: implement initState
42
+ super.initState();
43
+ locationService.onLocationChanged.listen((event) {
44
+ currentLocation = event;
45
+ });
36
46
  }
37
47
 
38
48
  @override
@@ -52,41 +62,26 @@
52
62
  zoom: 11.0,
53
63
  ),
54
64
  ),
55
-
56
65
  floatingActionButton: FloatingActionButton.extended(
57
66
  onPressed: _currentLocation,
58
67
  label: Text('My Location'),
59
68
  icon: Icon(Icons.location_on),
60
69
  ),
61
-
62
-
63
70
  ),
64
71
  );
65
72
  }
66
73
 
67
-
68
74
  void _currentLocation() async {
69
-
70
- LocationData? currentLocation;
71
- //var location = Location();
72
- try {
73
- print((await locationService.hasPermission().toString()));
74
- currentLocation = await locationService.getLocation();
75
- } on Exception {
76
- currentLocation = null;
77
- }
78
75
 
79
76
  mapController.animateCamera(CameraUpdate.newCameraPosition(
80
77
  CameraPosition(
81
78
  bearing: 0,
82
- target: LatLng(currentLocation?.latitude ?? 0.0, currentLocation?.longitude ?? 0.0),
79
+ target: LatLng(currentLocation?.latitude ?? 0.0,
80
+ currentLocation?.longitude ?? 0.0),
83
81
  zoom: 17.0,
84
82
  ),
85
83
  ));
86
84
  }
87
-
88
-
89
-
90
85
  }
91
86
  ```
92
87
 

1

簡潔なコードへの変更

2022/11/19 16:03

投稿

moriman
moriman

スコア615

test CHANGED
@@ -10,17 +10,13 @@
10
10
 
11
11
  https://codelabs.developers.google.com/codelabs/google-maps-in-flutter#4
12
12
  マップ自体は上記ページに従って表示させているのでコード自動生成が必要です。
13
- といってもこの質問とマーカーは関係無いですが、流れでこうなったのでご容赦ください。
14
13
  よければ参考にされてください。
15
14
  ```main.dart
16
15
  import 'package:flutter/material.dart';
17
16
  import 'package:google_maps_flutter/google_maps_flutter.dart';
18
17
  import 'package:location/location.dart';
19
- import 'src/locations.dart' as locations;
20
18
 
21
- void main() {
22
- runApp(const MyApp());
19
+ void main() => runApp(const MyApp());
23
- }
24
20
 
25
21
  class MyApp extends StatefulWidget {
26
22
  const MyApp({super.key});
@@ -30,26 +26,13 @@
30
26
  }
31
27
 
32
28
  class _MyAppState extends State<MyApp> {
33
- final Map<String, Marker> _markers = {};
34
- GoogleMapController? _controller;
29
+ late GoogleMapController mapController;
30
+ late Location locationService = Location();
35
31
 
32
+ final LatLng _center = const LatLng(45.521563, -122.677433);
33
+
36
- Future<void> _onMapCreated(GoogleMapController controller) async {
34
+ void _onMapCreated(GoogleMapController controller) {
37
- _controller = controller;
35
+ mapController = controller;
38
- final googleOffices = await locations.getGoogleOffices();
39
- setState(() {
40
- _markers.clear();
41
- for (final office in googleOffices.offices) {
42
- final marker = Marker(
43
- markerId: MarkerId(office.name),
44
- position: LatLng(office.lat, office.lng),
45
- infoWindow: InfoWindow(
46
- title: office.name,
47
- snippet: office.address,
48
- ),
49
- );
50
- _markers[office.name] = marker;
51
- }
52
- });
53
36
  }
54
37
 
55
38
  @override
@@ -57,19 +40,17 @@
57
40
  return MaterialApp(
58
41
  home: Scaffold(
59
42
  appBar: AppBar(
60
- title: const Text('Google Office Locations'),
43
+ title: const Text('Maps Sample App'),
61
44
  backgroundColor: Colors.green[700],
62
45
  ),
63
46
  body: GoogleMap(
64
47
  myLocationEnabled: true,
65
48
  myLocationButtonEnabled: true,
66
49
  onMapCreated: _onMapCreated,
67
- initialCameraPosition: const CameraPosition(
50
+ initialCameraPosition: CameraPosition(
68
- target: LatLng(0, 0),
51
+ target: _center,
69
- zoom: 2,
52
+ zoom: 11.0,
70
53
  ),
71
- markers: _markers.values.toSet(),
72
-
73
54
  ),
74
55
 
75
56
  floatingActionButton: FloatingActionButton.extended(
@@ -87,15 +68,15 @@
87
68
  void _currentLocation() async {
88
69
 
89
70
  LocationData? currentLocation;
90
- var location = Location();
71
+ //var location = Location();
91
72
  try {
92
- print((await location.hasPermission().toString()));
73
+ print((await locationService.hasPermission().toString()));
93
- currentLocation = await location.getLocation();
74
+ currentLocation = await locationService.getLocation();
94
75
  } on Exception {
95
76
  currentLocation = null;
96
77
  }
97
78
 
98
- _controller!.animateCamera(CameraUpdate.newCameraPosition(
79
+ mapController.animateCamera(CameraUpdate.newCameraPosition(
99
80
  CameraPosition(
100
81
  bearing: 0,
101
82
  target: LatLng(currentLocation?.latitude ?? 0.0, currentLocation?.longitude ?? 0.0),
@@ -103,6 +84,9 @@
103
84
  ),
104
85
  ));
105
86
  }
87
+
88
+
89
+
106
90
  }
107
91
  ```
108
92
 
@@ -114,12 +98,5 @@
114
98
  google_maps_flutter: ^2.2.1
115
99
  google_maps_flutter_web: ^0.4.0+3
116
100
  http: ^0.13.5
117
- json_serializable: ^6.5.4
118
-
119
101
  location: ^4.4.0
120
-
121
- dev_dependencies:
122
- flutter_test:
123
- sdk: flutter
124
- build_runner: ^2.3.2
125
102
  ```