During the development of our IoT Plant Monitor application, I wanted to show a webpage inside the Flutter application that’s how I find about the FLutter WebView plugin. But I wanted to limit the URL accessibility to only the sub-pages of diyusthad.com and open external links in the default browser of the user device so I googled and find some solution and I’m sharing it here for all those who are facing the same issue.
WebView(
initialUrl: 'https://diyusthad.com/iotplantmonitor',
navigationDelegate: (navigation) {
if (!(navigation.url.startsWith('https://diyusthad.com/'))) {
final Uri url = Uri.parse(navigation.url);
debugPrint(navigation.url);
_launchUrl(url);
return NavigationDecision.prevent;
}
return NavigationDecision.navigate;
},
),
);
}
Future _launchUrl(url) async {
if (!await launchUrl(url,mode: LaunchMode.externalApplication)) {
throw 'Could not launch $url';
}
}
}
Disable Zoom
I also wanted to disable the zoom option to achieve that we can set zoomEnabled to false
WebView(
zoomEnabled: false,
......
),
Packages Used
These are the packages and their version used while writing this article.