MENU

【Flutter Web】url_launcherを使わずにリンクを作成する方法

Flutter
記事内に商品プロモーションが含まれる場合があります

Flutter webでurl_launcheパッケージがうまく効かないことがあり、別の方法で対応できたのでそのやり方を紹介します。

目次

Flutter webアプリでリンクを作成するやり方

まず、webディレクトリ内のindex.htmlファイルの<head>セクション内に次のスクリプトを追加します。

<script>
  function openLink(url) {
    window.open(url, '_blank');
  }
</script>

このスクリプトは、JavaScriptのwindow.open関数を使用して、指定されたURLを新しいウィンドウで開くためのものです。

次に、FlutterのコードでこのJavaScript関数を呼び出します。

以下はその例です。

import 'package:flutter/material.dart';
import 'dart:js' as js;

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('URL Launcher Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // GoogleのWebサイトにリンク
              js.context.callMethod('openLink', ['https://www.google.com']);
            },
            child: Text('Open Google'),
          ),
        ),
      ),
    );
  }
}

このコードでは、dart:jsパッケージを使用してJavaScriptの関数を呼び出しています。

openLink関数を呼び出すと、指定したURLが新しいウィンドウで開かれます。

Flutter
Share

Comment

コメントする

目次