Ich möchte einen Hyperlink erstellen, der in meiner Flutter-App angezeigt wird.
Der Hyperlink sollte in eine Text
oder ähnliche Textansichten eingebettet sein wie:
The last book bought is <a href='#'>this</a>
Irgendwelche Hinweise dazu?
Wickeln Sie einfach ein InkWell um ein Text-Widget und geben Sie einen UrlLauncher (aus der Servicebibliothek) in das onTap-Attribut ein. Installieren Sie UrlLauncher als Flutter-Paket, bevor Sie es unten verwenden.
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')
),
),
),
);
}
}
Sie können dem Text-Widget einen Stil zuweisen, damit es wie ein Link aussieht.
Nachdem ich mich ein wenig mit dem Problem befasst hatte, fand ich eine andere Lösung, um die von Ihnen gewünschten Inline-Hyperlinks zu implementieren. Sie können das RichText-Widget mit beiliegenden TextSpans verwenden .
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');
},
),
],
),
),
),
),
);
}
}
Auf diese Weise können Sie tatsächlich ein Wort hervorheben und daraus einen Hyperlink erstellen;)
TapGestureRecognizer
richtig. Sie müssen diedispose()
Methode aufrufen , wenn sieRichText
nicht mehr verwendet wird. Siehe hier: api.flutter.dev/flutter/painting/TextSpan/recognizer.htmlStatelessWidget
wird Ihre nicht auf magische WeiseTapGestureRecognizer
für Sie entsorgen . Tatsächlich ist die VerwendungStatelessWidget
in diesem Szenario falsch, da Sie Ihre Ressourcen nicht auf diese Weise entsorgen können. Und ja, Sie müssen unbedingt diedispose()
Methode von aufrufenTapGestureRecognizer
, da sie den internen Timer ausführt, der gestoppt werden muss.Flutter hat keine integrierte Hyperlink-Unterstützung, aber Sie können es selbst fälschen. Es gibt ein Beispiel in der Schublade der Galerie . Sie verwenden ein
RichText
Widget mit einer FarbeTextSpan
, die einrecognizer
Attribut für den Umgang mit Taps hat: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, ), ], ),
quelle
Sie können Ihr
Text
In einpackenGestureDetector
und das Click-In bearbeitenonTap()
.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 } )
quelle
InkWell
anstelle von verwendenGestureDetector
.Sie können das Paket flutter_linkify
https://pub.dev/packages/flutter_linkify verwenden. Sie
möchten lediglich eine weitere Option bereitstellen.
Das Paket teilt Ihren Text und hebt http / https automatisch hervor.
Kombinieren Sie das Plugin url_launcher. Sie können die URL starten.
Sie können das folgende Beispiel überprüfen:
vollständiger Code unten
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: [email protected] \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'; } } }
quelle
Wenn Sie möchten, dass es noch mehr wie ein Link aussieht, können Sie Folgendes unterstreichen:
new Text("Hello Flutter!", style: new TextStyle(color: Colors.blue, decoration: TextDecoration.underline),)
und das Ergebnis:
quelle
Eine alternative (oder nicht) Möglichkeit, anklickbare Links in Ihre App einzufügen (für mich hat es einfach so funktioniert):
1 - Fügen Sie das Paket url_launcher in Ihre Datei pubspec.yaml ein
(Die Paketversion 5.0 hat bei mir nicht gut funktioniert, daher verwende ich 4.2.0 + 3).
dependencies: flutter: sdk: flutter url_launcher: ^4.2.0+3
2 - Importieren Sie es und verwenden Sie es wie folgt.
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'; } } }
quelle
FlatButton
mit demselben Hintergrund und denselben Textfarben wie der Rest Ihrer Texte verwenden. Formatieren Sie ihn also mit TextDecoration.underline, wie der oben gezeigte Bartektartanus zeigt ...Sie können Link Text https://pub.dev/packages/link_text verwenden und wie folgt verwenden
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, ), ), ); }
quelle
flutter pub get
scheitert es mitUnable to find a plugin.vcxproj for plugin "url_launcher_windows"