149 votes

Comment créer un lien hypertexte dans un widget Flutter ?

Je voudrais créer un lien hypertexte à afficher dans mon application Flutter.

Le lien hypertexte doit être intégré dans un Text ou des vues de texte similaires comme :

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

Un conseil pour faire cela ?

223voto

Rainer Wittmann Points 2276

Il suffit d'enrouler un InkWell autour d'un widget Texte et de fournir un UrlLauncher (de la bibliothèque de services) à l'attribut onTap. Installez UrlLauncher en tant que paquet Flutter avant de l'utiliser ci-dessous.

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')
          ),
        ),
      ),
    );
  }
}

Vous pouvez fournir un style au widget Texte pour qu'il ressemble à un lien.

Mise à jour

Après avoir étudié un peu le problème, j'ai trouvé une solution différente pour mettre en place les hyperliens "en ligne" que vous avez demandés. Vous pouvez utiliser la fonction Widget RichText avec joint 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');
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

De cette façon, vous pouvez réellement mettre en évidence un mot et en faire un lien hypertexte ;)

8 votes

UrlLauncher ne fait plus partie de flutter, il a été déplacé vers un plugin et une API modifiés .

9 votes

Nous devons également ajouter des importations : import 'package:flutter/gestures.dart' ; import 'package:url_launcher/url_launcher.dart' ;

7 votes

Vous ne vous occupez pas du cycle de vie de votre TapGestureRecognizer correctement. Vous devez appeler dispose() lorsque RichText n'est plus utilisé. Voir ici : api.flutter.dev/flutter/painting/TextSpan/recognizer.html

79voto

Collin Jackson Points 29995

Flutter n'a pas de support intégré pour les hyperliens, mais vous pouvez le faire vous-même. Il y a un exemple dans le Tiroir de la galerie.dart . Ils utilisent un RichText contenant un widget de couleur TextSpan qui a une recognizer pour gérer les robinets :

        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,
              ),
            ],
          ),

hyperlink browser

0 votes

Merci. Mais ce n'est pas vraiment ce que je recherche : Je cherche au-delà de la navigation in-app.

0 votes

Je ne suis pas sûr de ce que vous voulez dire par "regarder au-delà de la navigation in-app". Voulez-vous que le lien ouvre un navigateur ?

0 votes

Oui, un lien ou un élément similaire qui peut être cliqué pour s'ouvrir dans un navigateur.

50voto

CopsOnRoad Points 4705

Vous pouvez envelopper votre Text sur GestureDetector et le clic de poignée dans onTap() .

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
  }
)

enter image description here

0 votes

Vous avez raison, votre solution a moins de lignes que celle des autres, mais Inkwell est le widget pour ce travail spécifique, donc au moins sémantiquement je pense que c'est la meilleure solution.

3 votes

@dmarquina Oui, vous pouvez utiliser InkWell au lieu de GestureDetector .

8voto

bartektartanus Points 2472

Si vous voulez que cela ressemble encore plus à un lien, vous pouvez ajouter du soulignement :

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

et le résultat :

enter image description here

0 votes

Il n'est pas cliquable !

0 votes

Puis enveloppez-le avec le widget Bouton. :)

1 votes

Ce n'est pas la réponse à la question, mais un commentaire à la réponse de quelqu'un. De plus, le bouton n'est pas un hyperlien de texte en ligne.

1voto

Fellipe Sanches Points 555

Une autre façon (ou non) de mettre des liens cliquables dans votre application (pour moi, c'est comme ça que ça marche) :

1 - Ajoutez le paquet url_launcher dans votre fichier pubspec.yaml

(la version 5.0 du paquet n'a pas bien fonctionné pour moi, j'utilise donc la 4.2.0+3).

dependencies:
  flutter:
    sdk: flutter
  url_launcher: ^4.2.0+3

2 - Importez-le et utilisez-le comme ci-dessous.

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';
    }
  }
}

0 votes

Si vous avez besoin d'un lien hypertexte entre deux textes, vous pouvez utiliser une balise FlatButton avec les mêmes couleurs de fond et de texte que le reste de vos textes, donc mettez-le en forme avec TextDecoration.underline comme le bartektartanus l'a montré ci-dessus...

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X