How to Disable Click Events of a Screen in Flutter

In some special scenarios, we may want the user to not to interact with the screen. In other words, we don’t want the clicks of users to get registered. Here, I am going to discuss how to disable click events of a screen in Flutter.

The click events of your mobile app screen can be absorbed by using AbsorbPointer widget. With the property absorbing we can either disable or enable click tap events.

In the following code, I have a ListView with two buttons.

import 'package:flutter/material.dart';

class DisableTap extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Tutorials',
      home: FirstScreen()
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class FirstScreen extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Disable Clicks Example'),
      ),
      body: 
       Center(
        child: 
        ListView(
  children: <Widget>[
    RaisedButton(
          child: Text('Example 1'),
          onPressed: () {

          },
        ),
       RaisedButton(
          child: Text('Example 2'),
          onPressed: () {

          },
        ),
  ],
)   
      ),
    );
  }
}

Here, when we click on the buttons they respond by creating a ripple effect.

flutter disable click example

Now, let’s use AbsorbPointer widget and make the value of absorbing property true.

import 'package:flutter/material.dart';

class DisableTap extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Tutorials',
      home: FirstScreen()
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class FirstScreen extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Disable Clicks Example'),
      ),
      body: 
      AbsorbPointer(
        absorbing: true,
        child:Center(
        child: 
        ListView(
  children: <Widget>[
    RaisedButton(
          child: Text('Example 1'),
          onPressed: () {

          },
        ),
       RaisedButton(
          child: Text('Example 2'),
          onPressed: () {

          },
        ),
  ],
)
        
        
      ),
      ),
    );
  }
}

And now the buttons stop responding when we try to interact.

Disable tap flutter example

I hope this Flutter tutorial helped you.

Leave a Comment

Your email address will not be published. Required fields are marked *