PrimaryScrollController | Decoding Flutter

新しい回が出ましたね !

訳は文字起こしに日本語もありますのでそちらをご覧ください。

とりあえずざっくりまとめたいと思います。

---

=> ListView内の二つの項目を紐づけて、あるカードの特別なアイコンをクリックしたら別のカードへスクロールする場合。

=> AppBarをタップしたらListViewの最上部(top)に戻る挙動。

このような場合(他にもスクロール位置を取得したりコントロールしたり、プログラマティックにスクロールさせたりする場合)、ScrollControllerが必要になりますね、と。

---

基本的にスクロールするものは全てScrollControllerが必要。ListViewなどにScrollControllerを渡さずに生成した場合は、内部で自動的にScrollControllerが生成されている。

---

各Routeで自動的にPrimaryScrollControllerなるものを生成してInheritedWidgetの仕組みによってサブツリーと共有する。(Theme.of(context)やMediaQuery.of(context)などと同じように)

PrimaryScrollController.of(context,)

で取得できる。これを使ってスクロール位置の取得やスクロール操作を行うことができる。

ListViewなどにはprimaryプロパティがあり、

primary: true

にするとそのListViewはPrimaryScrollControllerを自身のcontrollerに設定する、という仕組み。

---

(PrimaryScrollControllerも含めて)ScrollControllerは、複数のScrollableと紐づけられることを嫌う。その場合、

“The ScrollController is attached to multiple scroll views.”

エラーが発生する。

モバイルは画面が小さいためListViewなどが複数同じ画面に存在することがあまりなかったが、web/desktopではより発生しやすい、ということになる。

(しかしFlutter3.3以降では、web/desktopのprimaryプロパティの値がデフォルトでfalseになったので、我々が何もしなければ基本的にこのエラーは発生しないようになった。)

---

Flutter3.3以降はprimaryプロパティのデフォルト値は

モバイルではtrue、

web/desktopではfalse。

なので、web/desktopではこれまで(3.2以前)発生していた”The ScrollController is attached to multiple scroll views.“エラーが発生しなくなる。

その代わり、PrimaryScrollControllerを使わせたいListViewなどには開発者が

primary : true,

を明示的に設定する必要がある、ということ。

さらに詳しい情報は動画をご覧ください。

とりあえず、AppBarをタップしたら最上部に戻るサンプルコードを下記に示します。

//PrimaryScrollController、パート1。下記のようなことができると。

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp(),);
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:PreferredSize(
        preferredSize: Size(double.infinity,50.0,),
        child: GestureDetector(
          child: AppBar(

          ),
          onTap:(){
            PrimaryScrollController.of(context,)!.animateTo(
              0.0,
              curve:Curves.linear,
              duration:Duration(milliseconds: 200),
            );
          },
        ),
      ),
      body:ListView(
        //primary: false,
        children:[
          Container(
            height:1350.0,
            color:Colors.red,
          ),

          Container(
            height:1350.0,
            color:Colors.green,
          ),

          Container(
            height:1350.0,
            color:Colors.yellow,
          ),

          ElevatedButton(
            child:Text('To the top'),
            onPressed:(){
              PrimaryScrollController.of(context,)!.jumpTo(0.0);
            },
          ),
        ],
      ),
    );
  }
}

 

---

一応パート2↓に、動画で説明されているようにListView二つのパターンも書いてみましたが、なぜかエラーが発生しませんでした笑

よくわからないですね。

とりあえずprimaryフィールドをfalseにするとPrimaryScrollControllerで操作できなくなる、という挙動はその通りなので、よければお試しくださいませ。

//PrimaryScrollController、パート2。
import 'package:flutter/material.dart';

void main(){
  runApp(MyApp(),);
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:PreferredSize(
        preferredSize: Size(double.infinity,50.0,),
        child: GestureDetector(
          child: AppBar(

          ),
          onTap:(){

            PrimaryScrollController.of(context,)!.animateTo(
              0.0,
              curve:Curves.linear,
              duration:Duration(milliseconds: 200),
            );

          },
        ),
      ),
      body:Row(
        children: [
          SizedBox(
            width:150.0,
            child: ListView(
              primary: true,
              children:[
                Container(
                  height:1350.0,
                  color:Colors.red,
                ),

                Container(
                  height:1350.0,
                  color:Colors.green,
                ),

                Container(
                  height:1350.0,
                  color:Colors.yellow,
                ),
              ],
            ),
          ),

          SizedBox(
            width:150.0,
            child: ListView(
              primary:true,
              //primary: false,
              children:[
                Container(
                  height:1350.0,
                  color:Colors.blue,
                ),

                Container(
                  height:1350.0,
                  color:Colors.brown,
                ),

                Container(
                  height:1350.0,
                  color:Colors.purple,
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

 

今回は以上です。

Decoding Flutterでは主にFlutterの基本が終わった方向けに、フレームワークをさらに掘り下げて理解を深めるような内容が盛りだくさんなので、下記のページもぜひご覧くださいませ。

2022/6/9/Flutter/ThemeExtension

 

2022/6/10/Flutter/MaterialStateProperty

 

2022/6/10/Flutter/Type Promotion

今プロではFlutterの初心者の方向けに現在完全無料にて質問も受け付けております。

お答えできる範囲で今プロユーザーの皆様のFlutter学習をサポートさせていただきたいと思っております。

お答えできる範囲を超えるものについてはサポートできません。

お気軽に質問などお寄せください。