HTMLファイルを表示したい時がある。
（ネットまで接続させたくなく、リソース上の固定HTMLファイルでよい場合。）
また、同時にダークモードにも対応したい場合は以下のパッケージが便利。
simple_dark_mode_webview使い方は以下の通り。
import 'dart:convert';
import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:simple_dark_mode_webview/simpledarkmodewebview.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Simple Dark Mode Webview Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
// ダークテーマを設定する
darkTheme: ThemeData(
brightness: Brightness.dark,
primarySwatch: Colors.green,
),
home: MyHomePage(title: 'Simple Dark Mode Webview Demo'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
color: Colors.grey,
child: Text(
'This widget is useful specially when you want to show a static HTML file!!!',
),
),
Expanded(
child: FutureBuilder(
// 固定ファイルを読み込む。
future: rootBundle.loadString('lib/assets/sample_policy.html'),
builder: (context, snapshot) {
if(!snapshot.hasData){
return Text('loading...');
} else {
// ダークモード対応WebViewを使用
return SimpleDarkModeAdaptableWebView(
snapshot.data,
// (例) HTMLファイルのテキストエンコーディングを指定
encoding: Encoding.getByName('utf-8'),
// (例) WebViewへの操作(ジェスチャー)も登録可能
gestureRecognizers: Set()
..add(Factory(() =>
TapGestureRecognizer()
..onTapDown = (tap) {
final snackBar = SnackBar(content: Text('Webivew was tapped down.'));
Scaffold.of(context).showSnackBar(snackBar);
}
)
),
);
}
},
)
)
],
),
),
);
}
}
