কীভাবে ফ্লটার উইজেটে হাইপারলিঙ্ক তৈরি করবেন?

Question 1

আমি আমার ফ্লুটার অ্যাপে প্রদর্শন করতে একটি হাইপারলিঙ্ক তৈরি করতে চাই।

হাইপার লিঙ্কটি কোনও Textবা অনুরূপ পাঠ্য দর্শনগুলিতে এম্বেড হওয়া উচিত :

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

এটি করার কোনও ইঙ্গিত?

Question 2

কেবলমাত্র একটি পাঠ্য উইজেটের চারপাশে একটি ইনকওয়েল लपेटুন এবং অনট্যাপ বৈশিষ্ট্যে একটি 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');
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

এইভাবে আপনি আসলে একটি শব্দ হাইলাইট করতে পারেন এবং এটি থেকে একটি হাইপার লিঙ্ক তৈরি করতে পারেন;)

Question 3

ঝাঁকুনির অন্তর্নির্মিত হাইপারলিংক সমর্থন নেই তবে আপনি নিজেই এটি জাল করতে পারেন। গ্যালারীটির ড্রয়ার.ডার্টে একটি উদাহরণ রয়েছে । তারা 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,
              ),
            ],
          ),

Question 4

তুমি তোমার মোড়ানো পারেন 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
  }
)

Question 5

আপনি যদি এটিকে আরও একটি লিঙ্কের মতো দেখতে চান তবে আপনি আন্ডারলাইন যুক্ত করতে পারেন:

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

এবং ফলাফল:

Question 6

আপনি প্যাকেজ 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: example@gmail.com \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';
    }
  }
}

Question 7

আপনার অ্যাপ্লিকেশনে ক্লিকযোগ্য লিঙ্ক স্থাপনের একটি বিকল্প (বা না) উপায় (আমার জন্য এটি কেবল সেভাবে কাজ করেছে):

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';
    }
  }
}

Question 8

আপনি লিঙ্ক পাঠ্য 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,
      ),
    ),
  );
}