FlutterでsetState() or markNeedsBuild() called during buildエラーが発生する

Question

概要

指定した地点の方角にスマホを向けたら文字が表示されるアプリを開発中です。

flutter_compassのイベントをStreamBuilderでListenしようとしたら、Widgetのビルド中にStateを変更してはいけないという旨のエラーが発生しました。
ただ、どの処理がビルド中に行われてStateを変更しようとしてしまっているのかかが分かりません。

解決方法についてご教授いただけると幸いです。

発生している問題・エラーメッセージ

FlutterError (setState() or markNeedsBuild() called during build.
This CompassPage widget cannot be marked as needing to build because the framework is already in the process of building widgets. A widget can be marked as needing to be built during the build phase only if one of its ancestors is currently building. This exception is allowed because the framework builds parent widgets before children, which means a dirty descendant will always be built. Otherwise, the framework might not visit this widget during this build phase.
The widget on which setState() or markNeedsBuild() was called was:
  CompassPage
The widget which was currently being built when the offending call was made was:
  StreamBuilder<CompassEvent>)

該当のソースコード

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:geolocator/geolocator.dart';
import 'package:flutter_compass/flutter_compass.dart';

// 指定した地点
LatLng markerPosition = const LatLng(35.689702, 139.700560); // 初期座標（新宿駅）

// 自分のスマホの位置
Position myPosition = Position(
  // 初期座標（渋谷駅）
  latitude: 35.658199,
  longitude: 139.701625,
  timestamp: DateTime.now(),
  altitude: 0,
  accuracy: 0,
  heading: 0,
  speed: 0,
  speedAccuracy: 0,
  floor: null,
);

class CompassPage extends StatefulWidget {
  const CompassPage({Key? key}) : super(key: key);

  @override
  State<CompassPage> createState() => _CompassPageState();
}

class _CompassPageState extends State<CompassPage> {
  late StreamSubscription<Position> positionStream;
  late double? direction;
  late double markerBearing;
  double bearingTolerance = 5.0;
  String distance = '';

  final LocationSettings locationSettings = const LocationSettings(
    accuracy: LocationAccuracy.high,
    distanceFilter: 10,
  );

  // 指定した地点の方角を計算
  double calcMarkerBearing(Position myPosition, LatLng markerPosition) {
    double myLat = myPosition.latitude;
    double myLng = myPosition.longitude;
    double markerLat = markerPosition.latitude;
    double markerLng = markerPosition.longitude;
    double bearing =
        Geolocator.bearingBetween(myLat, myLng, markerLat, markerLng);
    if (bearing < 0.0) {
      bearing += 360.0;
    }
    return bearing;
  }

  // 指定した地点までの距離を計算
  void calcMarkerDistance(Position myPosition, LatLng markerPosition) async {
    double myLat = myPosition.latitude;
    double myLng = myPosition.longitude;
    double markerLat = markerPosition.latitude;
    double markerLng = markerPosition.longitude;
    double distanceInMeters =
        Geolocator.distanceBetween(myLat, myLng, markerLat, markerLng);
    setState(() {
      distance = distanceInMeters.round().toString();
    });
  }

  // 指定した地点までの距離を表示
  String displayPlaceDistance() {
    calcMarkerDistance(myPosition, markerPosition);
    return '$distance m';
  }

  // スマホの向いている方角と指定した地点の方角の差が閾値以下かどうか確認
  bool checkTolerance(double compassAngle, double bearing) {
    if ((compassAngle - bearing).abs() < bearingTolerance) {
      return true;
    } else if ((compassAngle - bearing).abs() > 360 - bearingTolerance) {
      return true;
    } else {
      return false;
    }
  }

  @override
  void initState() {
    super.initState();

    WidgetsBinding.instance.addPostFrameCallback((_) {
      positionStream =
          Geolocator.getPositionStream(locationSettings: locationSettings)
              .listen((Position position) {
        // 位置情報に対する権限が許可されたら、デバイスの位置情報を返す
        myPosition = position;
      });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Compass Ruler'),
      ),
      body: StreamBuilder<CompassEvent>(
          stream: FlutterCompass.events,
          builder: (context, snapshot) {
            if (snapshot.hasError) {
              return Text('Error reading heading: ${snapshot.error}');
            }
            if (snapshot.connectionState == ConnectionState.waiting) {
              return const Center(
                child: CircularProgressIndicator(),
              );
            }

            direction = snapshot.data?.heading;
            markerBearing = calcMarkerBearing(myPosition, markerPosition);
            if (direction == null) {
              return const Center(
                child: Text("Device does not have sensors."),
              );
            }

            return Center(
              child: Column(
                children: [
                  const Icon(
                    Icons.expand_less,
                    size: 45,
                  ),
                  Opacity(
                      // スマホが指定した地点の方角を向いていたら透明度を1にして文字を表示
                      opacity:
                          checkTolerance(direction!, markerBearing) ? 1.0 : 0.0,
                      child: Column(
                        children: [
                          Text(displayPlaceDistance(),
                              style: const TextStyle(fontSize: 45)),
                          const Text("from ther marker",
                              style: TextStyle(fontSize: 30)),
                        ],
                      )),
                ],
              ),
            );
          }),
      ),
    );
  }
}

試したこと

https://coneta.jp/article/adab563b-1d6a-4ab8-be8f-b3f9df6df132/
こちらのサイトで、WidgetsBinding.instance.addPostFrameCallbackを使えばビルド後に処理を行うことができるのは知りましたが、どの処理をビルド後に行えばいいのかが分かりません。

Answer 1

calcMarkerDistanceからasyncとsetStateを外せばエラーは出ないようです。

  // 指定した地点までの距離を計算
  void calcMarkerDistance(Position myPosition, LatLng markerPosition) {
    double myLat = myPosition.latitude;
    double myLng = myPosition.longitude;
    double markerLat = markerPosition.latitude;
    double markerLng = markerPosition.longitude;
    double distanceInMeters =
        Geolocator.distanceBetween(myLat, myLng, markerLat, markerLng);
    distance = distanceInMeters.round().toString();
  }

後、上記の様にすればaddPostFrameCallbackを入れる必要はないです。

推測するに

• calcMarkerDistanceで何らかの理由でasyncを入れた。
• これによりdistanceが表示させようと思ったときに確定していない。
• そのため、setStateで更新処理を行おうとした。

といった理由で、提示された実装になってしまったのではないでしょうか。

今回のはasyncにする必要がなかったのでそれを外し、同期処理としてdistanceが確定するのでsetStateを外したという感じになります。

Comments

[ekito_station]

ご指摘の通り、calcMarkerDistanceからasyncとsetStateを外すとエラーが解消されました。
確かにasyncにする必要がありませんでしたね。
大変助かりました。ありがとうございます。