【Flutter】デフォルトテーマをダークモードに変更

今回はアプリのデフォルトテーマをダークモードに変更する方法を紹介します。

MaterialAppでデフォルトテーマをダークモードに指定できます。

\ 世界最大級のオンライン学習サービス /

目次

デフォルトをダークモードにする

MaterialApp(
  theme: ThemeData.dark(),
  home: Scaffold(
    appBar: AppBar(title: const Text('FlutterZero')),
    body: Center(
      child: Text(
        'Hello World',
        style: TextStyle(
          fontSize: 30,
        ),
      ),
    ),
  ),
);

MaterialAppのデフォルトテーマをダークモードにするにはthemeの引数にThemeData.darkを渡します。

するとテーマカラーは黒色になり、テキスト色は白色になります。

theme: ThemeData.dark()

theme: ThemeData.light()

サンプルコード

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark(),
      home: Scaffold(
        appBar: AppBar(title: const Text('FlutterZero')),
        body: Center(
          child: Text(
            'Hello World',
            style: TextStyle(
              fontSize: 30,
            ),
          ),
        ),
      ),
    );
  }
}

一緒に読みたい

参考

  • URLをコピーしました!
目次