As we all know in flutter most widgets offer us to set click event on them and we can also disable them by passing Null. In Raised Button widget we can pass null to onPressed() event to make it disable. Same as in ListView widget we can set NeverScrollableScrollPhysics() event to disable scrolling in Listview widget. But what if we have ton of widgets and want to disable them on single event. Here comes the AbsorbPointer widget, AbsorbPointer widget disables click event on all the Child tree and make them un-pressable. So in this tutorial we would learn about AbsorbPointer Widget in Flutter in Android iOS with explained example.
Contents in this project AbsorbPointer Widget in Flutter Android iOS Example:
1. The first step is open your project’s main.dart file and import material.dart package.
|
1 |
import 'package:flutter/material.dart'; |
2. Creating void main runApp() method and here we would call our main MyApp class.
|
1 |
void main() => runApp(MyApp()); |
3. Creating our main MyApp extends StatelessWidget class. This is our Root class.
|
1 2 3 4 5 |
class MyApp extends StatelessWidget { } |
4. Creating a sample function named as messagePrint(). We would call this function on Raised button onPressed event. Inside this function we are simply printing a message on terminal screen.
|
1 2 3 |
messagePrint() { print('Function Called'); } |
5. Creating Widget Build area -> Material App -> Scaffold widget -> Safe Area widget -> Center Widget.
|
1 2 3 4 5 6 7 8 |
Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: Center( child: )))); } |
6. Creating AbsorbPointer widget as Parent then create a Column widget as its child. Now we would make 3 RaisedButton widget in Column widget.
- absorbing : Used to set Whether this widget absorbs pointers during hit testing. In simple manner to enable and disable Click, OnPressed event given child tree.
- ignoringSemantics : Used to set Whether the semantics of this render object is ignored when compiling the semantics tree.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
AbsorbPointer( absorbing: true, ignoringSemantics: false, child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ Text( 'AbsorbPointer Widget in Flutter', style: TextStyle( fontSize: 25, color: Colors.black, fontWeight: FontWeight.bold), ), Container( margin: const EdgeInsets.fromLTRB(20, 20, 20, 20), child: RaisedButton( onPressed: () => messagePrint(), child: Text(' Sample Button '), textColor: Colors.white, color: Colors.green, padding: EdgeInsets.fromLTRB(12, 12, 12, 12), )), Container( margin: const EdgeInsets.fromLTRB(20, 10, 20, 20), child: RaisedButton( onPressed: () => messagePrint(), child: Text(' Sample Button '), textColor: Colors.white, color: Colors.green, padding: EdgeInsets.fromLTRB(12, 12, 12, 12), )), Container( margin: const EdgeInsets.fromLTRB(20, 10, 20, 20), child: RaisedButton( onPressed: () => messagePrint(), child: Text(' Sample Button '), textColor: Colors.white, color: Colors.green, padding: EdgeInsets.fromLTRB(12, 12, 12, 12), )) ], )) |
7. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { messagePrint() { print('Function Called'); } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: Center( child: AbsorbPointer( absorbing: true, ignoringSemantics: false, child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ Text( 'AbsorbPointer Widget in Flutter', style: TextStyle( fontSize: 25, color: Colors.black, fontWeight: FontWeight.bold), ), Container( margin: const EdgeInsets.fromLTRB(20, 20, 20, 20), child: RaisedButton( onPressed: () => messagePrint(), child: Text(' Sample Button '), textColor: Colors.white, color: Colors.green, padding: EdgeInsets.fromLTRB(12, 12, 12, 12), )), Container( margin: const EdgeInsets.fromLTRB(20, 10, 20, 20), child: RaisedButton( onPressed: () => messagePrint(), child: Text(' Sample Button '), textColor: Colors.white, color: Colors.green, padding: EdgeInsets.fromLTRB(12, 12, 12, 12), )), Container( margin: const EdgeInsets.fromLTRB(20, 10, 20, 20), child: RaisedButton( onPressed: () => messagePrint(), child: Text(' Sample Button '), textColor: Colors.white, color: Colors.green, padding: EdgeInsets.fromLTRB(12, 12, 12, 12), )) ], )))))); } } |
Screenshot:
