☰

Flutterウィジェットでハイパーリンクを作成するには？質問する

tag-icon • tag-icon flutter
Flutterウィジェットでハイパーリンクを作成するには？質問する

Flutter アプリに表示するハイパーリンクを作成したいと思います。

ハイパーリンクは、Text次のようなテキスト ビューまたは類似のテキスト ビューに埋め込まれる必要があります。

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

これを行うためのヒントはありますか?

ベストアンサー1

InkWell を Text ウィジェットの周りにラップし、UrlLauncher (サービス ライブラリから) を onTap 属性に指定します。以下で使用する前に、 UrlLauncher を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('UrlLauncher'),
        ),
        body: new Center(
          child: new InkWell(
              child: new Text('Open Browser'),
              onTap: () => launch('https://docs.flutter.io/flutter/services/UrlLauncher-class.html')
          ),
        ),
      ),
    );
  }
}

テキスト ウィジェットにスタイルを指定して、リンクのように見せることができます。

アップデート

この問題を少し調べた後、ご要望の「インライン」ハイパーリンクを実装する別の解決策を見つけました。囲まれたTextSpansを含むRichText ウィジェットを使用できます。

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 つの単語を強調表示し、そこからハイパーリンクを作成できます ;)

おすすめ記事