Flutter 〜ダークモードの設定〜

ダークモード

MaterialAppウィジェットのdarkThemeパラメータを使ってアプリにダークテーマを指定する。
　

前半部分

mainでプログラムを実行する。

import 'package:flutter/material.dart';

// メイン関数。アプリケーションのエントリーポイント。
void main() {
  runApp(const MyApp()); // MyApp ウィジェットを起動。
}

メイン部分

darkThemeの指定をする。

// アプリケーションのルートウィジェットを定義する StatelessWidget クラス。
class MyApp extends StatelessWidget {
  //コンストラクタ。キーを省略可能にする
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    // MaterialApp ウィジェットを構築し、アプリの基本設定を行う。
    return MaterialApp(
      title: 'Flutter Demo', // アプリのタイトルを設定。
      darkTheme: ThemeData(
        // ダークテーマの定義。
        brightness: Brightness.dark, // テーマの明るさをダークに設定。
        colorScheme: ColorScheme.dark(
          primary: Colors.deepPurple, // ダークテーマのプライマリカラーを紫に設定。
        ),
      ),
      home:
          const MyHomePage(title: 'Flutter Demo Home Page'), // ホーム画面のウィジェットを指定。
    );
  }
}

画面描画部分

// ホームページを表す StatelessWidget。
class MyHomePage extends StatelessWidget {
  final String title; // ページのタイトルを格納する変数。

  // コンストラクタ。タイトルを必須引数として受け取る。
  const MyHomePage({super.key, required this.title});

  @override
  Widget build(BuildContext context) {
    // Scaffold ウィジェットを使用して、基本的なビジュアルレイアウト構造を提供します。
    return Scaffold(
      appBar: AppBar(
        title: Text(title), // アプリバーにページタイトルを表示。
      ),
      body: Center(
        child: Text('Welcome to $title'), // ボディの中央にテキストウィジェットを配置。
      ),
    );
  }
}

全部を繋げる

こうなる。

import 'package:flutter/material.dart';

// メイン関数。アプリケーションのエントリーポイント。
void main() {
  runApp(const MyApp()); // MyApp ウィジェットを起動。
}

// アプリケーションのルートウィジェットを定義する StatelessWidget クラス。
class MyApp extends StatelessWidget {
  //コンストラクタ。キーを省略可能にする
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    // MaterialApp ウィジェットを構築し、アプリの基本設定を行う。
    return MaterialApp(
      title: 'Flutter Demo', // アプリのタイトルを設定。

      darkTheme: ThemeData(
        // ダークテーマの定義。
        brightness: Brightness.dark, // テーマの明るさをダークに設定。
        colorScheme: ColorScheme.dark(
          primary: Colors.deepPurple, // ダークテーマのプライマリカラーを紫に設定。
        ),
      ),
      home:
          const MyHomePage(title: 'Flutter Demo Home Page'), // ホーム画面のウィジェットを指定。
    );
  }
}

// ホームページを表す StatelessWidget。
class MyHomePage extends StatelessWidget {
  final String title; // ページのタイトルを格納する変数。

  // コンストラクタ。タイトルを必須引数として受け取る。
  const MyHomePage({super.key, required this.title});

  @override
  Widget build(BuildContext context) {
    // Scaffold ウィジェットを使用して、基本的なビジュアルレイアウト構造を提供します。
    return Scaffold(
      appBar: AppBar(
        title: Text(title), // アプリバーにページタイトルを表示。
      ),
      body: Center(
        child: Text('Welcome to $title'), // ボディの中央にテキストウィジェットを配置。
      ),
    );
  }
}