Flutter 系列之系统主题模式同步

心安事随

发布于 2024-11-07 08:05:13

31600

代码可运行

文章被收录于专栏：前端大合集前端大合集

运行总次数：0

代码可运行

1. 项目准备

创建一个flutter项目

flutter create 'project-name'

启动项目

flutter run

2. 搭建基本页面

我们首先将lib下面的main.dart中的内容清除. 然后搭建好基础页面

import 'package:flutter/material.dart';


void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter 主题示例',
      home: HomePage(),
      debugShowCheckedModeBanner: true, // 模拟器右上角显示debug标识
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
     
      appBar: AppBar(
        title: const Text('系统主题切换示例'),
      ),
      body: const Center(
        child: Text(
          '当前系统主题模式',
        ),
      ),
    );
  }
}

3. 了解MaterialApp类中的themeMode

3.1 themeMode介绍

MaterialApp 类中的 themeMode 属性用于控制 Flutter 应用程序在浅色模式和深色模式之间的切换方式。它决定应用程序是使用浅色主题、深色主题还是根据系统的主题设置自动切换。

/// Describes which theme will be used by [MaterialApp]. -> 描述 [MaterialApp] 将使用哪种主题。
enum ThemeMode {
  /// Use either the light or dark theme based on what the user has selected in
  /// the system settings.
  //  根据用户在系统设置中选择的内容使用浅色或深色主题。
  system,

  /// Always use the light mode regardless of system preference.
  // 始终使用浅色模式，而不考虑系统偏好。
  light,

  /// Always use the dark mode (if available) regardless of system preference.
  
  // 始终使用深色模式（如果可用），而不考虑系统偏好。
  dark,
}

themeMode 是一个枚举类型的属性，支持以下三种模式：

ThemeMode.light：强制应用使用浅色模式，无论系统主题是浅色还是深色。
ThemeMode.dark：强制应用使用深色模式，无论系统主题是浅色还是深色。
ThemeMode.system（默认值）：应用会根据用户设备的系统主题设置自动切换（浅色或深色模式）。

3.2 `theme` 和 `darkTheme` 的作用：

theme：用于定义应用的浅色模式下的主题。无论系统是否使用浅色模式，只要 themeMode 为 ThemeMode.light 或 ThemeMode.system（并且系统是浅色模式），应用就会使用这个主题。
darkTheme：用于定义应用的深色模式下的主题。当 themeMode 设置为 ThemeMode.dark 或 ThemeMode.system（并且系统是深色模式）时，应用会使用这个主题。

3.3 `theme` 和 `darkTheme` 的关系：

theme 和 darkTheme 通常是两套不同的主题配置。例如，在浅色模式下，应用的背景、文本、按钮颜色可能是浅色调的；而在深色模式下，应用会使用较深的颜色以适应用户的偏好和视觉体验。
如果只定义了 theme 而没有定义 darkTheme，即使系统处于深色模式，应用仍然会使用浅色模式的主题（theme）。

4. 实践

定义一个theme文件夹,新建theme.dart文件, 因为两者都是ThemeData类型, 所以我们定义两套主题大多数实例都会ThemeData设置以下两个属性的值。这些属性会影响整个应用。

colorScheme定义颜色。
textTheme定义文本样式。

import 'package:flutter/material.dart';

ThemeData lightMode = ThemeData(
  brightness: Brightness.light,
  colorScheme: ColorScheme.light(
    surface: Colors.grey.shade200,
    primary: Colors.grey.shade300,
    secondary: Colors.grey.shade200,
  ),
);

ThemeData darkMode = ThemeData(
  brightness: Brightness.dark,
  colorScheme: ColorScheme.dark(
    surface: Colors.grey.shade900,
    primary: Colors.grey.shade800,
    secondary: Colors.grey.shade700,
  ),
);

接着我们去main.dart文件去应用我们定义好的主题色.

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter 主题示例',
      theme: lightMode, // 浅色模式
      darkTheme: darkMode, // 深色模式
      themeMode: ThemeMode.system, // 根据系统主题自动切换
      home: const HomePage(),
    );
  }
}

然后在widget里面去使用颜色.

   Widget build(BuildContext context) {
    // 获取当前主题的背景色和主色
    Color backgroundColor = Theme.of(context).colorScheme.surface;
    Color primaryColor = Theme.of(context).colorScheme.primary;

    return Scaffold(
      backgroundColor: backgroundColor,
      appBar: AppBar(
        title: const Text('系统主题切换示例'),
        backgroundColor: primaryColor,
      ),
      body: Center(
        child: Text(
          '当前系统主题模式: ${Theme.of(context).brightness == Brightness.dark ? "深色模式" : "浅色模式"}',
        ),
      ),
    );
  }