2021.10.06.水曜開発ログ

5417 ワード
flutter テキストリンク
開発中のアプリPEEPは、ユーザーの感情に応じて音楽再生を推奨している.感情は5種類あり、HAPPY、SAD、ANGRY、CALM、FEAR.
昨日の開発...

問題の状況

music_player_page.dart音楽プレーヤー画面ですが、曲の感じによって背景色が異なります.music_player_page.dart中感情の色は以下のようにハードコードされている.
var pageColor = Colors.white;
if (randomEmotion == 'happy') {
  pageColor = const Color(0xFFd5b15c);
} else if (randomEmotion == 'sad') {
  pageColor = const Color(0xFF7fbad0);
} else if (randomEmotion == 'angry') {
  pageColor = const Color(0xFFd77881);
} else if (randomEmotion == 'calm') {
  pageColor = const Color(0xFF669f82);
} else if (randomEmotion == 'fear') {
  pageColor = const Color(0xFF8481ac);
}
また、同じ画面には波乱万丈の動画があり、これも感情色にマッチした似たような色で、上のコードとColor()のHEX値の差しかありません.
if (randomEmotion == 'happy') {
  pickColor = const Color(0xFFe8c075);
  pickColor1 = const Color(0xFFd57a47);
} else if (randomEmotion == 'sad') {
  pickColor = const Color(0xFFa5c3d7);
  pickColor1 = const Color(0xFF446199);
} else if (randomEmotion == 'angry') {
  pickColor = const Color(0xFFd77d92);
  pickColor1 = const Color(0xFFcc4e60);
} else if (randomEmotion == 'calm') {
  pickColor = const Color(0xFF57a481);
  pickColor1 = const Color(0xFF426641);
} else if (randomEmotion == 'fear') {
  pickColor = const Color(0xFF8776a4);
  pickColor1 = const Color(0xFF564986);
}
このコードの問題と方向性は以下のように感じます.
  • 同じ役割を果たすコードを繰り返す
  • ・music_player_page.dart主な目的はプレーヤー画面を表示することであり、このファイルには特定部品の詳細設定が表示されており、ファイルの目的から若干距離がある
  • 音楽プレーヤーはホームページでも底が見え、底のバーの色も曲の感情によって変わる.したがって、上記の符号化は、他のソースファイルにおいても繰り返される可能性がある.また、現在放送されている曲は変更が必要です.そのため、歌の感情と対応する色は他のファイルで共有しなければならない.
    • 解決策は以下の通り.
  • 曲の感情や色も他のファイルで共有しなければならず、アプリケーションの特性上、様々なソースファイルで共有される可能性が高いため、グローバルに使用できるようにコードを個別のファイルに分離する.

    • 改善結果


    globals.dart


    これは感情色を分離するソースファイルです.
    class EmotionColor {
  static const HAPPY    = "HAPPY";
  static const SAD      = "SAD";
  static const ANGRY    = "ANGRY";
  static const CALM     = "CALM";
  static const FEAR     = "FEAR";
  static const DEFAULT  = "DEFAULT";

  static const _normalColorMap = {
    HAPPY:    const Color(0xFFd5b15c),
    SAD:      const Color(0xFF7fbad0),
    ANGRY:    const Color(0xFFd77881),
    CALM:     const Color(0xFF669f82),
    FEAR:     const Color(0xFF8481ac),
    DEFAULT:  Colors.white,
  };

  static const _lightColorMap = {
    HAPPY:    const Color(0xFFe8c075),
    SAD:      const Color(0xFFa5c3d7),
    ANGRY:    const Color(0xFFd77d92),
    CALM:     const Color(0xFF57a481),
    FEAR:     const Color(0xFF8776a4),
    DEFAULT:  Colors.white,
  };

  static const _darkColorMap = {
    HAPPY:    const Color(0xFFd57a47),
    SAD:      const Color(0xFF446199),
    ANGRY:    const Color(0xFFcc4e60),
    CALM:     const Color(0xFF426641),
    FEAR:     const Color(0xFF564986),
    DEFAULT:  Colors.white,
  };

  const EmotionColor._();

  static getNormalColorFor(String emotion) => _normalColorMap[emotion.toUpperCase()] ?? _normalColorMap[DEFAULT];
  static getLightColorFor(String emotion) => _lightColorMap[emotion.toUpperCase()] ?? _lightColorMap[DEFAULT];
  static getDarkColorFor(String emotion) => _darkColorMap[emotion.toUpperCase()] ?? _darkColorMap[DEFAULT];
}
  • 感情タイプを文字列として宣言し、関数呼び出し時に入力を受け付ける.
  • 使用する色の種類は、通常、明るい色、暗い色に分けられ、波の色を含む.

    • コールセクション

    if (randomEmotion == null || randomEmotion == "") {
  randomEmotion = "default";
}

EmotionColor.getNormalColorFor(randomEmotion),
    randomEmotion変数に文字列として認証タイプを入力し、関数を呼び出してパラメータとして渡す.

    改善すべき点


    羽毛ハブコミット結果リンク
  • 現在再生されている感情色が変更された場合、プレーヤー画面のドロップダウン画面の色変更はすぐには有効になりません.

    • 使用
  • なのでInheritedWidget変数を変化させてもすぐにUIに適用できるようにする必要があるのでクラスを生成しましたが、デフォルト値が設定されていないためエラーが発生します.デフォルト値を設定する方法を探しています.
    • class CurrentEmotion extends InheritedWidget {
  const CurrentEmotion({
    Key key,
    this.emotion,
    Widget child,
  }) : super(key: key, child: child);

  final String emotion;

  static CurrentEmotion of(BuildContext context) {
    final CurrentEmotion result = context.dependOnInheritedWidgetOfExactType<CurrentEmotion>();
    assert(result != null, 'No CurrentEmotion found in context');
    return result;
  }

  @override
  bool updateShouldNotify(CurrentEmotion old) => emotion != old.emotion;
}

    ヘルプリンク

  • Global Variables in Dart
  • Changing backgroundcolor depending on variable in flutter
  • InheritedWidget class - Flutter
    • CS 50におけるCS-ソートアルゴリズム
    BOJ 2096降格