Zenn
🚨

【Flutter】Scroll使用時にターミナル上に変なエラーが出てくる場合の対処法

2025/03/08に公開
Flutter
エラー
スクロール
tech

こんにちは、laughtaoneです。
Flutter学習中に備忘録として書いていますので、正確な情報でない可能性もありますのでご了承ください。

発生している状況

Flutterでシミュレータで動かしている時に、デバッグ出力として ターミナル上 に次の注意文が出てきました。なんだか少し怖いですよね、、、

══╡ EXCEPTION CAUGHT BY SCHEDULER LIBRARY ╞═════════════════════════════════════════════════════════
The following assertion was thrown during a scheduler callback:
The Scrollbar's ScrollController has no ScrollPosition attached.
A Scrollbar cannot be painted without a ScrollPosition.
The Scrollbar attempted to use the PrimaryScrollController. This ScrollController should be
associated with the ScrollView that the Scrollbar is being applied to.
If a ScrollController has not been provided, the PrimaryScrollController is used by default on
mobile platforms for ScrollViews with an Axis.vertical scroll direction.
To use the PrimaryScrollController explicitly, set ScrollView.primary to true on the Scrollable
widget.

When the exception was thrown, this was the stack:
#0      RawScrollbarState._debugCheckHasValidScrollPosition.<anonymous closure> (package:flutter/src/widgets/scrollbar.dart:1469:9)
#1      RawScrollbarState._debugCheckHasValidScrollPosition (package:flutter/src/widgets/scrollbar.dart:1495:6)
#2      RawScrollbarState._debugScheduleCheckHasValidScrollPosition.<anonymous closure> (package:flutter/src/widgets/scrollbar.dart:1426:14)
#3      SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1442:15)
#4      SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1369:11)
#5      SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:1208:5)
#6      _invoke (dart:ui/hooks.dart:316:13)
#7      PlatformDispatcher._drawFrame (dart:ui/platform_dispatcher.dart:428:5)
#8      _drawFrame (dart:ui/hooks.dart:288:31)
════════════════════════════════════════════════════════════════════════════════════════════════════

Another exception was thrown: The Scrollbar's ScrollController has no ScrollPosition attached.
Another exception was thrown: The Scrollbar's ScrollController has no ScrollPosition attached.
Another exception was thrown: The Scrollbar's ScrollController has no ScrollPosition attached.
Another exception was thrown: The Scrollbar's ScrollController has no ScrollPosition attached.
Another exception was thrown: The Scrollbar's ScrollController has no ScrollPosition attached.

原因

この注意文が出てくる原因をChatGPT様に聞いてみたところ、

  1. Scrollbar に紐づく ScrollView が ScrollController を持っていない。
  2. PrimaryScrollController に頼っているが、対応する ScrollView に primary: true が設定されていない。
  3. 明示的に ScrollController を渡していない。

と答えてくれました。
要するに、Scrollbar ウィジェットに適切な ScrollController が設定されていないために発生しているみたいです。
そもそも、Scrollbar を使用するには、対応する ScrollView (ListView, SingleChildScrollView, GridView など) に ScrollController が設定されている必要があるらしいので、これに従って修正していきます。

修正

私の場合、次のように修正しました。（コードの一部のみ掲載）

修正前

該当部分コード
Scrollbar(
  thumbVisibility: true,
  thickness: viewScrollBarThicknessSize(),
  child: ListView.builder(
    itemCount: widget.itemList.length,
    itemBuilder: (context, index) {
\downarrow

修正後

(適切な場所で変数を定義)
final ScrollController _scrollController = ScrollController();

@override
void dispose() {
  _scrollController.dispose();
  super.dispose();
}
該当部分コード
Scrollbar(
  thumbVisibility: true,
+  controller: _scrollController,
  thickness: viewScrollBarThicknessSize(),
  child: ListView.builder(
+    controller: _scrollController,
    itemCount: widget.itemList.length,
    itemBuilder: (context, index) {

このように、Scrollbar に controller を追加し、ホットリロードすることで何も表示されなくなりました！

まとめ

Flutterで開発をしていると、よくわからないエラーや警告が出てきがちですが、ググったりChatGPT様に聞いたりして頑張れば、大抵は解決しますので一緒に頑張りましょう🥺

Discussion