📱
flutter：WebViewをインストール
インストール・インポート
インストール
$ flutter pub add webview_flutter
インポート
import 'package:webview_flutter/webview_flutter.dart';
コード例
StatefulWidgetでのコード記入例を挙げます．
- Stateクラス内でWebViewWidgetControllerのインスタンスを作成
var loadingPercentage = 0;
var isLoading = true;
var hasError = false;
controller = WebViewController()
..setNavigationDelegate(NavigationDelegate(onPageStarted: (url) {
setState(() {
loadingPercentage = 0;
isLoading = true;
hasError = false;
});
}, onProgress: (progress) { // ローディング時
setState(() {
loadingPercentage = progress;
});
}, onPageFinished: (url) { // ローディングが終わった時
setState(() {
loadingPercentage = 100;
isLoading = false;
});
}, onWebResourceError: (error) { // エラーが起こった時
setState(() {
debugPrint(error.toString());
hasError = true;
isLoading = false;
});
}))
..setJavaScriptMode(JavaScriptMode.unrestricted)
..loadRequest(
// ここに表示したいサイトのURLを設定
Uri.parse(""),
);
- WebViewWidgetにcontrollerインスタンスを渡す．
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: PageTitle(pageTitleName: widget.recipeDishName),
backgroundColor: CommonColors.primaryColor,
),
body: hasError
// エラーが発生した場合の表示
? Container(
color: CommonColors.pageBackgroundColor,
child: Center(
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
const Gap(20),
const Text(
'ページの読み込みに失敗しました。',
style: TextStyle(color: Colors.red, fontSize: 20),
),
const Gap(20),
ElevatedButton(
onPressed: () {
setState(() {
hasError = false;
isLoading = true;
});
controller.loadRequest(Uri.parse(widget.recipeUrl));
},
child: const Text('再度ページを読み込む'),
),
],
)),
)
// エラーが発生していない場合の表示
: Stack(
children: [
WebViewWidget(
controller: controller,
),
if (isLoading)
LinearProgressIndicator(
value: loadingPercentage / 100.0,
),
],
),
);
}
参考資料
Discussion