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

Flutterアプリに表示するハイパーリンクを作りたいのですが、どうすればいいですか？

ハイパーリンクは Text やそれに類するテキストビューに埋め込む必要があります。

最後に買った本は this` です。

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

プログラミング
flutter
24日 4月 2017 в 8:40
まだビューはありません

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 ウィジェットにスタイルを与えて、リンクのように見せることができます。

Update

この問題を少し調べた後、あなたが要求した '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つの単語をハイライトして、そこからハイパーリンクを作成することができます ;)

Shea Belsky
編集した答え 17日 3月 2019 в 4:31
解説 (6)

Flutterはハイパーリンクのサポートを内蔵していませんが、自分で偽造することができます。Galleryのdrawer.dart]1に例があります。

ハイパーリンク2。 [!]ブラウザ]3。

xip
編集した答え 28日 5月 2018 в 9:41
解説 (5)

さらにリンクらしく見せたい場合は、アンダーラインをつけるとよいでしょう。

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

と表示され、その結果

[ここに画像の説明を入力][1]。

解説 (0)