4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【google_maps_flutter】SingleChildScrollView内でGoogle MAPのスクロールを有効にする

Last updated at Posted at 2020-09-29

Flutterにgoogle_maps_flutterを導入し、Google Mapを表示させているのですが、


return SingleChildScrollView(
  child: GoogleMap(
    // (省略)
  )

というように、Google MapをSingleChildScrollViewの子ウィジットにしたところ、
Google Mapをスクロールしようとしても、画面全体(=SingleChildScrollView)がスクロールされてしまい、Mapを操作できなくなってしまいました。

難しくはなかったものの、日本語の情報がなかったので書き留めておきます。

##解決策

import 'package:flutter/gestures.dart';  // OneSequenceGestureRecognizerを有効にするために追加
import 'package:flutter/foundation.dart'; // Factoryを有効にするために追加

// (省略)

return SingleChildScrollView(
  child: GoogleMap(
    gestureRecognizers: <Factory<OneSequenceGestureRecognizer>>[
              new Factory<OneSequenceGestureRecognizer>(
                () => new EagerGestureRecognizer(),
              ),
            ].toSet(),
  )

↑のように、gestureRecognizersを設定してあげればOKです。
(importが必要なので、そこだけ要注意)

Flutterは日本後の情報が少なめですが、頑張って英語も読んでみると、割と解決できますね。

###参考
https://stackoverflow.com/questions/61744359/google-maps-inside-a-form-in-singlechildscrollview

4
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?