Flutter permits you to set the semantics of a widget or a subtree by wrapping it as the child of the Semantics widget. A few widgets given by Flutter as of now have semantics as a matter of course. The semantics data given by the application can be extremely valuable for availability services. Accordingly, we should give suitable semantics for the UI showed on the screen. Notwithstanding, at times we need certain pieces of the UI to not have semantics.
In this article, we will Explore BlockSemantics In Flutter. We will execute a demo program of the BlockSemantics and how to use it in your flutter applications.
Table Of Contents::
BlockSemantics:
In such cases, it’s smarter to utilize BlockSemantics, which is a more helpful approach to reject the semantics of sibling widgets. It’s shrewd enough to just do that for widgets that were painted before the BlockSemantics child, which implies that you don’t have to manually figure out which ones ought to, and which shouldn’t be disregarded.
Additionally, you might need that the semantics are just set for specific widgets on a subtree. For instance, when a popup is being shown, it implies the client can just interact with the popup. Different widgets ought not to have semantics at that point.
Demo Module :
This demo video shows how to use BlockSemantics in a flutter. It shows how BlockSemantics will work in your flutter applications. It shows there is a button for showing a popup. The popup itself is made utilizing a Card. When the popup is being shown, the client can just communicate with the popup. At that point, different widgets behind the popup ought not to have semantics, including the ‘Show popup’ button. BlockSemantics widget drops the semantics of all widgets that were painted before it in a similar semantic container. It will be shown on your device.
Constructor:
To utilize BlockSemantics, you need to call the constructor underneath:
const BlockSemantics({
Key key,
this.blocking = true,
Widget child
})
You can utilize BlockSemantics and pass the popup widget as the child contention. The constructor has a named contention blocking which shows whether it should drop the semantics of different widgets painted before it. Thusly, you can pass a state variable to make the value true when the popup is being shown or false something else.
Properties:
There are some properties of BlockSemanticsare:
- > blocking: This property is used to whether this widget is blocking semantics of all widgets that were painted before it in the same semantic container.
- > key: This property is used to controls how one widget replaces another widget in the tree.
- > child: This property is utilized to characterize the widget beneath this widget in the tree. This widget can just have one child. To design various children, let this present widget’s child be a widget like Row Widget, Column Widget, or Stack Widget, which have a children’s property, and afterward give the children to that widget.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called main.dart inside the lib folder.
First, we will create a bool variable _showMessages is equal to false and static constant textStyle color was red.
bool _showMessage = false;
static const TextStyle textStyle = const TextStyle(color: Colors.red);
In the body, we will add SizedBox with a double width. infinity. We will add the Column widget. In this widget, we will add SizedBox with width and height. We will add the Stack widget. Inside, we will add an OutlinedButton(). We will add text and the onPressed function. In the function, we will add setState() method. Inside, we will add _showMessage is equal to true and wrap OutlinedButton() to Positioned() widget.
SizedBox(
width: double.infinity,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
width: 400,
height: 150,
child: Stack(
alignment: Alignment.topCenter,
children: [
Positioned(
bottom: 0,
child: OutlinedButton(
child: Text('Show Message'),
onPressed: () => setState(() { _showMessage = true; }),
),
),
BlockSemantics(
blocking: _showMessage,
child: Visibility(
visible: _showMessage,
child: _buildMessage(),
),
)
],
),
),
],
),
),
We will add BlockSemantics() widget. Inside, we will add blocking is _showMessage bool variable and Its child property we will add Visibility(). Inside, add visible are equal _showMessage and add a _buildMessage() widget. We will discuss the below code.
We will deeply define _buildMessage() widget are:
In this widget, we will return Card(). Inside, we will add color, SizedBox, and Column. Inside a Column, we will add ListTile(). Inside we will add leading, title, and subtitle. Also, we will add TextButton(). Inside, we will add Text and the onPressed function. In the function, we will add setState() method. Inside, we will add _showMessage is equal to false and wrap TextButton() to ButtonTheme() widget.
Widget _buildMessage() {
return Card(
color: Colors.cyan[50],
child: SizedBox(
width: 200,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ListTile(
leading: Image.asset("assets/logo.png",height: 22,),
title: Text('BlockSemantics Demo', style: textStyle),
subtitle: Text('by Flutter Devs', style: textStyle),
),
ButtonTheme(
child: ButtonBar(
children: <Widget>[
TextButton(
child: const Text('OK', style: textStyle),
onPressed: () => setState(() { _showMessage = false; }),
),
],
),
),
],
),
),
);
}
When the popup is being displayed and the showSemanticsDebugger is set to true, and we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_block_semantics_demo/splash_screen.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
showSemanticsDebugger: true,
debugShowCheckedModeBanner: false,
home: Splash(),
);
}
}
class BlockSemanticDemo extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _BlockSemanticDemoState ();
}
}
class _BlockSemanticDemoState extends State<BlockSemanticDemo> {
bool _showMessage = false;
static const TextStyle textStyle = const TextStyle(color: Colors.red);
Widget _buildMessage() {
return Card(
color: Colors.cyan[50],
child: SizedBox(
width: 200,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ListTile(
leading: Image.asset("assets/logo.png",height: 22,),
title: Text('BlockSemantics Demo', style: textStyle),
subtitle: Text('by Flutter Devs', style: textStyle),
),
ButtonTheme(
child: ButtonBar(
children: <Widget>[
TextButton(
child: const Text('OK', style: textStyle),
onPressed: () => setState(() { _showMessage = false; }),
),
],
),
),
],
),
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
title: const Text('Flutter BlockSemantics Demo'),
backgroundColor: Colors.cyan,
),
body: SizedBox(
width: double.infinity,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
width: 400,
height: 150,
child: Stack(
alignment: Alignment.topCenter,
children: [
Positioned(
bottom: 0,
child: OutlinedButton(
child: Text('Show Message'),
onPressed: () => setState(() { _showMessage = true; }),
),
),
BlockSemantics(
blocking: _showMessage,
child: Visibility(
visible: _showMessage,
child: _buildMessage(),
),
)
],
),
),
],
),
),
);
}
}
Conclusion:
In the article, I have explained the basic structure of the BlockSemantics Widget in a flutter; you can modify this code according to your choice. This was a small introduction to BlockSemantics On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying up the BlockSemantics in your flutter projects. We will show you what the BlockSemantics is?. Show a constructor and properties of the BlockSemantics. That is how to exclude the semantics of widget subtrees in Flutter. You can utilize BlockSemantics relying upon the case. 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.
From Our Parent Company Aeologic
Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.
Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.
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.
Related: Dialog Using GetX in Flutter
Related: Pagination using GetX in Flutter
Need expert help building your Flutter app? Talk to FlutterExperts for architecture, development, and consulting support.
