Flutterでスクロールさせる方法

ListViewとSingleChildScrollViewがある。
今回はSingleChildScrollViewを利用。SingleChildScrollViewはスクロール可能な一つの要素を扱うwidgetで、画面外に出てもdisposeされない→再初期化を防ぐことができる。様々なwidgetが混在する場合SingleChildScrollViewを使用する。

サンプル

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:xxx/provider/xxx_provider.dart';

class Xxx extends HookWidget {
 final xsp = useProvider(xxxStateProvider);
 final xxxtState = useProvider(xxxStateProvider.state);
 final areaController = TextEditingController();
 final nameController = TextEditingController();
 final nameKanaController = TextEditingController();
 final ageController = TextEditingController();
 List _gender = ['男', '女'];
 List _independenceLevel = [
   'ランクA',
   'ランクB',
   'ランクC'
 ]; 
 List _underlying = ['1級', '2級', '3級'];
 
 @override
 Widget build(BuildContext context) {
   return Center(
     child: SingleChildScrollView(
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: <Widget>[
           Text('登録'),
           Row(
             children: <Widget>[
               Text(' ＊ '),
               SizedBox(
                 width: 320,
                 height: 50,
                 child: TextField(
                   decoration: InputDecoration(hintText: 'エリア'),
                   // obscureText: true,
                   controller: areaController,
                   onChanged: (text) {
                     xsp.setText('area', text);
                   },
                 ),
               ),
             ],
           ),
           Row(
             children: <Widget>[
               Text(' ＊ '),
               SizedBox(
                 width: 320,
                 height: 50,
                 child: TextField(
                   decoration: InputDecoration(hintText: '氏名'),
                   // obscureText: true,
                   controller: nameController,
                   onChanged: (text) {
                     xsp.setText('name', text);
                   },
                 ),
               ),
             ],
           ),
           Row(
             children: <Widget>[
               Text(' ＊ '),
               SizedBox(
                 width: 320,
                 height: 50,
                 child: TextField(
                   decoration: InputDecoration(hintText: 'ふりがな'),
                   // obscureText: true,
                   controller: nameKanaController,
                   onChanged: (text) {
                     xsp.setText('nameKana', text);
                   },
                 ),
               ),
             ],
           ),
           Row(
             children: <Widget>[
               Text(' ＊ '),
               SizedBox(
                 width: 320,
                 height: 50,
                 child: DropdownButton(
                   hint: Text('性別を選択'),
                   value: xxxState.sex,
                   items: _gender
                       .map((e) => DropdownMenuItem(
                           value: _gender.indexOf(e), child: Text(e)))
                       .toList(),
                   onChanged: (e) {
                     xsp.choosing('sex', e);
                   },
                 ),
               ),
             ],
           ),
           Row(
             children: <Widget>[
               Text(' ＊ '),
               SizedBox(
                 width: 320,
                 height: 50,
                 child: TextField(
                   decoration: InputDecoration(hintText: '年齢'),
                   // obscureText: true,
                   controller: ageController,
                   onChanged: (text) {
                     xsp.setText('age', text);
                   },
                 ),
               ),
             ],
           ),           
           Row(
             children: <Widget>[
               Text(' ＊ '),
               SizedBox(
                 width: 320,
                 height: 50,
                 child: DropdownButton(
                   hint: Text('日常を選択'),
                   value: xxxState.independenceLevel,
                   items: _independenceLevel
                       .map((e) => DropdownMenuItem(
                           value: _independenceLevel.indexOf(e),
                           child: Text(e)))
                       .toList(),
                   onChanged: (e) {
                     xsp.choosing('independenceLevel', e);
                   },
                 ),
               ),
             ],
           ),                      
           Row(
             children: <Widget>[
               Text(' ＊ '),
               SizedBox(
                 width: 320,
                 height: 50,
                 child: DropdownButton(
                   hint: Text('等級を選択'),
                   value: xxxState.underlying,
                   items: _underlying
                       .map((e) => DropdownMenuItem(
                           value: _underlying.indexOf(e),
                           child: Text(e)))
                       .toList(),
                   onChanged: (e) {
                     xsp.choosing('underlying', e);
                   },
                 ),
               ),
             ],
           ),
         ],
       ),
     ),
   );
 }
}