Flutter - 如何在 WebViewScaffold 中加载本地 HTML 文件?
Flutter - How to load a local HTML file in WebViewScaffold?
我正在尝试在我的 WebViewScaffold
中加载本地 HTML 文件,但是我没有插件 webview_flutter
提供的 onWebViewCreated
回调。我不能使用该依赖项,因为我想访问 webview_flutter
不提供的 webview 回调的状态侦听器。谁能告诉我如何加载本地文件?
这是我当前的实现 -
final Set<JavascriptChannel> jsChannels = [
JavascriptChannel(
name: 'Print',
onMessageReceived: (JavascriptMessage message) {
print(message.message);
}),
].toSet();
void main() {
WidgetsFlutterBinding.ensureInitialized();
runApp(MyApp());
}
class MyApp extends StatelessWidget {
final flutterWebViewPlugin = FlutterWebviewPlugin();
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter WebView Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
routes: {
'/': (_) => const MyHomePage(),
'/widget': (_) {
return WebviewScaffold(
url: selectedUrl, // How to load a local file here?
javascriptChannels: jsChannels,
mediaPlaybackRequiresUserGesture: false,
appBar: AppBar(
title: const Text('Widget WebView'),
),
withZoom: true,
withLocalStorage: true,
hidden: true,
initialChild: Container(
color: Colors.redAccent,
child: const Center(
child: Text('Waiting.....'),
),
),
},
},
);
}
}
您可以从用户的 phone 加载本地 HTML 文件,如下所示:
...
url: Uri.dataFromString(
File('filePath').readAsStringSync(),
mimeType: 'text/html',
).toString(),
...
如果您想从您的应用程序包中打开一个 html 文件(资产文件夹中的一个 html 文件),您可以这样做:
...
url: Uri.dataFromString(
await rootBundle.loadString('assets/index.html'),
mimeType: 'text/html',
).toString(),
...
注意:您必须像任何其他资产一样在 pubspec.yaml
资产部分声明 html 文件。
我正在尝试在我的 WebViewScaffold
中加载本地 HTML 文件,但是我没有插件 webview_flutter
提供的 onWebViewCreated
回调。我不能使用该依赖项,因为我想访问 webview_flutter
不提供的 webview 回调的状态侦听器。谁能告诉我如何加载本地文件?
这是我当前的实现 -
final Set<JavascriptChannel> jsChannels = [
JavascriptChannel(
name: 'Print',
onMessageReceived: (JavascriptMessage message) {
print(message.message);
}),
].toSet();
void main() {
WidgetsFlutterBinding.ensureInitialized();
runApp(MyApp());
}
class MyApp extends StatelessWidget {
final flutterWebViewPlugin = FlutterWebviewPlugin();
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter WebView Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
routes: {
'/': (_) => const MyHomePage(),
'/widget': (_) {
return WebviewScaffold(
url: selectedUrl, // How to load a local file here?
javascriptChannels: jsChannels,
mediaPlaybackRequiresUserGesture: false,
appBar: AppBar(
title: const Text('Widget WebView'),
),
withZoom: true,
withLocalStorage: true,
hidden: true,
initialChild: Container(
color: Colors.redAccent,
child: const Center(
child: Text('Waiting.....'),
),
),
},
},
);
}
}
您可以从用户的 phone 加载本地 HTML 文件,如下所示:
...
url: Uri.dataFromString(
File('filePath').readAsStringSync(),
mimeType: 'text/html',
).toString(),
...
如果您想从您的应用程序包中打开一个 html 文件(资产文件夹中的一个 html 文件),您可以这样做:
...
url: Uri.dataFromString(
await rootBundle.loadString('assets/index.html'),
mimeType: 'text/html',
).toString(),
...
注意:您必须像任何其他资产一样在 pubspec.yaml
资产部分声明 html 文件。