【Flutter】クラスやWidgetを使い回す方法/切り出し/テンプレート

最終更新日

FlutterでListViewを使っていると、ほぼ同じWidgetの構成なのでテンプレート化させ、使い回せないかなと思いましたので、調べまとめました。

結論

無理そう。

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

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

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

https://teratail.com/questions/325282
Point

結論:無理そう
ただ、下記の3つのパターンに合致するものは使えそう。
①メソッド切り出しパターン
②クラスとしてcomponentを分割するパターン
③setStateの中で、関数の戻り値を応用するパターン

それでも少しコードを美しく書きたい

切り出してスッキリしたコードを書きたいと思い探していると、下記のようなものを見つけました。

最後に参照したリンクがありますので、読みにくければそちらを利用してください。

方法1 プロパティとして切り出す

class Testy extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
            child: _greetingText,
        ),
      ),
    );
  }

  Widget _greetingText = Text(
      'Hello',
      style: TextStyle(fontSize: 12),
  );
}

方法2 クラスとして切り出す

恐らく一番使われている切り出し方法です。

  1. widgetを右クリック
  2. Refactor Extract
  3. Extract Flutter Widge

で切り出すことができます。ホットリロードが効くため瞬時に結果を反映できるが、プロジェクトが大きくなればなるほど読みにくくなります

class Testy extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          child: _GreetingText(),
        ),
      ),
    );
  }
}

class _GreetingText extends StatelessWidget {
  const _GreetingText({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(
      'Hello',
      style: TextStyle(fontSize: 12),
    );
  }
}

方法3 メソッドとして切り出す

class Testy extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          child: _greetingText(),
        ),
      ),
    );
  }

  Widget _greetingText() {
    return Text(
      'Hello',
      style: TextStyle(fontSize: 12),
    );
  }
}

https://landland.biz/blog/2020-05-21-flutter-%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E5%88%87%E3%82%8A%E5%87%BA%E3%81%97%E6%96%B9%E6%B3%95/

fem