The named parameter ‘onTap’ isn’t defined.

Bagi para programmer flutter mungkin tidak asing dengan error “The named parameter ‘onTap’ isn’t defined”, error ini merupakan akibat dari Widget yang digunakan tidak memiliki properti ‘onTap’ yang perlu kita adalah dengan membungkus widget tersebut ‘gesture detector’ atau ‘InkWell’ agar dapat diklik.

Gesture Detector memiliki fungsi mendeteksi gerakan pada widget pada Flutter seperti klik atau menekan widget tertentu. Biasanya, pada Flutter hanya widget tertentu saja yang bisa di klik karena memang memiliki listener klik seperti button, text, gambar atau icon.

Inkwell berfungsi untuk menambahkan suatu action pada widget pada flutter seperti action onTap

Berikut penggunaan Gesture Detector dalam aplikasi sederhana

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),
        )
      ],
    );
  }
}

Jika kode diatas di jalankan akan tampak seperti video dibawah ini

 

Berikut penggunan InkWell pada aplikasi sederhana

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),
                )
              ],
            )),
          ),
        ),
      ),
    );
  }
}

JIka script diatas dijalankan maka akan tampak seperti video dibawah ini

Demikian tutorial penggunaan ‘gesture detector’ dan ‘InkWell’ dalam aplikasi sederhana, semoga bermanfaat.