flutter - 如何在 Flutter 的 LinearGradient 中获取点的颜色

Question

假设我们有一个 LinearGradient在一个 200x200 的正方形中(查看源代码 here )。

我们如何获得点 (25, 25) 的颜色？

Answer 1

RenderRepaintBoundary解决方案

• 此解决方案从 RenderRepaintBoundary 中检索一个 Image (dart:ui) 并将其转换为另一种 Image 类型(来自图像包)，
• 然后我们通过Listener 小部件获取触摸小部件的相对坐标。
• 然后我们从图像包的 getPixel 方法中检索颜色。

确保运行 flutter pub add image，以获取包。

解决方案:

import 'dart:typed_data';

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:image/image.dart' as img;

import 'dart:ui' as ui show Image;

class GradientColorPicker extends StatefulWidget {
  const GradientColorPicker({Key? key, required this.gradientKey})
      : super(key: key);

  final GlobalKey gradientKey;

  @override
  State<GradientColorPicker> createState() => _GradientColorPickerState();
}

class _GradientColorPickerState extends State<GradientColorPicker> {

  Color? color;
  String? info;

  @override
  Widget build(BuildContext context) {

    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        RepaintBoundary(
          key: widget.gradientKey,
          child: Listener(
            onPointerMove: (event) async {
              // Get position touched
              int x = event.localPosition.dx.round();
              int y = event.localPosition.dy.round();

              // Create an ui.image from the RenderRepaintBoundary, which we
              // convert to another image format from the image-package.
              RenderRepaintBoundary boundary = widget.gradientKey.currentContext!
                  .findRenderObject()! as RenderRepaintBoundary;
              ui.Image image = await boundary.toImage();
              var byteData = await image.toByteData();
              Uint8List bytes = byteData!.buffer.asUint8List();
              img.Image imgImage = img.Image.fromBytes(200, 200, bytes);

              // Retrieve pixel information.
              int pixel = imgImage.getPixel(x, y); // Warning: #AABBGGRR
              pixel = abrgToARGB(pixel);

              setState(() {
                color = Color(pixel);
                info = "Color at ($x, $y) is $color";
              });
            },
            child: Container(
              width: 200,
              height: 200,
              decoration: const BoxDecoration(
                  gradient: LinearGradient(
                  colors: [Colors.black, Colors.white],
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight
              )
              ),
            ),
          ),
        ),

        if (color != null)
          ...[
            Text(info!),
            Container(
              width: 50,
              height: 50,
              color: color!,
            )
          ]

      ],
    );
  }

  // Function from: https://stackoverflow.com/a/42133405/3000503
  int abrgToARGB(int argbColor) {
    int r = (argbColor >> 16) & 0xFF;
    int b = argbColor & 0xFF;
    return (argbColor & 0xFF00FF00) | (b << 16) | r;
  }
}

// Some code to run the above example.
class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: GradientColorPicker(
            gradientKey: GlobalKey(),
          ),
        ),
      ),
    );
  }
}

void main() => runApp(const App());

也许有更聪明的方法来做到这一点，但它仍然有效。

PS:顺便说一句，您可能想对监听器坐标进行一些边界检查，因为它在某些情况下可能会超出 0-200 的范围。