TaillookTech

モバイルアプリ開発を追っています

Flutterでの横画面のTextFormField入力時のスクローリング

問題

f:id:taillook:20181106183032p:plain

こういった入力画面を作った時,横画面にした時に

f:id:taillook:20181106192841j:plain

スクロールが出来ない影響で下のボタンやフォームを選択出来ない.
SingleChildScrollViewでスクロールさせることでこの問題を解決します.

コード

new SingleChildScrollView(
  child: //フォームやボタンなどを配置
)

上のコードを追加する事でスクロールを追加出来ます.

実践

www.taillook.tech

この記事でのフォームにスクロールを追加します.

body: new Container(
  padding: EdgeInsets.all(20.0),
  child: new Form(
    key: formkey,
    child: new Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: buildInputs() + buildSubmitButtons(),
    ),
  ),
)

上記事のコードのこの部分をSingleChildScrollViewの子要素にする事でスクロールを実現します.

結果


Flutter From Scrolling

この動画みたいにスクロールできます.