Gostaria de criar um hiperlink para exibir no meu aplicativo Flutter.
O hiperlink deve ser incorporado em uma Text
ou em visualizações de texto semelhantes, como:
The last book bought is <a href='#'>this</a>
Alguma dica para fazer isso?
Respostas:
Basta envolver um InkWell em um widget de texto e fornecer um UrlLauncher (da biblioteca de serviço) para o atributo onTap. Instale UrlLauncher como um pacote Flutter antes de usá-lo abaixo.
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')
),
),
),
);
}
}
Você pode fornecer um estilo ao widget de Texto para torná-lo semelhante a um link.
Depois de examinar o problema um pouco, encontrei uma solução diferente para implementar os hiperlinks 'em linha' que você pediu. Você pode usar o widget RichText com TextSpans incluídos .
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');
},
),
],
),
),
),
),
);
}
}
Desta forma, você pode realmente destacar uma palavra e fazer um hiperlink a partir dela;)
TapGestureRecognizer
corretamente. Você deve chamar o dispose()
método quando RichText
não for mais usado. Veja aqui: api.flutter.dev/flutter/painting/TextSpan/recognizer.html
StatelessWidget
não descartará magicamente o seu TapGestureRecognizer
para você. Na verdade, usar StatelessWidget
neste cenário é incorreto, pois você não pode descartar seus recursos dessa forma. E sim, você absolutamente precisa chamar o dispose()
método de TapGestureRecognizer
, pois ele executa o cronômetro interno que precisa ser interrompido.
Flutter não tem suporte para hiperlinks embutido, mas você mesmo pode fingir. Há um exemplo em drawer.dart da Galeria . Eles usam um RichText
widget que contém um colorido TextSpan
, que tem um recognizer
atributo para lidar com os toques:
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,
),
],
),
InkWell
lugar de GestureDetector
.
Você pode usar o pacote flutter_linkify
https://pub.dev/packages/flutter_linkify
Apenas deseja fornecer outra opção.
O pacote irá dividir seu texto e destacar http / https automaticamente.
Combine o plugin url_launcher você pode lançar o url
Você pode verificar o exemplo abaixo:
código completo abaixo
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';
}
}
}
Uma forma alternativa (ou não) de colocar links clicáveis em seu aplicativo (para mim, funcionou dessa forma):
1 - Adicione o pacote url_launcher em seu arquivo pubspec.yaml
(o pacote versão 5.0 não funcionou bem para mim, então estou usando o 4.2.0 + 3).
dependencies:
flutter:
sdk: flutter
url_launcher: ^4.2.0+3
2 - Importe e use conforme abaixo.
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';
}
}
}
FlatButton
com as mesmas cores de fundo e de texto do restante de seus textos, então formate-o com TextDecoration.underline como o bartektartanus mostrado acima ...
Você pode usar Link Text https://pub.dev/packages/link_text e usá-lo como
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,
),
),
);
}
flutter pub get
porque ele falha comUnable to find a plugin.vcxproj for plugin "url_launcher_windows"