# テーマとスタイリング

## はじめにテーマを使用してアプリケーションの UI スタイルを管理できます。テーマにより、テキストのフォントサイズ、ボタンの表示方法、アプリケーションの全体的な外観を変更できます。テーマが初めての方は、Flutter ウェブサイトの例が参考になります。こちらをご覧ください。 Nylo には、`ライトモード` と `ダークモード` 用の事前設定されたテーマが含まれています。デバイスが「ライト/ダーク」モードに入ると、テーマも自動的に更新されます。

## ライト＆ダークテーマ - ライトテーマ - `lib/resources/themes/light_theme.dart` - ダークテーマ - `lib/resources/themes/dark_theme.dart` これらのファイル内に、ThemeData と ThemeStyle が事前定義されています。

## テーマの作成アプリに複数のテーマを持たせたい場合、簡単に作成できます。テーマが初めての方は、以下の手順に従ってください。まず、ターミナルで以下のコマンドを実行します ``` bash metro make:theme bright_theme ``` 注意: **bright_theme** を新しいテーマの名前に置き換えてください。これにより `/resources/themes/` ディレクトリに新しいテーマが作成され、`/resources/themes/styles/` にテーマカラーファイルも作成されます。 ``` dart // App Themes final List> appThemes = [ BaseThemeConfig( id: getEnv('LIGHT_THEME_ID'), description: "Light theme", theme: lightTheme, colors: LightThemeColors(), ), BaseThemeConfig( id: getEnv('DARK_THEME_ID'), description: "Dark theme", theme: darkTheme, colors: DarkThemeColors(), ), BaseThemeConfig( // 新しいテーマが自動的に追加 id: 'Bright Theme', description: "Bright Theme", theme: brightTheme, colors: BrightThemeColors(), ), ]; ``` 新しいテーマのカラーは **/resources/themes/styles/bright_theme_colors.dart** ファイルで変更できます。

## テーマカラープロジェクトのテーマカラーを管理するには、`lib/resources/themes/styles` ディレクトリを確認してください。このディレクトリには light_theme_colors.dart と dark_theme_colors.dart のスタイルカラーが含まれています。このファイルでは、以下のような内容があります。 ``` dart // 例: ライトテーマのカラー class LightThemeColors implements ColorStyles { // 全般 @override Color get background => const Color(0xFFFFFFFF); @override Color get content => const Color(0xFF000000); @override Color get primaryAccent => const Color(0xFF0045a0); @override Color get surfaceBackground => Colors.white; @override Color get surfaceContent => Colors.black; // アプリバー @override Color get appBarBackground => Colors.blue; @override Color get appBarPrimaryContent => Colors.white; // ボタン @override Color get buttonBackground => Colors.blue; @override Color get buttonContent => Colors.white; @override Color get buttonSecondaryBackground => const Color(0xff151925); @override Color get buttonSecondaryContent => Colors.white.withAlpha((255.0 * 0.9).round()); // ボトムタブバー @override Color get bottomTabBarBackground => Colors.white; // ボトムタブバー - アイコン @override Color get bottomTabBarIconSelected => Colors.blue; @override Color get bottomTabBarIconUnselected => Colors.black54; // ボトムタブバー - ラベル @override Color get bottomTabBarLabelUnselected => Colors.black45; @override Color get bottomTabBarLabelSelected => Colors.black; // トースト通知 @override Color get toastNotificationBackground => Colors.white; } ```

## ウィジェットでのカラーの使用 ``` dart import 'package:flutter_app/config/theme.dart'; ... // テーマに応じてライト/ダークの背景色を取得 ThemeColor.get(context).background // "ThemeColor" クラスの使用例 Text( "Hello World", style: TextStyle( color: ThemeColor.get(context).content // Color - content ), ), // または Text( "Hello World", style: TextStyle( color: ThemeConfig.light().colors.content // ライトテーマのカラー - プライマリコンテンツ ), ), ```

## ベーススタイルベーススタイルにより、コードの一箇所から様々なウィジェットのカラーをカスタマイズできます。 Nylo にはプロジェクト用の事前設定されたベーススタイルが `lib/resources/themes/styles/color_styles.dart` にあります。これらのスタイルは、`light_theme_colors.dart` と `dart_theme_colors.dart` のテーマカラーのインターフェースを提供します。
ファイル `lib/resources/themes/styles/color_styles.dart` ``` dart abstract class ColorStyles { // 全般 @override Color get background; @override Color get content; @override Color get primaryAccent; @override Color get surfaceBackground; @override Color get surfaceContent; // アプリバー @override Color get appBarBackground; @override Color get appBarPrimaryContent; @override Color get buttonBackground; @override Color get buttonContent; @override Color get buttonSecondaryBackground; @override Color get buttonSecondaryContent; // ボトムタブバー @override Color get bottomTabBarBackground; // ボトムタブバー - アイコン @override Color get bottomTabBarIconSelected; @override Color get bottomTabBarIconUnselected; // ボトムタブバー - ラベル @override Color get bottomTabBarLabelUnselected; @override Color get bottomTabBarLabelSelected; // トースト通知 Color get toastNotificationBackground; } ``` ここにスタイルを追加し、テーマにカラーを実装できます。

## テーマの切り替え Nylo はテーマをリアルタイムで切り替える機能をサポートしています。例えば、ユーザーがボタンをタップして「ダークテーマ」を有効にする場合のテーマ切り替えに対応できます。以下のようにして対応できます: ``` dart import 'package:nylo_framework/theme/helper/ny_theme.dart'; ... TextButton(onPressed: () { // 「ダークテーマ」を使用するように設定 NyTheme.set(context, id: "dark_theme"); setState(() { }); }, child: Text("Dark Theme") ), // または TextButton(onPressed: () { // 「ライトテーマ」を使用するように設定 NyTheme.set(context, id: "light_theme"); setState(() { }); }, child: Text("Light Theme") ), ```

## フォント Nylo では、アプリ全体のプライマリフォントの更新が簡単です。`lib/config/design.dart` ファイルを開いて以下を更新してください。 ``` dart final TextStyle appThemeFont = GoogleFonts.lato(); ``` リポジトリには GoogleFonts ライブラリが含まれているので、すべてのフォントを簡単に使い始めることができます。フォントを別のものに更新するには、以下のようにします: ``` dart // 旧 // final TextStyle appThemeFont = GoogleFonts.lato(); // 新 final TextStyle appThemeFont = GoogleFonts.montserrat(); ``` 詳しくは公式 Google Fonts ライブラリをご覧ください。カスタムフォントを使用する必要がありますか？このガイドをご確認ください - https://flutter.dev/docs/cookbook/design/fonts フォントを追加したら、以下の例のように変数を変更してください。 ``` dart final TextStyle appThemeFont = TextStyle(fontFamily: "ZenTokyoZoo"); // ZenTokyoZoo はカスタムフォントの例として使用 ```

## デザイン **config/design.dart** ファイルは、アプリのデザイン要素を管理するために使用されます。 `appFont` 変数にはアプリのフォントが含まれています。 `logo` 変数はアプリのロゴを表示するために使用されます。 **resources/widgets/logo_widget.dart** を変更してロゴの表示方法をカスタマイズできます。 `loader` 変数はローダーを表示するために使用されます。Nylo は一部のヘルパーメソッドでこの変数をデフォルトのローダーウィジェットとして使用します。 **resources/widgets/loader_widget.dart** を変更してローダーの表示方法をカスタマイズできます。

## テキストエクステンション Nylo で使用できるテキストエクステンションは以下の通りです。 | ルール名 | 使い方 | 情報 | |---|---|---| | Display Large | displayLarge() | **displayLarge** textTheme を適用 | | Display Medium | displayMedium() | **displayMedium** textTheme を適用 | | Display Small | displaySmall() | **displaySmall** textTheme を適用 | | Heading Large | headingLarge() | **headingLarge** textTheme を適用 | | Heading Medium | headingMedium() | **headingMedium** textTheme を適用 | | Heading Small | headingSmall() | **headingSmall** textTheme を適用 | | Title Large | titleLarge() | **titleLarge** textTheme を適用 | | Title Medium | titleMedium() | **titleMedium** textTheme を適用 | | Title Small | titleSmall() | **titleSmall** textTheme を適用 | | Body Large | bodyLarge() | **bodyLarge** textTheme を適用 | | Body Medium | bodyMedium() | **bodyMedium** textTheme を適用 | | Body Small | bodySmall() | **bodySmall** textTheme を適用 | | Label Large | labelLarge() | **labelLarge** textTheme を適用 | | Label Medium | labelMedium() | **labelMedium** textTheme を適用 | | Label Small | labelSmall() | **labelSmall** textTheme を適用 | | Font Weight Bold | fontWeightBold | Text ウィジェットにボールドフォントウェイトを適用 | | Font Weight Light | fontWeightLight | Text ウィジェットにライトフォントウェイトを適用 | | Set Color | setColor(context, (color) => colors.primaryAccent) | Text ウィジェットに別のテキストカラーを設定 | | Align Left | alignLeft | フォントを左揃えに | | Align Right | alignRight | フォントを右揃えに | | Align Center | alignCenter | フォントを中央揃えに | | Set Max Lines | setMaxLines(int maxLines) | テキストウィジェットの最大行数を設定 |

#### Display large ``` dart Text("Hello World").displayLarge() ```

#### Display medium ``` dart Text("Hello World").displayMedium() ```

#### Display small ``` dart Text("Hello World").displaySmall() ```

#### Heading large ``` dart Text("Hello World").headingLarge() ```

#### Heading medium ``` dart Text("Hello World").headingMedium() ```

#### Heading small ``` dart Text("Hello World").headingSmall() ```

#### Title large ``` dart Text("Hello World").titleLarge() ```

#### Title medium ``` dart Text("Hello World").titleMedium() ```

#### Title small ``` dart Text("Hello World").titleSmall() ```

#### Body large ``` dart Text("Hello World").bodyLarge() ```

#### Body medium ``` dart Text("Hello World").bodyMedium() ```

#### Body small ``` dart Text("Hello World").bodySmall() ```

#### Label large ``` dart Text("Hello World").labelLarge() ```

#### Label medium ``` dart Text("Hello World").labelMedium() ```

#### Label small ``` dart Text("Hello World").labelSmall() ```

#### Font weight bold ``` dart Text("Hello World").fontWeightBold() ```

#### Font weight light ``` dart Text("Hello World").fontWeightLight() ```

#### Set color ``` dart Text("Hello World").setColor(context, (color) => colors.content) // colorStyles からのカラー ```

#### Align left ``` dart Text("Hello World").alignLeft() ```

#### Align right ``` dart Text("Hello World").alignRight() ```

#### Align center ``` dart Text("Hello World").alignCenter() ```

#### Set max lines ``` dart Text("Hello World").setMaxLines(5) ```