Làm cách nào để tạo siêu liên kết trong tiện ích Flutter?

Tôi muốn tạo một siêu liên kết để hiển thị trong ứng dụng Flutter của mình.

Siêu liên kết phải được nhúng trong một Texthoặc các dạng xem văn bản tương tự như:

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

Bất kỳ gợi ý để làm điều này?

Chỉ cần quấn InkWell xung quanh tiện ích Văn bản và cung cấp UrlLauncher (từ thư viện dịch vụ) cho thuộc tính onTap. Cài đặt UrlLauncher dưới dạng gói Flutter trước khi sử dụng bên dưới.

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

Bạn có thể cung cấp một kiểu cho tiện ích Văn bản để làm cho nó giống như một liên kết.

Cập nhật

Sau khi xem xét vấn đề một chút, tôi đã tìm thấy một giải pháp khác để triển khai các siêu liên kết 'trong dòng' mà bạn yêu cầu. Bạn có thể sử dụng Widget RichText với TextSpans kèm theo .

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

Bằng cách này, bạn thực sự có thể đánh dấu một từ và tạo siêu liên kết từ nó;)

Flutter không có hỗ trợ siêu liên kết tích hợp nhưng bạn có thể tự giả mạo nó. Có một ví dụ trong ngăn kéo của Thư viện . Họ sử dụng RichTexttiện ích con có chứa màu TextSpan, có recognizerthuộc tính để xử lý các lần nhấn:

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

Bạn có thể bọc của bạn Texttrong GestureDetectorvà xử lý nhấp chuột vào 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
  }
)

Bạn có thể sử dụng gói Flutter_linkify
https://pub.dev/packages/flutter_linkify
Chỉ muốn cung cấp một tùy chọn khác.
Gói sẽ phân chia văn bản của bạn và đánh dấu http / https tự động
Kết hợp plugin url_launcher bạn có thể khởi chạy url
Bạn có thể kiểm tra ví dụ bên dưới:

mã đầy đủ bên dưới

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

Nếu bạn muốn làm cho nó trông giống như một liên kết hơn, bạn có thể thêm gạch dưới:

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

và kết quả:

Một cách thay thế (hoặc không) để đặt các liên kết có thể nhấp vào ứng dụng của bạn (đối với tôi, nó chỉ hoạt động theo cách đó):

1 - Thêm gói url_launcher vào tệp pubspec.yaml của bạn

(phiên bản gói 5.0 không hoạt động tốt đối với tôi, vì vậy tôi đang sử dụng 4.2.0 + 3).

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

2 - Nhập nó và sử dụng như bên dưới.

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

Bạn có thể sử dụng Văn bản liên kết https://pub.dev/packages/link_text và sử dụng nó như

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