Semantics Widgets In Flutter
At the point when Flutter Mobile application hot reloads each time Flutter renders tree it likewise widgets tree, it additionally keeps a subsequent tree, called Semantics Tree which is utilized by the Mobile Device assistive innovation. Every hub of this Semantics tree is a SemanticsNode which may compare to one or a gathering of Widgets.
Hello friends, I will talk about my new blog on Semantics Widget In Flutter. We will also implement a demo of the Semantics Widget, and describes its properties, and how to use them in your flutter applications. So let’s get started.
Table of Contents :
Flutter :
“ Flutter is Google’s UI toolkit that helps you build beautiful and natively combined applications for mobile, web, and desktop in a single codebase in record time ,Flutter offers great developer tools, with amazing hot reload”
Semantics Widget :
Semantics is a widget that annotates the widget tree with a description of the meaning of the widgets. It is used by accessibility tools, search engines, and other semantic analysis software to determine the meaning of the application.
For more info on Sematics Widget,Watch this video By Flutter :
Attributes :
Semantic components contain many functions, Here I introduce some important attributes:
label: Provide a text description of the Widget. That is the basic semantic information.container: Whether this node introduces a new semantic node (SemanticsNode) in the semantic tree. It can not be separated or merged by upper layer semantics, that is, independent.explicitChildNodes: The default is false, indicating whether to force the display of the semantic information of the child widget. It can be understood as split semantics.scopesRoute: If it is not empty, whether the node corresponds to the root of the subtree, the subtree should declare the route name. Usually withexplicitChildNodesSet it to true together, and use it in routing jumps, such as page jumps,Dialog、BottomSheet、PopupMenuThe pop-up part.
Code Implementation :
You need to implement it in your code respectively:
Create a new dart file called semantics_widget_demo.dart inside the libfolder.
In the below snippets, we will add the Semantics method. Inside the method, we will add a ClipOval widget. In this widget, we will add the CircleAvatar widget with maxRadius is 70 and add CachedNetworkImage. Let’s understand it with the help of a reference.
Semantics(
child:ClipOval(
child:CircleAvatar(
maxRadius:70,
child: CachedNetworkImage(
imageUrl: 'https://picsum.photos/250?image=9', height:DeviceSize.height(context),
width:DeviceSize.width(context),fit:BoxFit.cover,
),
),
),
label:'Company logo',
),=> MergeSemantics:
It is a widget that consolidations the semantics of its relatives. It will cause all the semantics of the subtree attached to this hub to be merged into one hub in the semantics tree. In some cases combining the semantics of certain widgets can bring about a more fitting semantics tree.
Utilizing MergeSemantics is straightforward. You just need to pass the widget the subtree to be converged as child a contention when considering MergeSemantics the constructor.
Let’s say if there’s an account details section in the app that displays the user’s email address, name, and company,
Here, by default the user has to tap on every widget to know what that is, but wouldn’t it be more helpful if the entire section is read to the user when they select it? Enter MergeSemantics. We can wrap the column widget with this widget and all the static data will be read one by one in one tap.
MergeSemantics(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
ListTile(
leading: Icon(Icons.account_circle, semanticLabel: 'name'),
title: Text("John Doe", style: TextStyle(color: Colors.blue),),
onTap: () {},
),
ListTile(
leading: Icon(Icons.email, semanticLabel: 'email',),
title: Text("johndoe@test.com", style: TextStyle(color: Colors.blue),),
onTap: () {},
),
ListTile(
leading: Icon(Icons.business, semanticLabel: 'company name'),
title: Text("ABC Inc.", style: TextStyle(color: Colors.blue),),
onTap: () {},
),
],
),
),Code File:
import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter_semantics_demo/themes/device_size.dart';
class SemanticsWidgetDemo extends StatefulWidget {
@override
_SemanticsWidgetDemoState createState() => _SemanticsWidgetDemoState();
}
class _SemanticsWidgetDemoState extends State<SemanticsWidgetDemo> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Semantics Widget Demo'),
),
body: Container(
height: DeviceSize.height(context),
width: DeviceSize.width(context),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Column(
children: [
Text(
'Semantics Widget',
style: TextStyle(fontSize: 17, fontWeight: FontWeight.w600),
),
SizedBox(
height: 20,
),
Semantics(
child: ClipOval(
child: CircleAvatar(
maxRadius: 70,
child: CachedNetworkImage(
imageUrl: 'https://picsum.photos/250?image=9',
height: DeviceSize.height(context),
width: DeviceSize.width(context),
fit: BoxFit.cover,
),
),
),
label: 'Company logo',
),
],
),
Column(
children: [
Text(
'MergeSemantics',
style: TextStyle(fontSize: 17, fontWeight: FontWeight.w600),
),
SizedBox(
height: 20,
),
MergeSemantics(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
ListTile(
leading:
Icon(Icons.account_circle, semanticLabel: 'name'),
title: Text(
"John Doe",
style: TextStyle(color: Colors.blue),
),
onTap: () {},
),
ListTile(
leading: Icon(
Icons.email,
semanticLabel: 'email',
),
title: Text(
"johndoe@test.com",
style: TextStyle(color: Colors.blue),
),
onTap: () {},
),
ListTile(
leading:
Icon(Icons.business, semanticLabel: 'company name'),
title: Text(
"ABC Inc.",
style: TextStyle(color: Colors.blue),
),
onTap: () {},
),
],
),
),
],
),
],
),
),
);
}
}Conclusion:
In this article, I have explained a Semantics Widget in a flutter, which you can modify and experiment with according to your own, this little introduction was from the Semantics Widget demo from our side.
I hope this blog will provide you with sufficient information on Trying up the Semantics Widget in your flutter project. We showed you what the Semantics Widget is and work on it in your flutter applications, So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
