Flutter 实现整个App变为灰色

19 min read

要将整个 Flutter App 变为灰色，可以使用 Flutter 的颜色滤镜功能来实现。以下是一个简单的实现方法：

  1. 创建一个新的 Flutter 项目。

  2. 在 lib 文件夹下的任意一个 Dart 文件中添加以下代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorFilter: ColorFilter.mode(Colors.grey, BlendMode.saturation), // 设置颜色滤镜
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Grayscale App'),
      ),
      body: Center(
        child: Text(
          'Hello, World!',
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}
  1. 运行该 Flutter App，你会发现整个应用程序都变为灰色。

在这个例子中，我们使用 ThemeData 的 colorFilter 属性来应用颜色滤镜。ColorFilter.mode 方法允许我们将滤镜颜色和混合模式传递给滤镜。在这里，我们将 Colors.grey 设置为滤镜颜色，并将 BlendMode.saturation 设置为混合模式，这样就会将整个 App 变为灰度图像。

你还可以根据需要修改颜色滤镜的颜色和混合模式以实现其他效果。