How to create a custom webview for your FlutterFlow app

In FlutterFlow, go to Custom Code in the left Navigation Menu. Click the Pubspec Dependencies tab. Add webview_flutter with version ^4.4.0. Click Save. This makes the package available for import in any Custom Widget or Custom Action. FlutterFlow will download the package on next compile.

Go to Custom Code → Custom Widgets → click + Add. Name it CustomWebView. Set width parameter to double.infinity and height to 500 (or pass via parameter). In the code editor, import webview_flutter. Create a StatefulWidget. In initState(), initialize the WebViewController: set JavaScriptMode.unrestricted, set the NavigationDelegate to filter URLs (optional), and call loadRequest(Uri.parse(widget.url)). In build(), return WebViewWidget(controller: _controller).

1import 'package:webview_flutter/webview_flutter.dart';
2
3class CustomWebView extends StatefulWidget {
4  const CustomWebView({super.key, this.width, this.height, required this.url, this.onPageFinished});
5  final double? width;
6  final double? height;
7  final String url;
8  final Future Function(String url)? onPageFinished;
9
10  @override
11  State<CustomWebView> createState() => _CustomWebViewState();
12}
13
14class _CustomWebViewState extends State<CustomWebView> {
15  late final WebViewController _controller;
16  bool _isLoading = true;
17
18  @override
19  void initState() {
20    super.initState();
21    _controller = WebViewController()
22      ..setJavaScriptMode(JavaScriptMode.unrestricted)
23      ..setNavigationDelegate(NavigationDelegate(
24        onPageFinished: (url) {
25          setState(() => _isLoading = false);
26          widget.onPageFinished?.call(url);
27        },
28      ))
29      ..loadRequest(Uri.parse(widget.url));
30  }
31
32  @override
33  Widget build(BuildContext context) {
34    return SizedBox(
35      width: widget.width,
36      height: widget.height ?? 500,
37      child: Stack(
38        children: [
39          WebViewWidget(controller: _controller),
40          if (_isLoading)
41            const Center(child: CircularProgressIndicator()),
42        ],
43      ),
44    );
45  }
46}

In the Custom Widget editor, ensure you have these parameters defined: url (String, required) — the web page URL to load, and onPageFinished (Action, optional) — callback triggered when page finishes loading. Click Compile Code to verify. The url parameter lets you reuse this widget across pages with different URLs by passing the value from the parent.

Navigate to the page where you want the WebView. Drag your CustomWebView widget from the Widget Palette (under Custom Widgets). In the Properties Panel, set the url parameter — either hardcode a URL string or bind it to a Page State variable or Route Parameter for dynamic URLs. Set width to infinity (fills parent) and height to the desired pixel value. Wrap in an Expanded widget if it is inside a Column and should fill remaining space.

To receive data from the web page (e.g., a payment confirmation or form result), add a JavaScriptChannel to the controller in initState(). The channel creates a global JavaScript object that the web page can call: window.FlutterChannel.postMessage('data'). In the handler, parse the message and update Page State or trigger an Action Parameter callback.

1_controller
2  ..addJavaScriptChannel(
3    'FlutterChannel',
4    onMessageReceived: (message) {
5      // message.message contains the string from JS
6      widget.onDataReceived?.call(message.message);
7    },
8  );