[Flutter/dart] スワイプが反応する範囲をページ全体に広げる

概要

スマホアプリで、ページ全体をスワイプの対象とする方法について説明します。

方法

GestureDetectorでスワイプを実装する場合、スワイプに反応するのはその子Widgetの領域です。

そのため、下の例のように書くと、子Widgetが小さい場合に画面下の方でスワイプしても反応しません。

@override
Widget build(BuildContext context) {

  return Scaffold(
    appBar: AppBar(
      
    ),
    body: SingleChildScrollView(
      child: GestureDetector(
        child: Container(
          child: Column(
            //略
          )
        )
      )
    )
  )

そこで、ページ全体をGestureDetectorの下に置きましょう。

@override
Widget build(BuildContext context) {

  return Scaffold(
    appBar: AppBar(

    ),
    body: GestureDetector(
      child: SingleChildScrollView(
        child: Container(
          child: Column(
            //略
          )
        )
      )
    )
  )