ChangeNotifierProviderでnotifyListenersで通知した時にUIが更新されない【Flutter】

Question

実現したいこと

AppBarのタイトルやボタンをString型やVoidCallbackとしてProviderに保持し、下位のWidgetツリーから変更できるようにしたい。

試したこと

自作のChangeNortifierを継承したAppBarStateクラスをChangeNotifierProviderでcreateしてAppBarState内の値をWidgetで使用しています。

さらに、AppBarState内でsetTitleメソッドを定義していて、メソッド実行時、titleの値を変更してnotifyListners()で通知するようにしています。

ですが、setTitleメソッド実行時にUIが更新されません。

setTitleが呼び出されたあと、HotReloadすると値が変更されます。

setTitleが呼び出された時点で変更を反映させるためにはどうしたらいいのでしょうか。

コードを全て載せると長くなってしまうので、関連する箇所のみコードを載せておきます。

気になるところでもいいので何か分かる方がいましたら、お力添えしていただけるとありがたいです。

よろしくお願いします。

class AppBarState extends ChangeNotifier {
  AppBarState() : hasPreviousPage = false;

  Widget leadButton;
  VoidCallback leadButtonFunction;
  bool hasPreviousPage;

  String title = "Title";

  get leadButtonAction => leadButtonFunction;
  get appBarTitle => title;

  void setTitle(String value) {
    title = value;
    notifyListeners();
  }

  void setLeadButton(Widget widget, VoidCallback callback) {
    leadButton = widget;
    leadButtonFunction = callback;
    notifyListeners();
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => AppBarState())
      ],
      child: MemberPage(),
    );
  }
}

class MemberPage extends StatefulWidget {
  @override
  MemberPageState createState() => MemberPageState();
}

class MemberPageState extends State<MemberPage> {

  @override
  Widget build(BuildContext context) {
    String appBarTitle = Provider.of<AppBarState>(context).appBarTitle;

    return Scaffold(
      appBar: AppBar(
        title: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 20.0),
          child: Text(appBarTitle),
        ),
      ),
      ...
    )
  }
}

class QuestionDetailList extends StatefulWidget {
  @override
  _QuestionDetailListState createState() => _QuestionDetailListState();
}

class _QuestionDetailListState extends State<QuestionDetailList> {
  @override
  Widget build(BuildContext context) {
    Provider.of<AppBarState>(context, listen: false).setTitle("Changed Title");
    return Container();
  }
}

Answer 1

build処理中にnotifyListenersで状態の変更の通知を行うことはできません。どうしても行いたければ、以下の様に、WidgetsBinding.instance.addPostFrameCallbackを利用して、build完了後に呼び出すことは可能です。（一度のみ変更が行われる様に、initStateで設定しています）

class _QuestionDetailListState extends State<QuestionDetailList> {

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

    WidgetsBinding.instance.addPostFrameCallback((_) =>
        Provider.of<AppBarState>(context, listen: false)
            .setTitle("Changed Title"));
  }

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

Comments

[toshi_ki]

`build`処理中は`notifyListners`送れないんですね。だから、`build`処理中には`build`完了後に実行する処理をスケジュールするだけにするといった感じでしょうか。

ともかく、`addPostFrameCallBack`内に処理を書いたら上手くいきました。大変勉強になりました、ありがとうございます。(*- -)(*_ _)ﾍﾟｺﾘ