FocusableActionDetector widget and Attributes

In the vast realm of Flutter widgets, the FocusableActionDetector widget stands out as a versatile tool for handling user interactions with a focusable region. This widget combines the capabilities of focus and actions, making it a valuable asset in creating interactive and accessible user interfaces. In this blog post, we will explore the FocusableActionDetector widget, its attributes, and provide a comprehensive example to showcase its functionality.

FocusableActionDetector Widget in Flutter

The FocusableActionDetector widget serves as a bridge between the focus and action systems in Flutter. It allows developers to define regions of their user interface that can receive focus and trigger specific actions when interacted with. This is particularly useful for creating interactive components that respond to both keyboard and touch inputs.

Attributes of FocusableActionDetector Widget:

1. onShowFocusHighlight: A callback function triggered when the focusable region is highlighted. Developers can use this callback to update the UI or perform actions when the region gains focus.

2. onHideFocusHighlight: A callback function triggered when the focusable region loses focus and the highlight is removed. This is an opportunity to update the UI or perform actions when the focus is no longer on the region.

3. `onFocusChange:** A callback function that provides information about the focus change. Developers can use this callback to perform specific actions or updates when the focus changes.

4. shortcuts: A map of key combinations to Intent actions. This attribute allows developers to define keyboard shortcuts for triggering specific actions within the focusable region.

Full Example of FocusableActionDetector Widget:

Let's delve into a detailed example where we create a Flutter app with a FocusableActionDetector. In this scenario, we'll define a focusable region that changes color when focused and prints a message when activated, either by clicking or using a keyboard shortcut.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  FocusNode _focusNode = FocusNode();

  @override
  void dispose() {
    _focusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FocusableActionDetector Example'),
      ),
      body: Center(
        child: FocusableActionDetector(
          focusNode: _focusNode,
          actions: <Type, Action<Intent>>{
            ActivateIntent: CallbackAction<ActivateIntent>(
              onInvoke: (ActivateIntent intent) {
                // Handle the activation action (e.g., Enter key press)
                print('Widget activated!');
              },
            ),
          },
          child: Container(
            width: 200,
            height: 100,
            color: Colors.blue,
            child: Center(
              child: Text(
                'Focusable Widget',
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

The FocusableActionDetector widget in Flutter is useful for creating interactive widgets that respond to keyboard and mouse actions. It allows you to define custom actions and attach them to focusable widgets. Here's an example:

dartCopy codeimport 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  FocusNode _focusNode = FocusNode();

  @override
  void dispose() {
    _focusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FocusableActionDetector Example'),
      ),
      body: Center(
        child: FocusableActionDetector(
          focusNode: _focusNode,
          actions: <Type, Action<Intent>>{
            ActivateIntent: CallbackAction<ActivateIntent>(
              onInvoke: (ActivateIntent intent) {
                // Handle the activation action (e.g., Enter key press)
                print('Widget activated!');
              },
            ),
          },
          child: Container(
            width: 200,
            height: 100,
            color: Colors.blue,
            child: Center(
              child: Text(
                'Focusable Widget',
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

In this example:

• We create a FocusNode to manage the focus state of the FocusableActionDetector.

• The FocusableActionDetector widget is used with a child Container that represents a focusable widget.

• An actions map is provided to associate the ActivateIntent (typically triggered by keyboard Enter key) with a callback function. In this case, it prints a message when the widget is activated.

• The FocusableActionDetector widget allows you to attach custom actions to respond to various user inputs.

Please note that this example is a basic illustration, and you can customize it according to your specific requirements. Ensure to check the Flutter documentation for any updates or additional details related to the FocusableActionDetector widget.