Change Mouse Cursor

Der Mauszeiger soll sich ändern, sobald er über dem Container schwebt. Nach einem Klick, soll der Container den Fokus erhalten. Der Container soll das über eine grüne Füllung zeigen.

Ausführung

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: ExampleWidget(),
      ),
    );
  }
}

class ExampleWidget extends StatefulWidget {
  const ExampleWidget({super.key});

  @override
  State createState() => _ExampleWidgetState();
}

class _ExampleWidgetState extends State<ExampleWidget> {
  Color _color = Colors.transparent;

  void _fillWith(Color color) {
    setState(() => _color = color);
  }

  final _focusNode = FocusNode();

  @override
  Widget build(BuildContext context) {
    return MouseRegion( // #1
      cursor: SystemMouseCursors.click,
      // Request focus when clicked
      child: GestureDetector(
        onTap: () {
          FocusScope.of(context).requestFocus(_focusNode); // #2
        },
        child: Focus(
          focusNode: _focusNode,
          onFocusChange: (focus) => _fillWith(focus ? Colors.green : Colors.transparent),
          child: Container(
            width: 300,
            height: 100,
            decoration: BoxDecoration(
              color: _color,
              border: Border.all(
                color: Colors.black,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Anmerkungen:

1. Die Größe von MouseRegion ist die Größe seines Childs, bzw. dessen Child usw.

2. FocusScope.of(context) ist Focus.of(context) ähnlich, sucht aber zusätzlich bei seinen Abkömmlingen nach einem Fokusbereich.