import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'dart:io' show Platform;
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// EN: This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'WebView Vue Example',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const WebViewVuePage(),
);
}
}
class WebViewVuePage extends StatefulWidget {
const WebViewVuePage({super.key});
@override
State<WebViewVuePage> createState() => _WebViewVuePageState();
}
class _WebViewVuePageState extends State<WebViewVuePage> {
late final WebViewController _controller;
@override
void initState() {
super.initState();
// EN: Initialize WebViewController and set up navigation delegate and JavaScript mode
_controller = WebViewController()
..setJavaScriptMode(JavaScriptMode.unrestricted)
..setNavigationDelegate(
NavigationDelegate(
onProgress: (int progress) {
// EN: You can update loading progress here if needed
},
onPageStarted: (String url) {
// EN: Called when a page starts loading
},
onPageFinished: (String url) {
// EN: Called when a page finishes loading
},
onWebResourceError: (WebResourceError error) {
// EN: Handle web resource errors here
},
),
);
// EN: Load local Vue.js app from assets/web/index.html for both Android and iOS
if (Platform.isAndroid) {
// EN: Android local file path
_controller.loadRequest(
Uri.parse('file:///android_asset/flutter_assets/assets/web/index.html'),
);
} else if (Platform.isIOS) {
// EN: iOS local file path
_controller.loadFlutterAsset('assets/web/index.html');
}
}
@override
Widget build(BuildContext context) {
// EN: Show a WebView with local Vue.js app
return Scaffold(
appBar: AppBar(
title: const Text('Vue WebView...'),
),
body: WebViewWidget(controller: _controller),
);
}
}
