Flutter webview desktop mode

by

Flutter WebView in Desktop Mode

Flutter provides the WebView plugin to embed web content within your Flutter app. By default, the WebView plugin uses the system browser to render the web content. However, if you want to use a desktop WebView instead, you can achieve it by following these steps:

  1. Create a new Flutter project or open an existing one.
  2. Open the pubspec.yaml file and add the ‘webview_flutter’ dependency:
  
dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^2.0.0
  1. Run flutter pub get command to fetch the dependency.
  2. Create a new Dart file (e.g., webview_widget.dart) and import the necessary packages:
  
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

Now, let’s create a widget that renders the WebView in desktop mode:

  
class DesktopWebView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return WebView(
      initialUrl: 'https://example.com',
      javascriptMode: JavascriptMode.unrestricted,
      initialMediaPlaybackPolicy: AutoMediaPlaybackPolicy.always_allow,
    );
  }
}

In the above code snippet, we defined a StatelessWidget, DesktopWebView, which renders a WebView. We set the initialUrl property to the desired web page URL, the javascriptMode property to JavascriptMode.unrestricted to enable JavaScript execution in the WebView, and the initialMediaPlaybackPolicy property to AutoMediaPlaybackPolicy.always_allow to allow autoplaying media.

Next, to use this widget, add it to your desired screen or widget tree:

  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Desktop WebView Example'),
        ),
        body: Center(
          child: DesktopWebView(),
        ),
      ),
    );
  }
}

In the above code snippet, we added the DesktopWebView widget as the child of the Center widget, which is then used as the body in the Scaffold widget.

Once you run the app, you will see the web page rendered within the desktop WebView.

Remember to use the appropriate imports and make sure to follow the plugin documentation for any additional configuration or customization needed.

Leave a comment