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.
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.
I hope this Flutter tutorial helped you.
