WebView
The WebView widget allows you to show the website content right inside your app. It's useful in a case where you don't want your users to leave your app to view the web page.
.png?alt=media&token=377e7c04-a31a-4870-8302-cd2380cbd3bf)
To add the WebView widget in your project:
- First, drag the WebView widget from the Base Elements tab (in the Widget Panel) or add it directly from the widget tree.
- Move to the Property Editor and scroll down to the WebView section.
- Find the Webview URL property and enter the URL for the web page. (e.g. https://flutterflow.io/,https://en.wikipedia.org/wiki/Main_Page)
.gif?alt=media&token=1753dd3b-a2d5-47cd-a92f-8fea97c427f6)
Sometimes when you add a WebView with a Web page URL, the web contents are not displayed. This can happen because the Web page might be configured not to be viewed inside the WebView. However, you can force the Web page to ignore this setting and continue to show in WebView. That's called bypassing domain restrictions.
To bypass the domain restrictions:
- Select the WebView from the widget tree or from the canvas area.
- Move to the Property Editor and scroll down to the WebView section.
- Checkmark the Bypass Domain Restrictions property (Click on it). The Web page starts displaying as soon as you enable this setting.
To test this setting, try changing the Webview URL to any web page that is not supported to be viewed inside the WebView (e.g https://unsplash.com/, https://www.facebook.com/)
To change the WebView size:
- Select the WebView from the widget tree or from the canvas area.
- Move to Property Editor, navigate to the Width and Height.
- There are three ways to set the dimensions:
- To set to an exact size, select PX and enter the desired values.
- To set the dimensions as a % of the screen size, select % and enter the desired value.
- To make the height or width of the WebView the screen's height or width, clear the Width and Height input boxes.
.gif?alt=media&token=b4fcebb2-410e-4069-9433-04d18f3ef057)
Last modified 1yr ago