Semantics Widget – Flutter Widget Guide By Flutter Agency

• Flutter Widget Guide

This article is an introduction to the Semantics Widget and shows how important and interesting it might be for your Flutter Mobile  Application to take Semantics Widget into consideration.

Let’s Jump into it.

What is Semantics Widget in Flutter?

Semantics Widget is a widget that annotates the widget tree with a description of the meaning of the widgets used by accessibility tools, search engines, and other semantic analysis software to determine the meaning of the application.

It is used by accessibility tools, search engines, and other semantic analysis software to determine the meaning of the application.

The default constructor of it will look like below:

Semantics({
  Key? key,
  Widget? child,
  bool container = false,
  bool explicitChildNodes = false,
  bool excludeSemantics = false,
  bool blockUserActions = false,
  bool? enabled,
  bool? checked,
  bool? mixed,
  bool? selected,
  bool? toggled,
  bool? button,
  bool? slider,
  bool? keyboardKey,
  bool? link,
  bool? header,
  bool? textField,
  bool? readOnly,
  bool? focusable,
  bool? focused,
  bool? inMutuallyExclusiveGroup,
  bool? obscured,
  bool? multiline,
  bool? scopesRoute,
  bool? namesRoute,
  bool? hidden,
  bool? image,
  bool? liveRegion,
  bool? expanded,
  int? maxValueLength,
  int? currentValueLength,
  String? identifier,
  String? label,
  AttributedString? attributedLabel,
  String? value,
  AttributedString? attributedValue,
  String? increasedValue,
  AttributedString? attributedIncreasedValue,
  String? decreasedValue,
  AttributedString? attributedDecreasedValue,
  String? hint,
  AttributedString? attributedHint,
  String? tooltip,
  String? onTapHint,
  String? onLongPressHint,
  TextDirection? textDirection,
  SemanticsSortKey? sortKey,
  SemanticsTag? tagForChildren,
  void Function()? onTap,
  void Function()? onLongPress,
  void Function()? onScrollLeft,
  void Function()? onScrollRight,
  void Function()? onScrollUp,
  void Function()? onScrollDown,
  void Function()? onIncrease,
  void Function()? onDecrease,
  void Function()? onCopy,
  void Function()? onCut,
  void Function()? onPaste,
  void Function()? onDismiss,
  void Function(bool)? onMoveCursorForwardByCharacter,
  void Function(bool)? onMoveCursorBackwardByCharacter,
  void Function(TextSelection)? onSetSelection,
  void Function(String)? onSetText,
  void Function()? onDidGainAccessibilityFocus,
  void Function()? onDidLoseAccessibilityFocus,
  Map<customSemanticsAction, void Function()>? customSemanticsActions,
})

In this constructor, all fields marked with @required must not be empty.

Properties:

• Key key: This attribute is used to define how one widget should replace another widget in a tree.
• Widget child: This attribute is used to define the widget below this widget in the tree. This widget can only have one child. To layout multiple children, let this widget’s child be a widget such as Row Widget, Column Widget, or Stack Widget, which have a children’s property, and then provide the children to that widget.
• bool container: If the container has a true value this widget will introduce a new node in a semantic value.
• bool excludeSemantics: This attribute will define whether to replace all child semantics with this node or not. It will have the default value false.
• bool explicitChildNodes: This attribute specifies whether descendants of this widget are allowed to add semantic information to the SemanticsNode annotated by this widget. When set to false descendants are allowed to annotate SemanticsNodes of their parent with the semantic information they want to contribute to the semantic tree. When set to true the only way for descendants to contribute semantic information to the semantic tree is to introduce new explicit SemanticsNodes to the tree.
• SemanticsProperties:  This attribute contains properties used by assistive technologies to make the application more accessible. The properties of this class are used to generate a SemanticsNodes in the semantics tree. A list of all available properties can be read from SemanticsProperties.

What is the purpose of Semantics Widget in a Flutter?

When Flutter Mobile application hot reloads every time Flutter renders tree it also widgets tree, it also maintains a second tree, called Semantics Tree which is used by the Mobile Device assistive technology.

Each node of this Semantics tree is a SemanticsNode which might correspond to one or to a group of Widgets.

Each SemanticsNode is linked to a SemanticsConfiguration, a series of properties that tell the Mobile Device assistive technology.

How to use Semantics Widget in Flutter?

Semantics(
        label: 'Counter button',
        hint: 'Press to increase',
        value: '$_counter',
        excludeSemantics: true,
        child: Text(
          '$_counter',
          style: Theme.of(context).textTheme.displayLarge,
        ),
      ),

Conclusion

In this article, we have been through What is Semantics Widget in Flutter along with how it is important in Flutter Mobile Application.

Keep Learning !!!
Keep Fluttering.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Written by Nirali Patel

Nirali Patel is a dedicated Flutter developer with over two years of experience, specializing in creating seamless mobile applications using Dart. With a passion for crafting user-centric solutions, Nirali combines technical proficiency with innovative thinking to push the boundaries of mobile app development.