1

Flutterでgoogle_maps_flutterプラグインを使用しています。
添付画像のように、画面下部にPageViewを表示したいため、
GoogleMapにPaddingを設定しました。
そして、現在地を取得してinitialCameraPositionに設定したのですが、initialCameraPositionにPaddingが適用されないのか、画面全体の真ん中に表示されてしまいます。

myLocationButtonをタップした時のように、
最初からPaddingが適用されている範囲の真ん中に表示させるにはどうしたら良いでしょうか?

main.dart

import 'package:flutter/material.dart';
import 'mapArea.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _AppState createState() => _AppState();
}

class _AppState extends State<MyApp> {
  int _currentIndex = 0;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(title: Text("search point")),
            body: Align(
              child: MapArea(),
            ),
            bottomNavigationBar: BottomNavigationBar(
              items: <BottomNavigationBarItem>[
                BottomNavigationBarItem(
                    icon: Icon(Icons.map), title: Text('Map')),
                BottomNavigationBarItem(
                    icon: Icon(Icons.list), title: Text('List')),
              ],
              currentIndex: _currentIndex,
              fixedColor: Colors.blueAccent,
              type: BottomNavigationBarType.fixed,
            )));
  }
}

mapArea.dart

import 'package:flutter/material.dart';
import 'package:geolocator/geolocator.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

class MapArea extends StatefulWidget {
  @override
  _MapAreaState createState() => _MapAreaState();
}

class _MapAreaState extends State<MapArea> {
  final _geolocator = Geolocator();
  GoogleMapController mapController;

  void _onMapCreated(GoogleMapController controller) {
    mapController = controller;
    setState(() {});
  }

  @override
  void initState() {
    super.initState();
  }

  Future<Position> _getCurrentLocation() async {
    return await _geolocator.getCurrentPosition(
        desiredAccuracy: LocationAccuracy.high);
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: _getCurrentLocation(),
      builder: (context, AsyncSnapshot snapshot) {
        if (!snapshot.hasData) {
          return CircularProgressIndicator();
        }
        Position _myLocation = snapshot.data;
        CameraPosition _myCameraPosition = CameraPosition(
            target: LatLng(_myLocation.latitude, _myLocation.longitude),
            zoom: 20);
        return Stack(children: <Widget>[
          GoogleMap(
            mapType: MapType.normal,
            padding: const EdgeInsets.only(bottom: 200),
            initialCameraPosition: _myCameraPosition,
            myLocationEnabled: true,
            myLocationButtonEnabled: true,
            onMapCreated: _onMapCreated,
          ),
          Positioned(
              bottom: 5,
              left: 10,
              width: MediaQuery.of(context).size.width - 20,
              height: 200,
              child: Container(
                color: Colors.red[100],
                child: Text('PageView'),
              ))
        ]);
      },
    );
  }
}

1 件の回答 1

2

バグかもしれないですね。
_onMapCreatedメソッド内で、数ミリ秒後にmoveCameraで移動させる方法とかどうでしょうか。
https://pub.dev/documentation/google_maps_flutter/latest/google_maps_flutter/GoogleMapController/moveCamera.html

とりあえずこれで動作しました。

  MapCreatedCallback _onMapCreated(Position position) {
    return (controller) {
      mapController = controller;
      Future.delayed(Duration(milliseconds: 1), () {
        mapController.moveCamera(CameraUpdate.newLatLng(
            LatLng(position.latitude, position.longitude)));
      });
      setState(() {});
    };
  }
onMapCreated: _onMapCreated(_myLocation),

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。