Why does onTap and functions in it does not work in InkWell?

Issue

I’m trying to open link when tapped on ListWheelScrollView, but it doesn’t work. It doesn’t even enter the OnTap

import 'package:flutter/material.dart';
import 'package:string_validator/string_validator.dart';
import 'package:url_launcher/url_launcher.dart';

class News extends StatefulWidget {
  final Map news;

  @override
  _NewsState createState() => _NewsState();

  const News({Key key, this.news}) : super(key: key);
}

class _NewsState extends State<News> {
  Map test;
  double textPadding = 290;

  // ignore: non_constant_identifier_names
  @override
  void initState() {
    super.initState();
  }

  launchURL(String url) async {
    if (await canLaunch(url)) {
      await launch(url, forceWebView: true);
    } else {
      throw 'Could not launch $url';
    }
  }

  @override
  Widget build(BuildContext context) {
    test = (ModalRoute.of(context).settings.arguments);
    var fixedTest = test['data'].news4today;

    checkUrls() {
      for (int i = 0; i < fixedTest.length; i++) {
        if (fixedTest[i]['urlToImage'] == null ||
            !isURL(fixedTest[i]['urlToImage'])) {
          fixedTest[i]['urlToImage'] =
              'https://i.pinimg.com/originals/8a/eb/d8/8aebd875fbddd22bf3971c3a7159bdc7.png';
        }
        if (fixedTest[i]['url'] == null || !isURL(fixedTest[i]['url'])) {
          fixedTest[i]['url'] = 'https://google.com';
        }
      }
    }

    checkUrls();

    return Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          title: Center(child: Text('News')),
          backgroundColor: Colors.deepPurpleAccent,
        ),
        body: ListWheelScrollView.useDelegate(
            itemExtent: 400,
            diameterRatio: 9,
            squeeze: 1.2,
            physics: BouncingScrollPhysics(),
            onSelectedItemChanged: (index) {
              // debugPrint(index.toString());
            },
            childDelegate: ListWheelChildBuilderDelegate(
                childCount: 100,
                builder: (context, index) => Container(
                      child: Stack(
                        alignment: Alignment.topCenter,
                        children: <Widget>[
                          Material(
                            child: InkWell(
                              onDoubleTap: () {
                                launchURL(fixedTest[index]['urlToImage']);
                              },
                              child: Container(
                                height: 353.0,
                                decoration: BoxDecoration(
                                  image: DecorationImage(
                                      fit: BoxFit.scaleDown,
                                      alignment: FractionalOffset.center,
                                      image: NetworkImage(
                                          fixedTest[index]['urlToImage'])),
                                ),
                              ),
                            ),
                          ),
                          Container(
                            margin: EdgeInsets.only(top: 285),
                            child: Padding(
                              padding: const EdgeInsets.all(10),
                              child: SizedBox(
                                  child: Text(
                                fixedTest[index]['title'],
                                style: TextStyle(fontSize: 16),
                                maxLines: 4,
                                textAlign: TextAlign.center,
                              )),
                            ),
                            decoration: BoxDecoration(
                              color: Colors.purple[100],
                              boxShadow: [
                                BoxShadow(
                                  color: Colors.grey.withOpacity(0.8),
                                  spreadRadius: 1,
                                  blurRadius: 3,
                                  offset: Offset(1, 1),
                                ),
                              ],
                            ),
                          )
                        ],
                      ),
                    ))));
  }
}

I was trying to remove Containers with Ink, but if I’ll do that, it will ruin the app because of the text margin. Tried onDoubleTap too.

Solution

Instead of using inkwell you should use the RichText widget for tap-able text. Below is the code for the same. Using regular text and inkwell is not a good practice specially because if you want to add a regular text and a link right after it you will have to use Row widget and if the links goes to next next line it won’t look as expected.

import 'package:flutter/gestures.dart';


new RichText(
      text: new TextSpan(text: 'Non touchable. ', children: [
        new TextSpan(
          text: 'Tap here.',
          recognizer: new TapGestureRecognizer()..onTap = () => print('Tap Here onTap'),
        )
      ]),
    );

About your error, instead of yor launchURL function, try printing something to know if the double tap gesture is recognized or not. If you are getting the print statement on double tap, then its an error in your launchURL function.

Answered By – Sarvesh Dalvi

Answer Checked By – Mildred Charles (FlutterFixes Admin)

Leave a Reply

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