a11y in flutter canvas

main.dart

// The implementation is based on https://developers.cyberagent.co.jp/blog/archives/36573/

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  // Auto-enable accessibility for our Blind and Low Vision customers.
  // RendererBinding.instance.accessibilityFeatures

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const CustomPaint(
      painter: _HelloTextPainter(),
    );
  }
}

class _HelloTextPainter extends CustomPainter {
  const _HelloTextPainter();

  static const _horizontalMargin = 16.0;

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..color = Colors.red;
    final text = TextPainter(
      textDirection: TextDirection.ltr,
      text: const TextSpan(
        style: TextStyle(
          color: Colors.white,
        ),
        text: 'Hello',
      ),
    )..layout();

    // [canvas] に赤い長方形を描画
    canvas.drawRect(
      Rect.fromLTWH(0, 0, text.width + _horizontalMargin * 2, text.height),
      paint,
    );

    // [canvas] に白文字の'Hello'を描画
    text.paint(canvas, const Offset(_horizontalMargin, 0));
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }

  @override
  SemanticsBuilderCallback get semanticsBuilder {
    return (Size size) {
      final rect = Rect.fromLTWH(0, 0, size.width, size.height);

      return [
        CustomPainterSemantics(
          rect: rect,
          properties: const SemanticsProperties(
            label: '赤い背景の上にハロー',
            textDirection: TextDirection.ltr,
            button: true,
          ),
        )
      ];
    };
  }
}