2022/9/14/Flutter/digging into PrimaryScrollController

 

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、…

2022/6/10/Flutter/MaterialStateProperty

 

結論

スタート時点。TextButtonのbackgroundColorをColors.redで指定しようとするとエラーが出る。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(
        //backgroundColor: Colors.red,
        backgroundColor: MaterialStateColor.resolveWith((Set<MaterialState> states){
          if(true){
            return Colors.cyanAccent;
          }
          return Colors.red;
        }),
      

2022/6/10/Flutter/Type Promotion

 

Type Promotionの訳

If you’ve worked with Dart and Flutter long enough, you’ve probably come across Type Promotion.
DartやFlutterを長く使っていると、Type Promotionに出会ったことがあるのではないでしょうか。

 

It’s a Dart language feature that in certain circumstances allows you to treat variables as if they had a …