レイアウトに必要な値（marginやcolor、固定文言）の管理について

[riscait]

原案： @naipaka
原案URL：https://github.com/altive/suit-travel/discussions/49 ※プライベートリポジトリのため閲覧制限あり

プライベートリポジトリDiscussionsで開かれた議論だったため、 @riscait が移行し、一部内容を変更して公開しました。

---

概要

以下の理由から、アプリ全体または複数箇所で使用するレイアウトに必要な値（marginやcolor、固定文言）はWidget等の中で直書きせず、参照した値を使うようにするのはどうでしょうか？

• 何を示す設定値なのかが変数名を見てわかると保守しやすい
• 複数箇所で同じ値を使っている箇所を仕様変更に強い形にしたい
• 色の定義の一覧やその画面で使っている設定値が一覧できるようにしたい

そこで、以下のルールとディレクトリ構成を提案します。
賛成/反対や改善点、追加したい項目、疑問点等あればコメントいただきたいです！

ルール

• ページ（画面）専用の数値や文言はそのWidgetに直接定義する
  • 複数言語に対応または対応確度高いのであれば、文言はarbで管理する
• Colorの直書きは禁止とし、Color定義から参照して使う
  • ThemeData.colorSchemeの定義で足りるならColorSchemeを使用する
• TextStyleは Theme.Data.textTheme に定義し、 Theme.of(context) から使用する

ディレクトリ構成

├── commons
├── domain
├── infrastructure
├── presentation
│   ├── style [New!]  -> ColorやTypographyやThemeDataなどを定義するディレクトリ
│   │   ├── style.dart
│   │   └── src -> src内のファイルをpart or exportする
│   │       ├── button_theme.dart -> ボタンに関するテーマデータ
│   │       ├── layout.dart  -> 複数箇所で使う数値を定義（数が多くなった場合は適切に分離）
│   │       ├── text_theme.dart   -> TextThemeごとのTextStyleを定義 
│   │       ├── app_color.dart -> 色を定義
│   │       ├── dark_theme_data.dart  -> ダークテーマ
│   │       └── light_theme_data.dart -> ライトテーマ
│   └──pages
└── main.dart

例

layout.dart

import 'package:flutter/material.dart';

const appbarSize = Size(double.infinity, kToolbarHeight);

text_theme.dart

import 'package:flutter/material.dart';

const textTheme = TextTheme(
  titleLarge: TextStyle(
    fontWeight: FontWeight.bold,
  ),
);

button_theme_data.dart

import 'package:flutter/material.dart';

ElevatedButtonThemeData get elevatedButtonTheme => ElevatedButtonThemeData(
      style: ElevatedButton.styleFrom(
        minimumSize: const Size.fromHeight(44),
      ),
    );

OutlinedButtonThemeData get outlinedButtonTheme => OutlinedButtonThemeData(
      style: OutlinedButton.styleFrom(
        minimumSize: const Size.fromHeight(44),
      ),
    );

TextButtonThemeData get textButtonTheme => TextButtonThemeData(
      style: TextButton.styleFrom(),
    );

light_theme_data.dart

final _defaultThemeData = ThemeData.light();
const _colorScheme = ColorScheme.light();

ThemeData get lightThemeData {
  return _defaultThemeData.copyWith(
    useMaterial3: true,
    colorScheme: _colorScheme,
    textTheme: _defaultThemeData.textTheme.merge(textTheme),
    elevatedButtonTheme: elevatedButtonTheme,
    outlinedButtonTheme: outlinedButtonTheme,
    textButtonTheme: textButtonTheme,
  );
}

dark_theme_data.dart

final _defaultThemeData = ThemeData.dark();
const _colorScheme = ColorScheme.dark();

ThemeData get darkThemeData {
  return _defaultThemeData.copyWith(
    useMaterial3: true,
    colorScheme: _colorScheme,
    textTheme: _defaultThemeData.textTheme.merge(textTheme),
    elevatedButtonTheme: elevatedButtonTheme,
    outlinedButtonTheme: outlinedButtonTheme,
    textButtonTheme: textButtonTheme,
  );
}

---

色々と意見いただけたら幸いです！

[naipaka]

移行ありがとうございます！🙌

presentation配下にstyleを置く感じですね✍️

layoutには個別のWidgetのレイアウトは定義せずにある程度汎用的に使える値を定義する形になるかと思いますが、
button_themeやtext_themeも同様で汎用的に使うものだけを定義する感じですかね？👀

[riscait]

presentation配下にstyleを置く感じですね✍️

その通りです！UIに関することなのでここに置きました👌

button_themeやtext_themeも同様で汎用的に使うものだけを定義する感じですかね？👀

その通りです！アプリのデザイン方針に従って、汎用的な項目だけ埋める想定です👍

[naipaka]

light_theme_data、dark_theme_dataには下記の感じでそれぞれ定義するイメージですか？👀

final lightTheme = ThemeData.light().copyWith(
  elevatedButtonTheme: elevatedButtonTheme,
  ...
);

final darkTheme = ThemeData.dark().copyWith(
  elevatedButtonTheme: darkElevatedButtonTheme,
  ...
);

[riscait]

ありがとうございます🙌

button_themeやtext_themeも同様で汎用的に使うものだけを定義する感じですかね？👀

まさにその通りです。 ライトテーマとダークテーマ両方で同じ定義をしないように色以外のデフォルト値を定義するイメージです👍
テーマ固有の色など設定したいときは copyWith して各種テーマデータ内で拡張します👌

light_theme_data、dark_theme_dataの例を追加しました✍️

[riscait]

こちら古くなってしまったのでCloseします！
最新のflutterアプリディレクトリ構成はこちらを参照↓
https://handbook.altive.co.jp/engineering/flutter/app-lib-directories/