Dart: Widget部分とメソッド部分でファイル分割をしたい

Question

Dart初心者です。
Widget部分の記述とメソッド部分の記述でファイル分割をしたいと考えています。

現在、チュートリアルを見ながらDartの勉強を進めているところです。
具体的には、StatefulWidget内でユーザーのアクションに合わせて画面を変更させています。

class A extends StatefulWidget {
  A({Key key}) : super(key: key);
  @override
  AState createState() => AState();
}

class AState extends State<A> {

  String func1(int n) {
    // (略) //
    return str;
  }

  void func2() {
    setState(() {
    	// (略) //
    });
  }

  void func3() {
    setState(() {
    	// (略) //
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
    	// (略) //
        RaisedButton(
        	onPressed: func2,
        ),
        NumberPicker.integer(
        	onPressed: func3,
        ),
    	// (略) //
    );
  }
}

同じファイル内にメソッド記述とWidget記述があると読みにくくなるので、これらを別ファイルに分割したいと考えています。
このとき、メソッド部分(func1から3)だけを取り出すことはできるのでしょうか。
特にfunc2と3はユーザーからのイベントを受けて、中でsetStateを行っているため、ここだけ分離することができるのか疑問です。
メソッドはグローバルで宣言するとどこからでも参照できるようになってしまうので、一つのファイルからimportやextendで読み込みたいと考えています。

Dartではそもそもこんなことをする想定がされていないのでしょうか。
その場合はどのようにファイル分割を行うのが適切なのでしょうか。
メソッド、Widgetそれぞれが長くなってしまうことは諦めて、より細かい部品単位でWidgetを分けていくしかないのでしょうか。

よろしくお願いいたします。

Answer 1

メソッドはクラスの中で作成するものだと思います。
setStateは状態(state)を持つクラスの中でのみ使えるはずなので、別ファイルでsetStateを含むメソッドを記述していたとしても、流用することは難しいと考えます。
以上を前提に、３つほどsetStateを活用したパターンを作ってみました。

①メソッド切り出しパターン
②クラスとしてcomponentを分割するパターン
③setStateの中で、関数の戻り値を応用するパターン

印象としては②が一般的かと思います。可読性もよく、パフォーマンスも優れていると思います。

home_screen.dart

import 'package:flutter/material.dart';
import 'package:method_test_app/component.dart';
import 'utilities.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  String _message;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _message = "";
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text("テスト"),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(20.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              //メソッドとして切り出しパターン
              SizedBox(
                width: double.infinity,
                child: RaisedButton(
                  color: Colors.brown,
                  onPressed: () => sayHallo(),
                  child: Text("Function A"),
                ),
              ),
              //クラスとして別ファイルに切り出すパターン
              ReusableButton(
                color: Colors.brown,
                onPressed: () {
                  setState(() {
                    _message = "ありがとう";
                  });
                },
              ),
              //関数を別ファイルに切り出すパターン
              SizedBox(
                width: double.infinity,
                child: RaisedButton(
                  color: Colors.brown,
                  onPressed: () {
                    setState(() {
                      _message = editMessage(message: _message);
                    });
                  },
                  child: Text("Function C"),
                ),
              ),
              Text(_message)
            ],
          ),
        ),
      ),
    );
  }
  
  //メソッドとして切り出しパターン（続き）
  sayHallo() {
    setState(() {
      print("テスト");
      _message = "こんにちわ";
    });
  }
}

components.dart
新しくReusableButtonを作成しています。その中で、VoidCallback（戻り値のないタイプの関数）を変数として組み込んでいます。

import 'package:flutter/material.dart';

class ReusableButton extends StatelessWidget {
  final VoidCallback onPressed;
  final Color color;

  ReusableButton({@required this.onPressed, this.color});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: double.infinity,
      child: RaisedButton(
          onPressed: onPressed, color: color, child: Text("Function B")),
    );
  }
}

utilities.dart
変数messageの内容を引数として受け取り、String型の戻り値を返しています。

import 'package:flutter/material.dart';

String editMessage({@required String message}) {
    return "太郎くん${message}";
}

Comments

[tmsah]

丁寧な回答ありがとうございます。

やはり私が想定していた書き方は一般的ではないのですね...
②で細かく部品化しつつ、同じファイル内で切り出したメソッドの返り値をsetState内で使う①③のハイブリッドのような記述がいいのかなと思いました。
②で切り出ししても、結局onPress内でsetStateしていたらその処理は元のファイル(home_screen.dart)に記述しないとダメということになりますね。
切り出した先で(③のように)メソッドを定義しておいてそれを呼び出して値を返す、というのもありな気がしますけど、それも結局メソッドのネスト内にsetStateが必要になったりしたらダメなので、一般性の面でもよろしくないなと思いました。
勉強になりました。
ありがとうございました。