Flutter 別ファイルで参照している値を動的に更新して表示したい

Question

Flutter初心者です。
別ファイルで参照している値を動的に更新して表示したいです。

AppBartに別ファイルで宣言した変数を表示させています。
別ファイルで作ったウィジェットのボタンを押すとその変数がカウントアップされるのですが、その変数の値が変わったと同時にAppBarでの表示も更新されるようにしたいです。
今の状態だとボタンを押しても参照している変数の値が変わっても表示されません。

解決策があれば教えていただけますでしょうか。
よろしくお願いします。

ソースコードは以下のようになっています。

『value.dart』

int value = 0;

『main.dart』

import 'package:dialog_sample2/value.dart';
import 'package:flutter/material.dart';
import './count_up.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MainPage(),
    );
  }
}

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("count : "+value.toString()),
      ),
      body: CountUp(),
    );
  }
}

『count_up.dart』

import 'package:dialog_sample2/value.dart';
import 'package:flutter/material.dart';

class CountUp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            value++;
            print(value);
            },
          child: Text('count up button'),
        ),
      ),
    );
  }
}

Comments

[sakesake]

import 'package:dialog_sample2/value.dart';

は無視してください！

Answer 1

動的に変化する場所はStatefulWidgetにする。この場合はMainPage。
変更する箇所からはStatefulWidgetのStateに対してsetStateを呼び出す処理を呼び出すというのが基本になるのでしょう。

外部のデータの変化でウィジェットの状態を変えるというのであれば、riverpodなどのパッケージを使って実装したほうが良いんじゃないかと思います。
こちらについては、riverpod flutter counterで検索すればサンプル等がヒットすると思います。

以下のはやっつけ的ではあるけど、変更量が少なくとりあえず動くコードです(変更箇所のクラスのみ)。

class MainPage extends StatefulWidget {
  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  callBack() {
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("count : " + value.toString()),
      ),
      body: CountUp(
        callBack: callBack,
      ),
    );
  }
}

class CountUp extends StatelessWidget {
  final Function callBack;
  const CountUp({Key? key, required this.callBack}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            value++;
            callBack(); // ここで親のsetStateを呼び出す関数を呼び出す
            debugPrint(value.toString());
          },
          child: const Text('count up button'),
        ),
      ),
    );
  }
}