【Flutter】デバイスのテーマを取得する

Flutterでデバイスのテーマを取得したい！

概要

今回の記事では、Flutterでデバイスのテーマを取得してライトテーマかダークテーマかを判定する手順を掲載する。

仕様書

環境

Android Studio Giraffe | 2023.2.1 Patch 2
Flutter 3.19.6

手順書

ウェジェットが読み込まれた時にデバイスのテーマを取得して、TEXTにダークテーマかライトテーマか表示する例。

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: const GetDeviceThemeSample1()
      )
    )
  );
}

class GetDeviceThemeSample1 extends StatelessWidget {
  const GetDeviceThemeSample1({super.key});

  @override
  Widget build(BuildContext context) {
    var platformBrightness = MediaQuery.platformBrightnessOf(context);

    return SafeArea(
        child: Center(
          child: Text(
            platformBrightness == Brightness.dark ? "Dark Theme" : "Light Theme",
            style: const TextStyle(color: Color(0xFF000000)),
          ),
      ),
    );
  }
}

MediaQuery.platformBrightnessOf(context)でデバイスのテーマを取得してる。
戻り値をBrightness.darkと比較するとダークテーマなのか、Brightness.lightと比較するとライトテーマなのか判定できる。

まとめ（感想文）

テーマには対応しておきたいと思う今日この頃。