使用Flutter在暗模式下切换图片

Question

我想知道如何在暗模式和亮模式之间切换图片。 我不想在应用程序中添加切换按钮，只需在iOS或Android的设置中切换到暗模式即可。

以下是亮模式的示例代码。我想知道如何更改或添加代码以切换logo.png到darkmode_logo.png。

* darkmode_logo.png 用于暗模式下的标志。

敬礼，

import 'package:flutter/material.dart';

class TopPage extends StatefulWidget {
  const TopPage({Key key}) : super(key: key);

  @override
  _TopPageState createState() => _TopPageState();
}

class _TopPageState extends State<TopPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Theme.of(context).backgroundColor,
      drawer: SlideMenu(),
      appBar: AppBar(
        centerTitle: true,
        title: Image.asset(
          'assets/images/header_icn/logo.png',
          fit: BoxFit.cover,
        ),
      ),
      body: Container(),
    );
  }
}

- Masaya

Answer 1

使用主题的 Brightness 属性检查主题模式。

final isDarkMode = Theme.of(context).brightness == Brightness.dark;

然后使用 isDarkMode 更改图像。

Image.asset(
  isDarkMode
      ? 'assets/images/header_icn/darkmode_logo.png'
      : 'assets/images/header_icn/logo.png',
  fit: BoxFit.cover,
)

- NirmalCode

---

无论我在模拟器的显示设置中将主题更改为暗色，它总是显示错误的信息。 - Chirag Bargoojar

模拟器主题没有按照应有的方式变为暗色。请在真实设备上尝试一下。 - NirmalCode