Actions Widget and Attributes

Actions Widget and Attributes

ยท

2 min read

In the dynamic realm of Flutter, user interactivity is a cornerstone for creating engaging and responsive applications. One of the powerful tools at a Flutter developer's disposal is the Actions widget. In this blog post, we will delve into the Actions widget, unravel its attributes, and provide a practical example to showcase its capabilities.

Actions Widget in Flutter

The Actions widget empowers developers to define and execute custom actions within their Flutter applications. Whether it's triggering specific operations or navigating to another screen, Actions provide a structured way to manage and execute actions based on user interactions.

Attributes of Actions Widget:

  1. actions: This attribute takes a map of action names to IntentAction objects. Each IntentAction defines the behavior of a specific action.

  2. child: The widget subtree where the actions are applicable. The specified actions will be available within the context of this subtree.

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Shortcuts Widget Example'),
        ),
        body: Center(
          child: Shortcuts(
            shortcuts: {
              LogicalKeySet(LogicalKeyboardKey.control, LogicalKeyboardKey.keyS): CustomIntent(),
            },
            child: MyWidget(),
          ),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        // Simulate the shortcut action when the button is pressed
        Shortcuts.of(context)!.handleShortcuts(CustomIntent());
      },
      child: Text('Press Ctrl + S'),
    );
  }
}

class CustomIntent extends Intent {
  const CustomIntent();
}

class CustomAction extends IntentAction {
  @override
  Future<void> invoke(covariant Intent intent) async {
    // Define the behavior of the custom action
    print('Custom Intent Action Invoked!');
  }
}

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

In this example:

  • We create a Flutter app with an AppBar and a Center widget hosting a custom MyWidget.

  • Inside MyWidget, we use the Actions widget to define a custom action named 'CustomAction' associated with an IconButton.

  • When the IconButton is pressed, the custom action ('customAction') is invoked using Actions.invoke.

  • The CustomAction class extends IntentAction and defines the behavior of the custom action, in this case, printing "Custom Action Invoked!" to the console.

Running this code should result in the "Custom Action Invoked!" message being printed to the console when the IconButton is pressed. The Actions widget provides a structured way to manage and execute custom actions within your Flutter application.

Did you find this article valuable?

Support Vinit Mepani (Flutter Developer) by becoming a sponsor. Any amount is appreciated!

ย