🔥

Flutter アプリ画面の明るさ調整💡

2023/05/23に公開

Android

初めに

QRコードや２次元バーコードを表示するアプリの画面などで、表示中の画面だけスクリーンの輝度（明るさ）を上げたい、、が意外と記事にされていなかったり、ライブラリの紹介だけで終わっていたりと参考にできるものが少なかったので備忘録に🫠。

使用したライブラリ

作業内容

今回は画面表示時に画面の輝度（明るさ）を最大にし、画面を離れるときに元に戻したいので、screen_brightnessから以下の2つのメソッドを使用。

main.dart

// setBrightnessはスクリーンの輝度を最小0.0 ~ 最大1.0の範囲で調整できる
Future<void> setBrightness(double brightness) async {
  try {
    await ScreenBrightness().setScreenBrightness(brightness);
  } catch (e) {
    print(e);
    throw 'Failed to set brightness';
  }
}

main.dart

// resetBrightnessはsetBrightnessで変更した輝度を元に戻す
Future<void> resetBrightness() async {
  try {
    await ScreenBrightness().resetScreenBrightness();
  } catch (e) {
    print(e);
    throw 'Failed to reset brightness';
  }
}

「対象の画面だけ輝度を上げる＆画面離れる時に戻す」を実現するために、ライフサイクルってなんだっけ..?とか、対象の画面表示中のような状態をwatchする処理を書かなくてはいけない..?と思ったりしたが、useEffectを使って「初回ビルドのみ実行させたい処理」と「dispose（Widgetが破棄）された時に実行させたい処理」に上記のメソッドを指定してあげればいけそう👀

ただ、どちらもFutureクラスなので非同期関数をuseEffectに設定するとエラーになる問題にぶつかった。

上記の記事の通り、「useEffectの第1引数の関数の戻り値にはクリーンアップ関数を設定する必要がある」ため、以下のようにuseEffectの中でfutureの処理を待つようにして実装。

main.dart

    useEffect(
      () {
        // 画面表示時、本体設定に干渉せずにスクリーンの輝度を最大（1.0）にする
        Future(() async {
          await setBrightness(1);
        });
        return () => {
              // 画面から離れる時、スクリーンの明るさを本体設定の輝度に戻す
              Future(() async {
                await resetBrightness();
              })
            };
      },
      const [],
    );

注意点

エミュレータではcurrentBrightness()で本体に設定している輝度を取得したりすることはできるが、setBrightness()などで明るさを調整することはできないため、実機でデバッグが必要。
（特に不都合はないと思うが）今回使用しているscreen_brightnessは、本体に設定している輝度には干渉しないので「OSの設定に直接変更を加えている」わけではない様子。（多分）
iOSについては、resetする際にAuto resetを使用して対応する必要がありそう。（筆者はこれから確認します）

比較

ほかにも、device_display_brightnessやscreenなど似たライブラリがあるが、ほぼ更新がされていないようです。且つ、本体の輝度設定に直接干渉するようなので、OS別に対応が必要そう?なので少々ステップが増えるようです。

https://pub.dev/packages/screen/example

まとめ

今回いろいろ考えすぎてしまった感もあるが、ライフサイクルってなに?やfutureってどう使えば良いんだっけ?を解消しながら進めたので良い学びになりました。
最初、future builderで現在の輝度を取得して~とか考えていた頃と比べると、だいぶ知見が増えたかと。
実際にスクリーンの明るくなった時はちょっと感動しました。

初めに

使用したライブラリ

作業内容

注意点

比較

まとめ

Discussion