flutter - 用 flutter 在黑暗模式下切换图像

标签 flutter dart darkmode

我想知道如何在暗模式和亮模式下实现切换图像。 我不想在应用程序上切换。只需在 iOS 或 Android 的设置中切换深色模式即可。

这里是灯光模式的示例代码。 我想知道如何更改或添加代码以将 logo.png 切换为 darkmode_logo.png。

*darkmode_logo.png 用于深色模式下的 Logo 。

V/r,

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(),
    );
  }
}

最佳答案

使用主题的 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,
)

关于flutter - 用 flutter 在黑暗模式下切换图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67781782/

相关文章:

flutter - 在 WebView 中禁用深色模式

android-studio - MIUI 11/12 主题切换导致 LifeCycleException、ClassCastException

flutter - 如何从一页转到另一页?

dart - 在这个例子中如何从互联网上获取数据?

flutter : Conditions must have a static type of 'bool'

flutter - 如何在 flutter 中屏幕记录特定的小部件?

javascript - 需要在操作系统中更改暗/亮模式以强制刷新外部 SVG 文件

flutter - Flutter中如何动态生成多个Dropdown?

http - 在 Dio for Flutter 中使用拦截器刷新 token

flutter - 如何检测 flutter 中的滑动