Flutter向けどこでもサポートSDKのウィジェット画面のカスタマイズ

Flutter向けどこでもサポートSDKのウィジェット画面のカスタマイズ

どこでもサポートSDK（ソフトウェア開発キット）では、どこでもサポートのウィジェット画面をカスタマイズできます。このページでは、ウィジェット画面の各種内容のカスタマイズ方法について説明します。

標準のテーマ

操作画面の標準テーマには、ライトとダークの2種類が用意されています。

Android  


iOS


テーマの種類の設定

どこでもサポートのウィジェット画面のテーマをカスタマイズするには、以下のコードを使用します。

  1. import
    'package:zohodesk_portal_configuration/zohodesk_portal_configuration.dart'

    show ZohodeskPortalConfiguration;

    import 'package:zohodesk_portal_configuration/data/configuration_model.dart';
    ZohodeskPortalConfiguration.setTheme(ZDPTheme.system);
ZDPTheme.system：操作画面のテーマは、使用中のOSのテーマと連動します。ライトモード／ダークモードに変更する場合は、以下のメソッドを使用します。

    •    ZDPTheme.light：使用中のOSのテーマに関わらず、ライトテーマが適用されます。
    •    ZDPTheme.dark：使用中のOSのテーマに関わらず、ダークテーマが適用されます。
上記のコードは、iOSとAndroidの両方に共通して利用できます。

特定のテーマにおける色のカスタマイズ 

Android

特定のテーマの色をカスタマイズするには、以下の手順を実施します。

手順1：以下のコードをAndroidプロジェクトの「Application」クラスに追加します。
  1. ZDPTheme theme = new ZDPTheme.Builder(true)
     .setColorPrimary(Color.parseColor(colorString))
     .setColorAccent(Color.parseColor(colorString))
     .build();
    ZDPortalConfiguration.setThemeBuilder(theme);
手順2：テーマの種類（ライトまたはダーク）を設定し、アプリでカスタマイズした色を反映させます。

iOS

どこでもサポートSDK（ソフトウェア開発キット）のウィジェット画面のテーマ（ライトまたはダーク）を上書きできます。

ライトテーマを適用している場合は、以下のメソッドを使用します。
  1. ZDPThemeManager.updateLightTheme(theme: <#ZDPThemeProtocol#>)
ダークテーマを適用している場合は、以下のメソッドを使用します。

  1. ZDPThemeManager.updateDarkTheme(theme: <#ZDPThemeProtocol#>)

「ZDPThemeProtocol」では、どこでもサポートで使用する色の属性のリストを指定できます（例：「primaryTextColor」、「navigationBarTextColor」）。なお、プロトコル内の属性はすべて任意です。独自のクラスを作成した上で、対象のクラスの属性を実装し、「updateLightTheme」メソッドや「updateDarkTheme」メソッドの「ZDThemeProtocol」内に複数指定することも可能です。これにより、標準のテーマの色をクラスで設定した色に変更することができます。


テーマの種類の設定では、ライトテーマまたはダークテーマのいずれかを選択する必要があります。テーマはカスタマイズ可能ですが、画面表示の全体的なデザインには、ライトテーマまたはダークテーマのいずれかが適用されます。