FlutterFlow Docs
Search…
⌃K

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.

Adding WebView To Your Project

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)

Bypass Domain Restrictions

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/)

Changing the properties

The Properties Panel can be used to customize the behavior of your widget.

Add Padding

Here are the instructions on how to add padding.

Adjust The Alignment

Here are the instructions on adjusting the alignment.

Changing Size

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.

Show/Hide WebView

Please find the instructions to show/hide the widget here
Last modified 9mo ago