Flutterで共通のスタイルを関数で定義しておくには？

Question

こんにちは。
今回、Flutterでの共通スタイルの管理方法の質問です。
例えば、アプリ全体に、同じスタイルのテキストスタイルを当てて、それらを1つのファイルで一括管理したい場合、どのようにするのが設計上自然なのでしょうか？

今回はテストで
fontSize: 16,
fontWeight: FontWeight.bold,
を適用させたいです。

普段、自分はWEB開発ではSCSSを触っていて、このような場合はmixinを使うもので、直感的にはこのようにしてみたのですが、

class Mixin {
  void fontTitle() {
    Text(
        style: TextStyle(
      fontSize: 16,
      fontWeight: FontWeight.bold,
    ));
  }
}

class FreshCasts extends StatefulWidget with Mixin {
  @override
  _FreshCastsState createState() => _FreshCastsState();
}

class _FreshCastsState extends State<FreshCasts> {
  @override
  Widget build(BuildContext context) {
return Text(
              'テスト',
              fontTitle(),
              textAlign: TextAlign.left,
            ),
}

これだとエラーとなってしまい。。
ただやりたいことのイメージとしては↑のような感じです。
関数でまとめて、複数のプロパティを一括で指定したい、といった感じです。

この場合どのようにすれば良いのでしょうか？
ご教授よろしくお願いいたします。

Answer 1

グローバルCSSのように、アプリ全体に適用するようなものは、なるべくThemeを使って管理します。

ThemeData get theme => ThemeData(
      textTheme: TextTheme(
        headline1: TextStyle(
          fontSize: 20,
          fontWeight: FontWeight.bold,
        ),
        headline2: TextStyle(
          fontSize: 18,
          fontWeight: FontWeight.bold,
        ),
      ),
    );


class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: theme,
      home: Home(),
    );
  }
}

また、局所的に使われるようなスタイルを１箇所でまとめて管理したいという場合は、以下のようにStylesのようなクラスを作ってstaticなプロパティとして持たせておくのがよくある実装です。

class Styles {
  static const fontTitleStyle = TextStyle(
    fontSize: 16,
    fontWeight: FontWeight.bold,
  );

  static const subTitleStyle = TextStyle(
    fontSize: 14,
  );
}

以下のように使うことができます。staticで宣言しているので、withを使ってmixinする必要はありません。

Text(
  "あああ",
  style: Styles.fontTitleStyle,
  textAlign: TextAlign.center,
)

---

あと、もしかしたら質問の意図とはズレるかもしれませんが、以下のようにfontSize: 16とfontWeight: FontWeight.boldで文字を表示する専用のウィジェットを作るというのも自然です。

class FontTitle extends StatelessWidget {
  final String text;
  final TextAlign textAlign;

  const FontTitle(this.text, {this.textAlign});

  @override
  Widget build(BuildContext context) {
    return Text(
      text,
      style: TextStyle(
        fontSize: 16,
        fontWeight: FontWeight.bold,
      ),
      textAlign: this.textAlign ?? TextAlign.left,
    );
  }
}

以下のように使うことができます。

FontTitle(
  "あああ",
  textAlign: TextAlign.center,
),

Comments

[Yariii]

なるほど、いろいろ使い分けできるんですね、勉強になります。今回の場合はクラスを作ってまとめておくのが良さそうだったので、そちらを採用しようかと思います！
ご回答ありがとうございました。m_ _m