如何在Flutter中实现图中用于亮度调节的选择器？

用到的核心Widget #

• Stack：用于叠放渐变背景层和滑动指示器层
• Container + BoxDecoration：实现带黑白线性渐变的选择器背景，以及带阴影的圆形滑块指示器
• GestureDetector/Slider：处理滑动交互，前者更适合自定义特殊交互样式，后者可以直接基于现有Slider组件改造外观，减少手势逻辑的编写
• 可选Text：用于实时展示当前亮度百分比数值
• 可选ColorFiltered：如果是调节App内元素的亮度，可以直接用该组件包裹目标元素实现亮度变化

亮度调节逻辑处理 #

1. 调节系统屏幕亮度 #

需要用到第三方库screen_brightness，逻辑步骤如下：

1. 在pubspec.yaml中引入依赖，执行flutter pub get安装
2. 页面初始化时调用ScreenBrightness().current获取当前系统亮度，作为选择器的初始值
3. 监听滑块的拖动事件，将滑块位置转换为0.0-1.0范围的亮度值，调用ScreenBrightness().setScreenBrightness(亮度值)实时更新系统亮度
4. 如果需要持久化用户设置的亮度值，可以将数值存入SharedPreferences，下次进入页面直接读取赋值即可

2. 调节App内局部元素亮度 #

不需要引入第三方库，直接用Flutter自带组件实现：

1. 用ColorFiltered包裹需要调节亮度的目标组件，配置如下：

ColorFiltered(
  colorFilter: ColorFilter.mode(
    Colors.white.withOpacity(brightnessValue), // brightnessValue范围0.0-1.0
    BlendMode.modulate,
  ),
  child: 你的目标组件,
)

2. 滑块拖动时实时更新brightnessValue的值，UI会自动刷新实现亮度调节效果

简化实现代码示例 #

double _brightness = 0.5; // 初始亮度50%

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: Container(
        width: 300,
        height: 60,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(30),
          gradient: const LinearGradient(
            colors: [Colors.black, Colors.white],
            begin: Alignment.centerLeft,
            end: Alignment.centerRight,
          ),
        ),
        child: Slider(
          value: _brightness,
          min: 0,
          max: 1,
          activeColor: Colors.transparent,
          inactiveColor: Colors.transparent,
          thumbColor: Colors.white,
          onChanged: (val) {
            setState(() {
              _brightness = val;
            });
            // 这里调用设置亮度的逻辑，比如更新系统亮度或者更新ColorFilter的opacity
          },
        ),
      ),
    ),
  );
}

内容的提问来源于stack exchange，提问作者Al-Hashimy