Flutter夜间阅读模式插件night_reader的使用

Flutter夜间阅读模式插件night_reader的使用

特性

• 可以在子树中应用可控的夜间阅读效果。
• 在树中可以有多个实例，每个实例都有自己的夜间阅读效果颜色、动画和其他参数。

开始使用

首先导入该库：

import 'package:night_reader/night_reader.dart';

使用示例

应用到整个应用程序

为了使整个应用程序受到夜间阅读模式的影响，可以在MaterialApp周围包裹AnimatedNightReader并控制其value参数。下面是一个完整的示例：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return AnimatedNightReader(
      value: 1, // 控制夜间阅读模式的强度，范围为0到1
      duration: const Duration(seconds: 2), // 动画持续时间
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(primarySwatch: Colors.blue),
        home: MyHomePage(title: 'Flutter Demo Home Page'),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Text('这是一个示例页面'),
      ),
    );
  }
}

应用到特定子树

如果只想在某个子树上应用夜间阅读模式，可以在该子树中包裹AnimatedNightReader。下面是一个具体的例子：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo Home Page'),
      ),
      body: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            AnimatedNightReader(
              tint: Colors.blue, // 设置夜间阅读模式的颜色
              value: 0.8, // 控制夜间阅读模式的强度
              duration: const Duration(seconds: 2), // 动画持续时间
              child: Container(
                height: 300,
                width: 300,
                color: Colors.white,
                alignment: Alignment.center,
                child: const Text("Sub tree 1"), // 子树中的文本
              ),
            ),
            AnimatedNightReader(
              value: 0.5, // 控制夜间阅读模式的强度
              tint: Colors.red, // 设置夜间阅读模式的颜色
              duration: const Duration(seconds: 2), // 动画持续时间
              child: Container(
                height: 300,
                width: 300,
                color: Colors.white,
                alignment: Alignment.center,
                child: const Text("Sub tree 2"), // 子树中的文本
              ),
            ),
          ],
        ),
      ),
    );
  }
}