The named parameter ‘onTap’ isn’t defined.

The Flutter programmers may be familiar with the error “The named parameter ‘onTap’ isn’t defined”, this error is the result of the Widget being used not having the ‘onTap’ property. What we need to do is wrap the widget in a ‘gesture detector‘ or ‘ InkWell‘ to make it clickable., To fix an error we must be patient in finding a solution to the error

Gesture Detector has the function of detecting movements on widgets in Flutter such as clicking or pressing certain widgets. Usually, in Flutter only certain widgets can be clicked because they have click listeners such as buttons, text, images or icons.

Inkwell functions to add an action to a widget in Flutter such as the onTap action

below is example script using gesture detector

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Tap to Change Text')),
        body: Center(
          child: TwoContainers(),
        ),
      ),
    );
  }
}

class TwoContainers extends StatefulWidget {
  @override
  _TwoContainersState createState() => _TwoContainersState();
}

class CustomBoxDecoration {
  static BoxDecoration myContainerDecoration(Color color) {
    return BoxDecoration(
      border: Border.all(
        color: color,
      ),
    );
  }
}

class _TwoContainersState extends State<TwoContainers> {
  String textOne = 'Tap here to change text 1';
  String textTwo = 'Tap here to change text 2';
  String newtext = '';
  String newtext2 = '';

  Color containerColor = Colors.blue;

  void updateTextOne() {
    setState(() {
      textOne = '';
      newtext = 'HOREEEEE';
      containerColor = Colors.transparent;
    });
  }

  void updateTextTwo() {
    setState(() {
      textTwo = '';
      newtext2 = 'GREAT.....';
      containerColor = Colors.transparent;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        GestureDetector(
          onTap: () {
            updateTextOne();
          },
          child: Container(
            padding: EdgeInsets.all(20.0),
            decoration: BoxDecoration(
              border: Border.all(
                color: containerColor,
              ),
            ),
            child: Text(
              textOne,
              style: TextStyle(fontSize: 24.0),
            ),
          ),
        ),
        SizedBox(height: 20.0),
        GestureDetector(
          onTap: () {
            updateTextTwo();
          },
          child: Container(
            padding: EdgeInsets.all(20.0),
            decoration: BoxDecoration(
              border: Border.all(
                color: containerColor,
              ),
            ),
            child: Text(
              textTwo,
              style: TextStyle(fontSize: 24.0),
            ),
          ),
        ),
        Padding(
          padding: EdgeInsets.all(10),
          child: Text(newtext),
        ),
        Padding(
          padding: EdgeInsets.all(20),
          child: Text(newtext2),
        )
      ],
    );
  }
}

If the Script above we are running, we will looking like the video below

Below is script using InkWell ontap in Application

import 'package:flutter/material.dart';

void main() {
  runApp(MyInkwell());
}

class MyInkwell extends StatefulWidget {
  const MyInkwell({super.key});

  @override
  State<MyInkwell> createState() => _MyInkwellState();
}

class _MyInkwellState extends State<MyInkwell> {
  String thistext = 'Press me..';
  Color defaultcolor = Colors.blue;

  void updatetext() {
    setState(() {
      thistext = 'has been clicked';
      defaultcolor = Colors.transparent;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text('Inkwell Example'),
        ),
        body: Container(
          child: InkWell(
            onTap: () {
              updatetext();
            },
            child: Center(
                child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Container(
                  padding: EdgeInsets.all(20),
                  decoration:
                      BoxDecoration(border: Border.all(color: defaultcolor)),
                  child: Text(thistext),
                )
              ],
            )),
          ),
        ),
      ),
    );
  }
}

If the Script above we are running, we will looking like the video below

That is the tutorial about a ‘gesture detector‘ and ‘InkWell‘ Hope it is useful.