Wie öffne ich einen Webbrowser (URL) aus meinem Flutter-Code?

Antworten:

137

TL; DR

Dies ist jetzt als Plugin implementiert

const url = "https://flutter.io";
if (await canLaunch(url))
  await launch(url);
else 
  // can't launch url, there is some error
  throw "Could not launch $url";

Vollständiges Beispiel:

import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';

void main() {
  runApp(new Scaffold(
    body: new Center(
      child: new RaisedButton(
        onPressed: _launchURL,
        child: new Text('Show Flutter homepage'),
      ),
    ),
  ));
}

_launchURL() async {
  const url = 'https://flutter.io';
  if (await canLaunch(url)) {
    await launch(url);
  } else {
    throw 'Could not launch $url';
  }
}

In pubspec.yaml

dependencies:
  url_launcher: ^5.4.2

Spezielle Charaktere:

Wenn der urlWert Leerzeichen oder andere Werte enthält, die jetzt in URLs zulässig sind, verwenden Sie

Uri.encodeFull(urlString)oder Uri.encodeComponent(urlString)und übergeben Sie stattdessen den resultierenden Wert.

Günter Zöchbauer
quelle
2
Beachten Sie, dass Sie benötigen entweder ein neues flattern Projekt erstellen und Ihre Sachen Flutter spezifischen kopieren Sie ( lib, pubspec.yamlusw.) oder umgekehrt die plattformspezifischen Ordner in Ihrem alten Projekt aktualisieren für diese Arbeit.
David.mihola
3
Hinweis: Vergessen Sie nicht url_launcher: ^3.0.2, die pubspec.yaml
hbhakhra
Was meinst du mit "zu vorhandenen Apps hinzugefügt"? Möglicherweise sind Ihre Dateien in android/oder ios/veraltet. Wenn es in einer neuen App funktioniert, vergleichen Sie die Dateien und aktualisieren Sie sie in Ihrem Projekt. Sie können diese Verzeichnisse auch löschen und flutter create .manuelle Änderungen ausführen und anschließend erneut anwenden.
Günter Zöchbauer
@hbhakhra Jetzt url_launcher: ^ 5.0.2 Überprüfe weiter.
Pratik Butani
1
Wie öffne ich einen Link für flutter_web, wo das url_launcher-Plug-In nicht verfügbar ist?
Bianca
4

Für Flatter:

Wie oben von Günter Zöchbauer beschrieben

Für Flutter Web:

import 'dart:html' as html;

Dann benutze:

html.window.open(url, name);

Stellen Sie sicher, dass Sie ausgeführt werden, flutter cleanwenn das importProblem nicht behoben werden kann.

Rohan Taneja
quelle
Dies ist nicht für Flattern Android oder
iOS
3

Wenn Sie url_launcher verwenden möchten, verwenden Sie es bitte in diesem Formular

environment:
  sdk: ">=2.1.0 <3.0.0"

dependencies:
  url_launcher: ^5.0.2
  flutter:
    sdk: flutter

Diese Antwort gilt auch für absolute Anfänger: Sie denken hinter dem Flattern sdk. Nein, das war ein Misserfolg. Die Pakete waren Extras und nicht im Flattern Sdk. Dies waren sekundäre Pakete (einzelne kleine Framework-Helfer).

edgar wahl
quelle
3

Verwenden des URL Launcher-Plugins url_launcher

Um eine Webseite zu starten, müssen wir eine asynchrone Funktion sein und Folgendes tun:

launchURL(String url) async {
    if (await canLaunch(url)) {
      await launch(url);
    } else {
      throw 'Could not launch $url';
    }
  }

Wenn wir möchten, dass sowohl iOS als auch Android die Webseite in der Anwendung (als WebView) öffnen, fügen Sie Folgendes hinzu forceWebView: true:

 launchURL(String url) async {
    if (await canLaunch(url)) {
      await launch(url, forceWebView: true);
    } else {
      throw 'Could not launch $url';
    }
 }
   

Und nenne es so

onTap: () {
    const url = 'https://google.com';
    launchURL(url);
}

Geben Sie hier die Bildbeschreibung ein

Paresh Mangukiya
quelle
1

Nach einiger Suche kann dieses Problem über die hier aufgeführten Anweisungen behoben werden: https://groups.google.com/forum/#!topic/flutter-dev/J3ujgdOuG98

Das Obige UrlLauncherist nicht mehr verwendbar.

TaylorR
quelle
Sie haben also nur gedacht: Diese Verbindung dort ist unterbrochen. Lassen Sie uns also eine andere Antwort aufstellen , die nur einen Link enthält.
GhostCat
Während dies theoretisch die Frage beantworten kann, wäre es vorzuziehen , die wesentlichen Teile der Antwort hier aufzunehmen und den Link als Referenz bereitzustellen.
GhostCat