4.6 C
New York
Thursday, February 29, 2024

Using BlockSemantics in Flutter: Tutorial & Example

This article is about the BlockSemantics widget in Flutter.


Semantics are used by accessibility tools, bots, and other semantic analysis software to determine the meaning of the application. To be able to see the semantic stuff on iOS simulators or Android emulators, you can set the showSemanticsDebugger property of MaterialApp to true:Advertisements

      showSemanticsDebugger: true,
      /* ... */

The BlockSemantics widget, as its name suggests, is used to exclude the semantics of all widgets painted before it in the same semantic container. This is helpful in some scenarios. For example, when a dialog or a drawer is showing, other widgets behind it should not have semantics.

Let’s have a glance at its constructor, as follows:

  Key? key, 
  bool blocking = true, 
  Widget? child

Besides the typical key property, the widget doesn’t need too many arguments.

  • blocking: Blocking semantics or not.
  • child: the child widget.

AdvertisementsFor more clarity, let’s see the example below.

The Example

App Preview

The app we are going to make contains a floating button (that will be used to turn on or off the blocking), a group of dummy widgets including a button, a text field, and a text widget (whose semantics will be blocked later), and a BlockSemantics widget that wraps an amber box.

When showSemanticsDebugger is set to false, you will see this:


When the semantics debugger is enabled, you will see this:

And here’s how our app works in action:

The Code

The complete source code in main.dart with detailed explanations:

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      showSemanticsDebugger: true,
      title: 'KindaCode.com',
      theme: ThemeData(
        primarySwatch: Colors.green,
      home: const HomePage(),

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  _HomePageState createState() => _HomePageState();

class _HomePageState extends State<HomePage> {
  // block semantics or not
  // this variable will change when you press the floating button
  bool _blocking = false;

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('KindaCode.com'),
      body: Padding(
        padding: const EdgeInsets.all(15),
        child: Column(
          children: [
            // These widget are painted before BlockSemantics
            // Therefore, they will blocked semantics if the "blocking" argument of the BlockSemantics widget is set to "true"
            ElevatedButton(onPressed: () {}, child: const Text('Button 1')),
            const SizedBox(
              height: 15,
            const TextField(
              decoration: InputDecoration(border: OutlineInputBorder()),
            const SizedBox(
              height: 15,
            const Text('Just a text widget'),
            const SizedBox(
              height: 15,

            // The BlockSemantics stuff
              blocking: _blocking,
              child: Card(
                elevation: 6,
                child: Container(
                  width: 300,
                  height: 200,
                  color: Colors.amber,
                  child: const Center(
                    child: Text(
                      style: TextStyle(fontSize: 50),
      // change the blocking state
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _blocking = !_blocking;
        child: const Icon(Icons.block),


You’ve learned the fundamentals of the BlockSemantics widget and examined an end-to-end example of implementing it in action. This knowledge might be very helpful when developing Flutter web applications. If you’d like to explore more new and awesome features of Flutter, take a look at the following articles:

You can also check out our Flutter category page or Dart category page for the latest tutorials and examples.


Related Articles

Latest Articles