Home > OS >  Can we provide clickability to a TextWidget text in Flutter?
Can we provide clickability to a TextWidget text in Flutter?

Time:10-26

What I want is to be able to click on the words I specify and when I click it, it shows a callout with Easy Loading.

class MyHomePage extends StatelessWidget {
  const MyHomePage({ Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(t
      appBar: AppBar(title: Text("Risale-i Nur"),),
      body: Column(
        children: [
          Text("İhlas Risalesi - 1. Düstur", style: Theme.of(context).textTheme.headlineLarge),
          Text("""Eğer o razı olsa bütün dünya küsse ehemmiyeti yok. O razı olduktan ve kabul ettikten sonra, isterse ve hikmeti iktiza ederse sizler istemek talebinde olmadığınız halde, halklara da kabul ettirir, onları da razı eder. Onun için bu hizmette doğrudan doğruya yalnız Cenab-ı Hakk’ın rızasını esas maksat yapmak gerektir.""", style: Theme.of(context).textTheme.bodyMedium,),
        ],
      ),
    );
  }
}
class Strings{
  static const Map<String, String> words = {"iktiza":"mecburiyet", "ehemmiyeti":"kıymeti", "tesir":"etki"};
  /* 
    
    onPressed/onTap(){
    EasyLoading.showToast(words[KEY], dismissOnTap: true);
  } */
}

//I tried this but of course I can't write a widget in text

Widget mean(String key){ return GestureDetector( child: Text(key), onTap: (){ EasyLoading.showToast(words[key], dismissOnTap: true); } ); }

CodePudding user response:

just wrap your text widget with GestureDetector() it will make it clickable.

  GestureDetector(onTap: () {
              //EasyLoading.showToast(words[KEY], dismissOnTap: true);
              }, child: Text("data")),

CodePudding user response:

You have few ways to do that.

You can use RichText and use recognizer

import 'package:flutter/gestures.dart'; ...

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

You can wrap your Text widget inside a GestureDetector widget

GestureDetector(
        onTap: () => function,
        child: Text(
          'Tap here.',
        )
    );
  • Related