如何在Flutter中根据操作系统为应用设置不同主题？

哥们，你说的这个情况太常见了！确实在主题还没应用的时候，Theme.of(context).platform根本拿不到正确的平台信息——毕竟主题都还没初始化呢。不过别担心，我们有两种靠谱的办法能在应用主题前检测到当前操作系统：

方法一：使用dart:io的Platform类（移动端/桌面端首选） #

Dart自带的dart:io库提供了直接读取操作系统信息的能力，完全不需要依赖上下文或主题，非常适合在应用启动阶段判断平台。

步骤： #

1. 首先导入dart:io库：

import 'dart:io';

2. 直接通过Platform的属性判断系统：
   • Platform.isIOS：检测是否为iOS系统
   • Platform.isAndroid：检测是否为Android系统
   • 还有Platform.isWindows、Platform.isMacOS、Platform.isLinux等属性覆盖其他桌面平台

完整代码示例： #

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

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

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

  @override
  Widget build(BuildContext context) {
    // 提前检测操作系统
    final isIOS = Platform.isIOS;

    return MaterialApp(
      title: '平台专属主题',
      // 根据系统切换主题
      theme: isIOS
          ? ThemeData(
              primarySwatch: Colors.blue,
              // 配置贴近iOS风格的细节
              cupertinoOverrideTheme: const CupertinoThemeData(
                primaryColor: Colors.blue,
              ),
              visualDensity: VisualDensity.adaptivePlatformDensity,
            )
          : ThemeData(
              primarySwatch: Colors.green,
              // 配置Android风格的导航栏
              appBarTheme: const AppBarTheme(
                backgroundColor: Colors.green,
                elevation: 4,
              ),
            ),
      home: const HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('主题测试')),
      body: Center(
        child: Text(
          Platform.isIOS ? '当前系统：iOS' : '当前系统：Android',
          style: Theme.of(context).textTheme.headlineMedium,
        ),
      ),
    );
  }
}

方法二：使用defaultTargetPlatform（全平台兼容，包括Web） #

如果你的应用需要支持Web平台，dart:io的Platform类就不适用了（Web环境无法访问io库）。这时候可以用Flutter提供的defaultTargetPlatform，它能自动适配所有运行环境。

步骤： #

1. 导入foundation.dart库：

import 'package:flutter/foundation.dart';

2. 通过defaultTargetPlatform判断目标平台：

final targetPlatform = defaultTargetPlatform;
if (targetPlatform == TargetPlatform.iOS) {
  // 应用iOS主题
} else if (targetPlatform == TargetPlatform.android) {
  // 应用Android主题
}

适配Web的代码示例： #

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

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

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

  @override
  Widget build(BuildContext context) {
    final targetPlatform = defaultTargetPlatform;

    ThemeData getTheme() {
      switch (targetPlatform) {
        case TargetPlatform.iOS:
          return ThemeData(
            primarySwatch: Colors.blue,
            cupertinoOverrideTheme: const CupertinoThemeData(primaryColor: Colors.blue),
          );
        case TargetPlatform.android:
          return ThemeData(
            primarySwatch: Colors.green,
            appBarTheme: const AppBarTheme(backgroundColor: Colors.green),
          );
        default:
          // 为其他平台设置默认主题
          return ThemeData(primarySwatch: Colors.grey);
      }
    }

    return MaterialApp(
      title: '全平台主题适配',
      theme: getTheme(),
      home: const HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('全平台测试')),
      body: Center(
        child: Text(
          '当前平台：${defaultTargetPlatform.toString().split('.').last}',
          style: Theme.of(context).textTheme.headlineMedium,
        ),
      ),
    );
  }
}

总结 #

• 如果你只做移动端或桌面端，选Platform类更直接高效；
• 如果需要支持Web，一定要用defaultTargetPlatform；
• 两种方法都能在MaterialApp初始化主题前完成检测，完美解决你遇到的问题！

内容的提问来源于stack exchange，提问作者leodriesch