Flutter widget'ında bir köprü nasıl oluşturulur?

Flutter uygulamamda görüntülenecek bir köprü oluşturmak istiyorum.

Köprü bağlantısı aşağıdakiler Textgibi bir veya benzer metin görünümlerine gömülmelidir:

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

Bunu yapmak için herhangi bir ipucu var mı?

Bir InkWell'i bir Metin parçacığının etrafına sarın ve onTap özniteliğine bir UrlLauncher (hizmet kitaplığından) sağlayın. UrlLauncher'ı aşağıda kullanmadan önce bir Flutter paketi olarak kurun .

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

Metin widget'ına bağlantı gibi görünmesi için bir stil sağlayabilirsiniz.

Güncelleme

Konuya biraz baktıktan sonra, istediğiniz 'satır içi' köprüleri uygulamak için farklı bir çözüm buldum. Sen kullanabilirsiniz RichText Widget kapalı olan TextSpans .

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

Bu şekilde aslında bir kelimeyi vurgulayabilir ve ondan bir köprü oluşturabilirsiniz;)

Flutter'ın yerleşik köprü desteği yoktur, ancak bunu kendiniz taklit edebilirsiniz. Galerinin drawer.dart dosyasında bir örnek var . Dokunmaları işlemek için bir niteliğe sahip RichTextrenkli içeren bir widget kullanırlar :TextSpanrecognizer

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

Eğer sarabilirsiniz Textin GestureDetectorve sap tıklayın 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
  }
)

Daha çok bir bağlantı gibi görünmesini istiyorsanız, alt çizgi ekleyebilirsiniz:

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

ve sonuç:

Flutter_linkify paketini kullanabilirsiniz
https://pub.dev/packages/flutter_linkify
Sadece başka bir seçenek sağlamak istiyorum.
Paket metninizi böler ve vurgular http / https'yi otomatik olarak
birleştirin Eklentiyi birleştir url_launcher url'yi başlatabilirsiniz
Aşağıdaki örneği kontrol edebilirsiniz:

aşağıdaki kodun tamamı

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

Uygulamanıza tıklanabilir bağlantılar koymanın alternatif (veya değil) bir yolu (benim için sadece bu şekilde çalıştı):

1 - url_launcher paketini pubspec.yaml dosyanıza ekleyin

(paket sürüm 5.0 benim için iyi çalışmadı, bu yüzden 4.2.0 + 3 kullanıyorum).

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

2 - İçe aktarın ve aşağıdaki gibi kullanın.

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

Bağlantı Metni https://pub.dev/packages/link_text'i kullanabilir ve şu şekilde kullanabilirsiniz:

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