[Flutter]SingleChildScrollView( reverse: true)で表示位置を一番上から表示させる

テキスト入力時にキーボードによってテキスト部分が隠れてしまうための対策をしたら、次は画面表示の初期値が一番下になってしまったのでその対策

return Scaffold(
   body: SingleChildScrollView(
     reverse: true,
     child: Form(
       ...

reverse: trueの部分によって初期位置が下から始まってしまう。

ここで対策としてuseEffect内で一番上までスクロールする様にしている。

まずSingleChildScrollView内にcontrollerを加える

return Scaffold(
   body: SingleChildScrollView(
     controller: _scrollController,
     reverse: true,
     child: Form(
       ...
@override
Widget build(BuildContext context) {
  final ScrollController _scrollController = ScrollController();

  useEffect(() {
     _scrollController.jumpTo(0.0);
     return () {
       _scrollController.dispose();
     };
   }, []);

これだと_scrollControllerがセットされる前に関数が実行されてエラー?

addPostFrameCallback()は中身がウィジェットのビルドが完了した時に、実行されるみたいです。

useEffect(() {
  WidgetsBinding.instance.addPostFrameCallback((_) {
    _scrollController.jumpTo(_scrollController.position.maxScrollExtent);
  });
  return () {
    _scrollController.dispose();
  };
}, []);

これで上手くいった。


この記事が気に入ったらサポートをしてみませんか?