技術記事

micomia株式会社の井上です。

今日はFlutterFlowでアプリの画面をスクロールできるようにする方法について解説していきます。

1. 実装方法は簡単

普段私たちが使用しているアプリでは当たり前のようにスクロールできていると思いますが、実際の実装時にあり得る状況を想定して考えていきます。

例えば、個人情報の入力画面をアプリ内で設けたとしましょう。このような入力部分が多かったり上下にスクロールしないと全て見れないことはよくありますよね。

この状況だと自己紹介の入力欄が途中で途切れてしまっています。保存ボタンも見えなくなっています。

ここでスクロールできるようにするには、ColumnのScrollableをONにすれば良いだけです。

ONにすると、

このように途切れていた部分までスクロールして見れるようになりました。

Scrollableの説明を見てみると

「Whether the contents of this widget are scrollable」と書かれています。日本語にすると、「このコンテンツのウィジェットがスクロール可能かどうか」という意味になるのでONにすることでスクロールが可能になるということです。

2. 横向きのスクロールも可能

一般的な縦のスクロールができるようになったところで、横向きのスクロールについても少し考えてみましょう。

横のスクロールを採用する場面は例えばこんなものがあります。

投稿作成画面の画像をアップロードする画面です。最大5枚アップロードできるアプリだとして、横にスクロールすることでアップロードした画像を見ることができます。

この時のスクロールもColumnの時と同じく、RowのScrollableをONにするだけです。

3. 最後に&注意点

注意点として、Scrollableはどのwidgetにも付けられるものではありません。ScrollableのON/OFFを設定できるのは今回紹介したColumnとRowのみになっています。

スクロールできるようにしたい時は縦スクロールならColumnに、横スクロールならRowの中にスクロールさせたいウィジェットを実装してScrollableをONにしましょう。

micomia株式会社では他にもFlutterFlowの解説を行なっていますのでぜひ他の記事もご覧ください。

動画でもっと知りたい方はこちら