Flutter のスクロールで更新インジケーターが機能しない

このチュートリアルでは、ListView() または SingleChildScrollView() の高さが完全に埋まっていないときに RefreshIndicator() がスクロールで動作しない場合の解決方法を学びます。Refresh Indicator を完璧に機能させるための ScrollView のシンプルな設定を参照してください。

ListView() や SingleChildScrollView() などのスクロール可能なウィジェットが高さまで完全に埋まっていない場合、スクロールは無効になり、そのため RefreshIndicator() も機能しなくなります。

この問題を解決するには、スクロール可能なウィジェットが高さいっぱいに達していなくてもスクロールする必要があります。

RefreshIndicator(
  onRefresh: () async{
      await Future.delayed(Duration(seconds: 3));
  },
  child:SingleChildScrollView(
    physics: AlwaysScrollableScrollPhysics(),
  )
)

SingleChildScrollView()常にスクロール可能な物理をまたはに追加する必要がありますListView()。

ListView(
   physics: AlwaysScrollableScrollPhysics()
)

完全なアプリの例:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
      appBar: AppBar( 
          title: Text("Refresh Indicator"),
          backgroundColor: Colors.deepPurpleAccent,
      ),
      body: RefreshIndicator(
          onRefresh: () async{
              await Future.delayed(Duration(seconds: 3));
          },
          child:SingleChildScrollView(
            physics: AlwaysScrollableScrollPhysics(),
            child:Column(
                children: [
                  for(int x = 1; x <=4;x++)...[
                      Container(
                        height: 100,
                        color: Colors.redAccent,
                      )
                  ] 
                ]
            ),
         )
      ),
    );
  }
}

出力スクリーンショット:

このようにして、スクロール可能なウィジェットが高さを満たさないときに更新インジケーターが機能しない問題を解決できます。