はじめに

Flutterでアプリ開発をしていて、NestedScrollViewの内側のスクロール量を取得する際に少々苦労したので、今回はそのことについてご紹介できればと思います。結論だけ知りたい方は解決策に飛んでいただければと思います。

NestedScrollViewとは？

複数のスクロール可能なビューを入れ子にすることができ、スクロールをリンクさせることができるウィジェットです。

前提条件

今回開発しているアプリの構成は以下のような感じです。DefaultTabControllerの中にNestedScrollViewを埋め込んでいます。ページ全体(緑枠の部分)がスクロール可能なビューとなっており、TabView(紫枠の部分)にまたスクロール要素が埋め込まれているような構成になっています。

TabViewをスクロールすると連動してページ全体がスクロールされます(下図)。この時、HeaderSectionは画面上部に隠れ、TabBarはAppBarに引っ付くようになっています。また、画面下部にはNestedScrollViewのスクロール量を表示しています。

こちらのサンプルコードを以下に示します。(前後省略しています)

DefaultTabController(
  length: tabs.length,
  child: Stack(
    children: [
      NestedScrollView(
        controller: scrollController,
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            _headerSection(),
            _tabSection(),
          ];
        },
        body: TabBarView(
          children: tabs.map((e) {
            return ListView.builder(
              itemCount: 50,
              itemBuilder: (context, index) {
                return Container(
                  padding: const EdgeInsets.only(left: 16, top: 12, bottom: 12),
                  color: index % 2 == 0 ? Colors.white12 : Colors.white,
                  child: Text(
                    'index : $index',
                    style: const TextStyle(
                      fontSize: 16,
                    ),
                ),
              );
            });
          }).toList(),
        )
      ),
      …省略
     ],
   ),
 )

問題点

先ほどのGIFより、HeaderSectionが隠れたあとはスクロール量が変動していないことが分かります。サンプルコードではNestedScrollViewに対してScrollControllerを指定してスクロール量を取得していますが、この方法ではページ全体のスクロール量しか取ることができません。

一方で、TabViewそれぞれをStatefulWidgetにし、それぞれでScrollControllerを設定すれば内側のスクロール量が取れるのではないかと思いつくかもしれません。この場合内側のスクロール量を取得することはできます。一方で、外側のスクロール要素とのリンクが切れてしまい、内側をスクロールしても外側のスクロールとは連動しなくなります(下図)。

解決策

内側のスクロール要素に対してNotificationListenerをセットすることで解決できます。
以下にサンプルコードを示します。

DefaultTabController(
 length: tabs.length,
 child: Stack(
   children: [
     NestedScrollView(
       controller: scrollController,
       headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
         return <Widget>[
           _headerSection(),
           _tabSection(),
         ];
       },
       body: TabBarView(
         children: tabs.map((e) {
           return NotificationListener<ScrollNotification>(
             child: ListView.builder(
               itemCount: 50,
               itemBuilder: (context, index) {
                 return Container(
                   padding: const EdgeInsets.only(left: 16, top: 12, bottom: 12),
                   color: index % 2 == 0 ? Colors.white12 : Colors.white,
                   child: Text(
                     'index : $index',
                     style: const TextStyle(
                       fontSize: 16,
                     ),
                   ),
                 );
               }
             ),
             onNotification: (scrollInfo) {
               setState(() {
                 scrollPosition = scrollInfo.metrics.pixels;
               });
               return false;
             },
           );
         }).toList(),
       )
     ),
     Positioned(
       bottom: 60,
       right: 0,
       left: 0,
       child: Row(
         mainAxisSize: MainAxisSize.min,
         mainAxisAlignment: MainAxisAlignment.center,
         children: [
           Container(
             width: 80,
             height: 40,
             decoration: BoxDecoration(
               borderRadius: BorderRadius.circular(20),
               color: Colors.blueAccent,
             ),
             child: Center(
               child: Text(
                 '${scrollPosition.ceil()}',
                 style: const TextStyle(
                   color: Colors.white,
                   fontSize: 18,
                 ),
               ),
             ),
           ),
         ],
       )
     )
   ],
 ),
)

無事スクロールが連動したまま、内側のスクロール量を取得することができました！

全体のコードは以下の通りです

import 'package:flutter/material.dart';


void main() {
 runApp(const MaterialApp(home: MyHomePage(),));
}


class MyHomePage extends StatefulWidget {
 const MyHomePage({super.key});


 @override
 State<StatefulWidget> createState() => MyHomePageState();
}


class MyHomePageState extends State<MyHomePage> {


 late final ScrollController scrollController;


 final tabs = ['Tab1', 'Tab2', 'Tab3'];


 double scrollPosition = 0;


 @override
 void initState() {
   super.initState();
   scrollController = ScrollController();
   scrollController.addListener(() {
     setState(() {
       scrollPosition = scrollController.offset;
     });
   });
 }


 @override
 void dispose() {
   scrollController.dispose();
   super.dispose();
 }


 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: const Text('Demo'),
     ),
     body:DefaultTabController(
       length: tabs.length,
       child: Stack(
         children: [
           NestedScrollView(
             controller: scrollController,
             headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
               return <Widget>[
                 _headerSection(),
                 _tabSection(),
               ];
             },
             body: TabBarView(
               children: tabs.map((e) {
                 return NotificationListener<ScrollNotification>(
                   child: ListView.builder(
                     itemCount: 50,
                     itemBuilder: (context, index) {
                       return Container(
                         padding: const EdgeInsets.only(left: 16, top: 12, bottom: 12),
                         color: index % 2 == 0 ? Colors.white12 : Colors.white,
                         child: Text(
                           'index : $index',
                           style: const TextStyle(
                             fontSize: 16,
                           ),
                         ),
                       );
                     }
                   ),
                   onNotification: (scrollInfo) {
                     setState(() {
                       scrollPosition = scrollInfo.metrics.pixels;
                     });
                     return false;
                   },
                 );
               }).toList(),
             )
           ),
           Positioned(
             bottom: 60,
             right: 0,
             left: 0,
             child: Row(
               mainAxisSize: MainAxisSize.min,
               mainAxisAlignment: MainAxisAlignment.center,
               children: [
                 Container(
                   width: 80,
                   height: 40,
                   decoration: BoxDecoration(
                     borderRadius: BorderRadius.circular(20),
                     color: Colors.blueAccent,
                   ),
                   child: Center(
                     child: Text(
                       '${scrollPosition.ceil()}',
                       style: const TextStyle(
                         color: Colors.white,
                         fontSize: 18,
                       ),
                     ),
                   ),
                 ),
               ],
             )
           )
         ],
       ),
     )
   );
 }


 Widget _headerSection() {
   return SliverList(delegate: SliverChildListDelegate([
     Container(
       padding: const EdgeInsets.only(left: 16, top: 24, bottom: 24),
       color: Colors.red,
       child: const Text(
         'Header Section',
         style: TextStyle(
           fontSize: 24,
           color: Colors.white,
         ),
       ),
     )
   ]));
 }


 Widget _tabSection() {
   return SliverPersistentHeader(
     pinned: true,
     delegate: _StickyTabBarDelegate(
       tabBar: TabBar(
         labelColor: Colors.black,
         tabs: tabs.map((label) => Tab(text: label,)).toList(),
       )
     )
   );
 }
}


class _StickyTabBarDelegate extends SliverPersistentHeaderDelegate {
 const _StickyTabBarDelegate({required this.tabBar});


 final TabBar tabBar;


 @override
 double get minExtent => tabBar.preferredSize.height;


 @override
 double get maxExtent => tabBar.preferredSize.height;


 @override
 Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
   return Container(
     color: Colors.white,
     child: tabBar,
   );
 }


 @override
 bool shouldRebuild(_StickyTabBarDelegate oldDelegate) {
   return tabBar != oldDelegate.tabBar;
 }
}

参考サイト