AIエンジニアが一ヶ月でアプリ開発１９：実装⑧（スクロール）

こんにちは、りぼっちです。

昨日はサボってしまいました。子供が熱を出して看病してたので勘弁です。

今日は、ちょっとハマったスクロールのところを紹介します。

ListView.builderを使ったリスト表示

メニュー画面のように最初から決まったリスト数を表示するんだったら良いんですが、TODOリストのように可変長の配列に入った情報をリスト表示する時に ListView.builder を使ってます。これの itemCount のパラメータに配列の length を入れてやることで可変長リストが作れます。

それは良いんですが、長くなってくると当然画面をはみ出します。そのときはスクロールして欲しいんですが、デフォルトだとスクロールしないんですね。

下の画像のように、画面を引っ張ることは出来るんですが、元に戻ってしまいます。

SingleChildScrollViewを使った方法

Flutter でスクロールしたいなら SingleChildScrollView で囲えば簡単にスクロールすることができるとドキュメントに書いてあって、いくつかのブログにもあったので簡単じゃん〜 ってことで下のように実装

SingleChildScrollView(
  child: Container(
    child: ListView(
      shrinkWrap: true
      children: [
        ListView.builder(
          ...
        )
      ],
    ),
  ),
),

なんだぁーいつも通り簡単だなぁっと思っていたら、なんら変わりません。

？？？
あれっ、全然スクロールできないじゃん！

色々調べてみると Height を設定しないといけないようです。
なんだぁー、そういうことか。
よく分からないけど、前に画面いっぱいに表示するときに double.inifinity とかでいけたな！ってことで設定してみてもダメです。なんだったら 300 とか適当な数字を入れても　300の高さで表示されるだけで、中のリストは同じ状態で全然スクロールできません。

そうですね。たぶん Height を決めなくちゃいけないってことは、可変のリストには向いてないんだと思います。おそらく、設定した Height いっぱいの画面の中に最初から表示されている ListView が表示されていただけなんじゃないかなと思います。

ではどうすれば良いのか？

NeverScrollableScrollPhysics を設定する

答えは非常に簡単でした。ListView.builder の physics というパラメータに NeverScrollableScrollPhysics() という関数を渡してあげればスクロールすることができました。私の英語力が蚊並のせいなのか、名前からはスクロールできなさそうに見えますが、これでスクロールできます。

コードは以下のような感じです。

ListView(
  children: [
    ListView.builder(
      scrollDirection: Axis.vertical,
        shrinkWrap: true,
        physics: NeverScrollableScrollPhysics(),
        itemBuilder: (BuildContext context, int index) {
          return hoge();
        },
        itemCount: hoge.length,
      ),
    ),
  ],
),  

これで次のように無事スクロールすることができました。

最後に

様々なパーツを組み合わせるだけで色んなものが簡単に実装できる Flutter ですが、最終的には Widget の理解が深く無いと細かいUIや設定での表現が難しいと思った。（今回の内容は、決して細かいUIではない）

そんなこんなで、少しずつ詳しく慣れれば、それで良し！

次回こそは、LPを進めたい。