Flutterで画面遷移時の値の受け渡しをしたい

Question

前提・実現したいこと

画面遷移時の値の受け渡しをスマートにしたい

記載したコードで自分が想定した機能は実装でき、
エラーもないのですが、
「果たしてこれはスマートなやり方なのか？」
「もっと無駄なく値の受け渡しができるのではないか？」
と思い有識者の方のご意見を頂きたく質問いたしました。

構造

Flutterをはじめて起動した時のデモアプリを改造したもので、
以下のWidgetを配置しています。

■ Flutter Demo Home Page
・値を表示するテキスト
・値を増加するボタン
・値を減少するボタン
・値を０にリセットするボタン
・NextPageページへ遷移し、現在の値を渡すボタン

■ NextPage
・戻るボタン（左上）
・Flutter Demo Home Pageから渡された値を表示するテキスト

該当のソースコード

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  final int number = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      routes: {
        '/': (context) => MyHomePage(title: 'Flutter Demo Home Page'),
        '/next': (context) => NextPage(this.number),
      },
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  void _decreaseCounter() {
    setState(() {
      _counter--;
    });
  }

  void _resetCounter() {
    setState(() {
      _counter = 0;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(

        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: Column(
        verticalDirection: VerticalDirection.down, // childrenの先頭を上に配置
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          FloatingActionButton(
            heroTag: "add",
            onPressed: _incrementCounter,
            tooltip: 'Increment',
            child: Icon(Icons.add),
          ),
          Container( // ボタン間の余白のためContainerでラップ
            margin: EdgeInsets.only(top: 16.0),
            child: FloatingActionButton(
              heroTag: "remove",
              backgroundColor: Colors.redAccent,
              onPressed: _decreaseCounter,
              child: Icon(Icons.remove),
            ),
          ),
          Container( // ボタン間の余白のためContainerでラップ
            margin: EdgeInsets.only(top: 16.0),
            child: FloatingActionButton(
              heroTag: "reset",
              backgroundColor: Colors.amberAccent,
              onPressed: _resetCounter,
              child: Icon(Icons.refresh),
            ),
          ),
          Container( // ボタン間の余白のためContainerでラップ
            margin: EdgeInsets.only(top: 16.0),
            child: FloatingActionButton(
              heroTag: "NextPage",
              backgroundColor: Colors.purpleAccent,
              onPressed: (){
                Navigator.push(
                    context, MaterialPageRoute(builder: (context) => NextPage(_counter),)
                );
              },
              child: Icon(Icons.arrow_forward),
            ),
          ),
        ],
      ),
    );
  }
}

class NextPage extends StatelessWidget {

  NextPage(this.number);
  final int number;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("NextPage"),
      ),
      body: Center(
      child: Text("$number",
        style: TextStyle(
          fontWeight: FontWeight.bold,
          fontSize: 100,
          color: Colors.purpleAccent,
        ),),
      ),
    );
  }
}

補足情報（FW/ツールのバージョンなど）

・FloatingButtonを複数設置するのが推奨されていないことは公式サイトで確認済みです。
・以下を参考に画面遷移を実装しました。
[Flutter]画面遷移のやり方

Answer 1

そのやり方でスマートだと思います。
pushではなくpushNamedを使う方法もありますが、記述量はたいして変わりません。

//MyAppのroutesで値を渡さないように変更(コンストラクタを使わないから)
routes: {
        ...
        '/next': (context) => NextPage(),
      },

//画面遷移はpushNamed
//arguments引数で値を渡すことが出来ます
Navigator.of(context).pushNamed('/next', arguments: _counter);

//NextPageのコンストラクタを消す。final int number;も消す
//値の取得
//NextPageのbuilderメソッドで
final number = ModalRoute.of(context)!.settings.arguments;

しかし、これらの方法を使うと面倒になる場合があります。
例えば、10回遷移した先の画面に値を渡すためだけに、経由する全ての画面に値を渡していくのはとても大変です。
バケツリレーのようなイメージです。

その場合には、Provider等で状態管理するのがスマートです。

Comments

[Risney]

ご回答ありがとうございます！
引数渡す時はpush、シンプルに画面繊維するだけならpushNamedというイメージでしょうか？
Providerというメソッドは初めてきいたので調べて見たいと思います。

また値を引き渡す用に「final int number;」を
引き渡し元と引き渡し先のクラスに変数定義しているのですが、
カウントを表示している「int _counter = 0;」のまま渡すことはできないのでしょうか。