2023年8月5日
開発環境
OS:Windows 11
SDK:VS Code + flutter 3.7.5
概要
Webサイトを表示します。
Webサイトを表示する方法
flutterでWebサイトを表示する方法は2パターンあります。
Webブラウザを起動させて表示する方法と
ウィジェットWebViewを用意し、ウィジェットに表示させる方法です。
パターン1.Webブラウザを起動させて表示する
まずはパッケージ、url_launcher(ver 6.1.11)を導入します。
パッケージ詳細はこちら。
コマンド入力する場合は、プロジェクトフォルダまで移動した後、下記を入力します。
flutter pub add url_launcher

あとは、launchUrlString(URL)をコールするだけです。
今回は、関数化し、ボタンタップ時に実行させるようにしました。
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher_string.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
void _openUrl() async {
const url = 'https://messageexchanger-fa3e1.web.app';
if (await canLaunchUrlString(url)) {
await launchUrlString(url);
} else {
throw 'can not access this url.';
}
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
width: double.infinity,
height: double.infinity,
alignment: Alignment.center,
child: Column(
children: <Widget>[
Expanded(
flex: 1,
child: Container(
alignment: Alignment.center,
child:Image.asset('images/sample.jpg'),),),
Expanded(
flex :1,
child: Container(
alignment: Alignment.center,
child: ElevatedButton(
onPressed: () async {
_openUrl();
},
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5),
),
),
child: const Text('Web'),
),))
],
),
),
);
}
}
Chromeで実行した結果、Webサイトが表示されました。


Androidで実行する場合は、AndroidManifest.xmlにqueries定義を追加する必要があります。
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.sample">
<queries>
<intent>
<action android:name="android.intent.action.VIEW" />
<data android:scheme="https" />
</intent>
</queries>
<application
android:label="sample"
android:name="${applicationName}"
android:icon="@mipmap/ic_launcher">
・・・


パターン2.ウィジェットWebViewを用意し、ウィジェットに表示させる
まずはパッケージ、webview_flutter(ver4.2.2)を導入します。
パッケージ詳細はこちら。
コマンド入力する場合は、プロジェクトフォルダまで移動した後、下記を入力します。
flutter pub add webview_flutter

あとは、ScaffoldのbodyにWebViewWidgetを配置するだけです。
今回は、メイン画面とサブ画面の2画面を作成し、メイン画面でボタンタップするとWebViewWidgetを配置したサブ画面に遷移させるようにしてみました。
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
class SubPage extends StatelessWidget {
const SubPage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body:WebViewWidget(
controller: WebViewController()
..setJavaScriptMode(JavaScriptMode.unrestricted)
..loadRequest(Uri.parse("https://messageexchanger-fa3e1.web.app"))
),
);
}
}
Androidアプリで実行した結果、Webサイトが表示されました。


WebViewの注意点

webview_flutterのパッケージ詳細を見ると
サポート対象機種が、AndroidとiOSとなっています。
サポート対象に記載のないChromeで表示するとサブ画面表示のタイミングでダウンしました。

Chromeでは使用できないようです。
今回は以上です。