स्पंदन विजेट में हाइपरलिंक कैसे बनाएं?

Question

मैं अपने फ़्लटर ऐप में प्रदर्शित करने के लिए हाइपरलिंक बनाना चाहूंगा।

हाइपर लिंक को एक Textया समान पाठ दृश्य में एम्बेड किया जाना चाहिए जैसे:

The last book bought is <a href='#'>this</a>

ऐसा करने के लिए कोई संकेत?

Answer 1

बस एक पाठ विजेट के चारों ओर एक इंकवेल लपेटें और ऑनटैप विशेषता के लिए एक UrlLuncher (सेवा पुस्तकालय से) की आपूर्ति करें। नीचे उपयोग करने से पहले एक Flutter पैकेज के रूप में UrlLauncher स्थापित करें ।

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


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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('UrlLauchner'),
        ),
        body: new Center(
          child: new InkWell(
              child: new Text('Open Browser'),
              onTap: () => launch('https://docs.flutter.io/flutter/services/UrlLauncher-class.html')
          ),
        ),
      ),
    );
  }
}

आप इसे लिंक की तरह दिखने के लिए टेक्स्ट विजेट को एक शैली प्रदान कर सकते हैं।

अपडेट करें

इस मुद्दे को थोड़ा देखने के बाद मैंने आपके लिए 'हाइपरलिंक्स' को लागू करने के लिए एक अलग समाधान ढूंढ लिया। आप रिच टेक्स्ट विजेट का उपयोग संलग्न टेक्स्टस्पैन के साथ कर सकते हैं ।

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('UrlLauchner'),
        ),
        body: new Center(
          child: new RichText(
            text: new TextSpan(
              children: [
                new TextSpan(
                  text: 'This is no Link, ',
                  style: new TextStyle(color: Colors.black),
                ),
                new TextSpan(
                  text: 'but this is',
                  style: new TextStyle(color: Colors.blue),
                  recognizer: new TapGestureRecognizer()
                    ..onTap = () { launch('https://docs.flutter.io/flutter/services/UrlLauncher-class.html');
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

इस तरह से आप वास्तव में एक शब्द को उजागर कर सकते हैं और उसमें से हाइपरलिंक बना सकते हैं;)

Comments

UrlLauncher अब स्पंदन का हिस्सा नहीं है, इसे एक प्लगइन में स्थानांतरित किया गया और एपीआई को बदल दिया गया ।

— जोसेफ एडमसिक

इसके अलावा हमें आयात जोड़ने की आवश्यकता है: आयात 'पैकेज: स्पंदन / इशारों.कार्ट'; आयात 'पैकेज: url_launcher / url_launcher.dart';

— एलेक्स प्लूटौ

आप अपने जीवनचक्र को TapGestureRecognizerसही ढंग से नहीं संभाल रहे हैं । dispose()जब आपको RichTextअब उपयोग नहीं करना है, तो आपको कॉल विधि करनी होगी । यहां देखें: api.flutter.dev/flutter/painting/TextSpan/recognizer.html

— एलेक्स

@AlexSemeniuk अपने उदाहरण में वे एक स्टेटफुलवेट का उपयोग कर रहे हैं, ऊपर दिए गए उत्तर में यह एक स्टेटलेसविजेट है। क्या आप सुनिश्चित हैं कि हमें स्टेटलेसविजेट के मामले को निपटाना होगा?

— कोरी कोल

@CoreyCole StatelessWidgetआपके TapGestureRecognizerलिए जादुई रूप से आपका निपटान नहीं करेगा । वास्तव में, StatelessWidgetइस परिदृश्य का उपयोग करना गलत है, क्योंकि आप इस तरह से अपने सूत्रों का निपटान नहीं कर सकते हैं। और हां, आपको पूरी तरह से कॉल dispose()करने की आवश्यकता है TapGestureRecognizer, क्योंकि यह आंतरिक टाइमर चलाता है जिसे रोकने की आवश्यकता है।

— एलेक्स सेमेनिउक

Answer 2

स्पंदन में अंतर्निहित हाइपरलिंक समर्थन नहीं है लेकिन आप इसे स्वयं नकली कर सकते हैं। गैलरी के drawer.dart में एक उदाहरण है । वे RichTextएक रंग युक्त विजेट का उपयोग करते हैं TextSpan, जिसमें recognizerनल को संभालने की विशेषता होती है:

        RichText(
          text: TextSpan(
            children: [
              TextSpan(
                style: bodyTextStyle,
                text: seeSourceFirst,
              ),
              TextSpan(
                style: bodyTextStyle.copyWith(
                  color: colorScheme.primary,
                ),
                text: repoText,
                recognizer: TapGestureRecognizer()
                  ..onTap = () async {
                    final url = 'https://github.com/flutter/gallery/';
                    if (await canLaunch(url)) {
                      await launch(
                        url,
                        forceSafariVC: false,
                      );
                    }
                  },
              ),
              TextSpan(
                style: bodyTextStyle,
                text: seeSourceSecond,
              ),
            ],
          ),

Comments

धन्यवाद। लेकिन यह वास्तव में वह चीज नहीं है जिसकी मुझे तलाश है: मैं इन-ऐप नेविगेशन से परे देख रहा हूं।

— टेलर

मुझे यकीन नहीं है कि आपके द्वारा "इन-ऐप नेविगेशन से परे देखने" का क्या मतलब है। क्या आप ब्राउज़र खोलने के लिए लिंक चाहते हैं?

— कोलिन जैक्सन

हां, एक लिंक या एक जैसे जो ब्राउज़ में खोलने के लिए क्लिक किया जा सकता है।

— टेलर ५

यही वह नमूना है जिससे मैंने जुड़ा था। मैंने इसे दिखाने के लिए कुछ चित्रों को उत्तर में जोड़ा।

— कॉलिन जैक्सन

रेपो लिंक टूट गया है

— मिशेल फ़िनस्टीन

Answer 3

आप अपने Textमें लपेट कर GestureDetectorसंभाल सकते हैं onTap()।

GestureDetector(
  child: Text("Click here", style: TextStyle(decoration: TextDecoration.underline, color: Colors.blue)),
  onTap: () {
    // do what you need to do when "Click here" gets clicked
  }
)

Comments

आप सही हैं, आपके समाधान में दूसरों की तुलना में कम लाइनें हैं, लेकिन इंकवेल इस जासूसी नौकरी के लिए विजेट है, इसलिए कम से कम शब्दार्थ मुझे लगता है कि यह सबसे अच्छा समाधान है

— dmarquina

@ मरमक्विना हाँ, आप InkWellइसके बजाय उपयोग कर सकते हैं GestureDetector।

— CopsOnRoad

Answer 4

यदि आप इसे किसी लिंक की तरह देखना चाहते हैं, तो आप इसे जोड़ सकते हैं:

new Text("Hello Flutter!", style: new TextStyle(color: Colors.blue, decoration: TextDecoration.underline),)

और परिणाम:

Comments

यह क्लिक करने योग्य नहीं है!

— atilkan

फिर इसे बटन विजेट के साथ चारों ओर लपेटें। :)

— bartektartanus

Answer 5

आप पैकेज flutter_linkify
https://pub.dev/packages/flutter_linkify का उपयोग कर सकते हैं
बस एक और विकल्प प्रदान करना चाहते हैं।
पैकेज आपके पाठ को विभाजित करेगा और http / https को स्वचालित रूप से हाइलाइट करेगा
प्लगइन url_launcher आप url लॉन्च कर सकते हैं
आप नीचे दिए गए उदाहरण की जांच कर सकते हैं:

नीचे पूर्ण कोड

import 'package:flutter/material.dart';
import 'package:flutter_linkify/flutter_linkify.dart';
import 'dart:async';

import 'package:url_launcher/url_launcher.dart';

void main() => runApp(new LinkifyExample());

class LinkifyExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'flutter_linkify example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter_linkify example'),
        ),
        body: Center(
          child: Linkify(
            onOpen: _onOpen,
            text: "Made by https://cretezy.com \n\nMail: [e-mail] \n\n  this is test http://pub.dev/ ",
          ),
        ),
      ),
    );
  }

  Future<void> _onOpen(LinkableElement link) async {
    if (await canLaunch(link.url)) {
      await launch(link.url);
    } else {
      throw 'Could not launch $link';
    }
  }
}

Comments

एक ही विजेट पर आपके 2 लिंक कैसे हो सकते हैं? उदाहरण के लिए "इस पर क्लिक करके आप उपयोग की शर्तों और गोपनीयता नीति को स्वीकार करते हैं" जहां हमें उन्हें एक साथ करने की आवश्यकता है

— दानी

Answer 6

आपके ऐप में क्लिक करने योग्य लिंक डालने का एक वैकल्पिक (या नहीं) तरीका (मेरे लिए यह सिर्फ उसी तरह काम करता है):

1 - अपने pubspec.yaml फ़ाइल में url_launcher पैकेज जोड़ें

(पैकेज संस्करण 5.0 मेरे लिए अच्छी तरह से काम नहीं करता था, इसलिए मैं 4.2.0 + 3 का उपयोग कर रहा हूं)।

dependencies:
  flutter:
    sdk: flutter
  url_launcher: ^4.2.0+3

2 - इसे आयात करें और नीचे के रूप में उपयोग करें।

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

void main() {
  runApp(MaterialApp(
    title: 'Navigation Basics',
    home: MyUrl(),
  ));
}

class MyUrl extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Url Launcher'),
      ),
      body: Center(
        child: FlatButton(
          onPressed: _launchURL,
          child: Text('Launch Google!',
              style: TextStyle(fontSize: 17.0)),
        ),
      ),
    );
  }

  _launchURL() async {
    const url = 'https://google.com.br';
    if (await canLaunch(url)) {
      await launch(url);
    } else {
      throw 'Could not launch $url';
    }
  }
}

Comments

तो कुछ पाठ के बीच एक हाइपरलिंक की जरूरत है, तो आप एक का उपयोग कर सकते FlatButtonतो यह whith bartektartanus रूप TextDecoration.underline ऊपर से पता चला प्रारूप ... अपने ग्रंथों के बाकी के रूप में एक ही पृष्ठभूमि और पाठ रंग के साथ,

— Fellipe Sanches

Answer 7

आप लिंक टेक्स्ट https://pub.dev/packages/link_text का उपयोग कर सकते हैं और इसे पसंद कर सकते हैं

 final String _text = 'Lorem ipsum https://flutter.dev\nhttps://pub.dev'; 
 @override
 Widget build(BuildContext context) {
 return Scaffold(
     body: Center(
      child: LinkText(
        text: _text,
        textAlign: TextAlign.center,
      ),
    ),
  );
}

Comments

लिनक्स के flutter pub getलिए इसके साथ विफलUnable to find a plugin.vcxproj for plugin "url_launcher_windows"

— यूजीन जीआर। फिलिपोव