Flutter判断当前是否为暗色模式插件flutter_is_dark_color_hsp的使用

本插件帮助确定颜色是否为深色调或浅色调。它基于HSP色彩模型，你可以在这里了解更多关于HSP的信息。

演示图

安装

在你的pubspec.yaml文件中包含flutter_is_dark_color_hsp依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_is_dark_color_hsp: ^版本号

使用与示例

要使用此插件，只需将其导入到你的文件中并开始使用。

import 'package:flutter_is_dark_color_hsp/flutter_is_dark_color_hsp.dart';

...

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.all(Radius.circular(20)),
    color: _color
  ),
  width: MediaQuery.of(context).size.width * 0.6,
  height: 100,
  child: Center(
    child: Text(
      'Hello World',
      style: TextStyle(
        color: isDarkHsp(_color)? Colors.white: Colors.black,
        fontSize: 32
      ),
    ),
  ),
)

...

你可以使用isDarkHsp方法来确定颜色是否为深色调，或者使用isLightHsp方法来确定颜色是否为浅色调。



## 示例代码

以下是完整的示例代码，展示了如何使用`flutter_is_dark_color_hsp`插件来判断当前颜色是否为暗色模式。

```dart
import 'dart:math';

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

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

class MyApp extends StatelessWidget {
  // 这个小部件是你应用的根节点。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

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

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Color _color = Colors.blue;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter is Dark HSP Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(20)),
                color: _color
              ),
              width: MediaQuery.of(context).size.width * 0.6,
              height: 100,
              child: Center(
                child: Text(
                  'Hello World',
                  style: TextStyle(
                    color: isDarkHsp(_color)? Colors.white: Colors.black,
                    fontSize: 32
                  ),
                ),
              ),
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _generateRandomColor,
        tooltip: 'Random Color',
        child: Icon(Icons.shuffle),
      ),
    );
  }

  void _generateRandomColor() {
    Random _random = Random();
    setState(() {
      _color = Color.fromARGB(255, _random.nextInt(255), _random.nextInt(255), _random.nextInt(255));
    });
  }
}

更多关于Flutter判断当前是否为暗色模式插件flutter_is_dark_color_hsp的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

caililin 1楼

更多关于Flutter判断当前是否为暗色模式插件flutter_is_dark_color_hsp的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

在Flutter中，你可以使用flutter_is_dark_color_hsp插件来判断当前系统是否处于暗色模式。以下是如何使用此插件的一个示例代码。

首先，确保你已经在pubspec.yaml文件中添加了flutter_is_dark_color_hsp依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_is_dark_color_hsp: ^最新版本号  # 请替换为实际的最新版本号

然后，运行flutter pub get来安装依赖。

接下来，你可以在你的Flutter应用中导入并使用这个插件。以下是一个完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Dark Mode Check',
      theme: ThemeData(
        brightness: Brightness.light,
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool? isDarkMode;

  @override
  void initState() {
    super.initState();
    _checkDarkMode();
  }

  Future<void> _checkDarkMode() async {
    bool darkMode = await FlutterIsDarkColorHsp.isDarkMode;
    setState(() {
      isDarkMode = darkMode;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dark Mode Checker'),
      ),
      body: Center(
        child: Text(
          'Is Dark Mode: ${isDarkMode ?? "Checking..."}',
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

在这个示例中，我们做了以下几步：

添加依赖：在pubspec.yaml文件中添加flutter_is_dark_color_hsp依赖。
导入插件：在代码文件中导入flutter_is_dark_color_hsp。
检查暗色模式：在initState方法中调用FlutterIsDarkColorHsp.isDarkMode方法来异步检查当前系统是否处于暗色模式。
显示结果：使用Text组件显示当前是否为暗色模式的结果。

请注意，FlutterIsDarkColorHsp.isDarkMode方法返回一个Future<bool>，因此我们使用await关键字来等待其结果，并在获取结果后调用setState来更新UI。