Flutterアプリに表示するハイパーリンクを作りたいのですが、どうすればいいですか?
ハイパーリンクは Text
やそれに類するテキストビューに埋め込む必要があります。
最後に買った本は this` です。
これを行うためのヒントはありますか?
InkWellをTextウィジェットに巻き付け、onTap属性にUrlLauncher(サービスライブラリ)を指定するだけです。UrlLauncher](https://pub.dartlang.org/packages/url_launcher#-installing-tab-)をFlutterパッケージとしてインストールしてから、以下を使用します。
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')
),
),
),
);
}
}
Text ウィジェットにスタイルを与えて、リンクのように見せることができます。
この問題を少し調べた後、あなたが要求した 'in line' ハイパーリンクを実装するための別の解決策を発見しました。RichText Widget]1 を 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');
},
),
],
),
),
),
),
);
}
}
この方法では、実際に1つの単語をハイライトして、そこからハイパーリンクを作成することができます ;)
さらにリンクらしく見せたい場合は、アンダーラインをつけるとよいでしょう。
new Text("Hello Flutter!", style: new TextStyle(color: Colors.blue, decoration: TextDecoration.underline),)
と表示され、その結果