WebView In Flutter:WebViews are mobile components where HTML content is render over a browser inside a mobile app. We will use the

webview_flutter plugin to show web pages in our app.

webview_flutter is a Flutter plugin. It provides a WebView widget on Android and iOS. WebView widget has the following properties.

Properties Of WebView

onWebViewCreated: This function is invoke once when the web view is created.

initialUrl: The initial URL of the web resource.

javascriptMode: It is used to enable JavaScript in the WebView.

javascriptChannels: The set of JavascriptChannels available to JavaScript code running in the WebView.

navigationDelegate: A delegate function that decides how to handle navigation actions.

onPageStarted: This function is invoke when a page starts loading.

onPageFinished: This function is invoke when a page has finished loading.

onProgress: This function invoked when a page loading started.

debuggingEnabled: It is use to Controls debugging in WebView by doing its value true but the default debuggingEnabled is false.

gestureNavigationEnabled: A Boolean value indicating whether horizontal swipe gestures will trigger back-forward list navigations. Its default value is false.

allowsInlineMediaPlayback: Inline playback of HTML5 videos controlled by this property on iOS. Android allows it by default. Its default value is false.

zoomEnabled: It indicates whether the WebView should support zooming using its on-screen zoom controls and gestures. Its default value is true.

backgroundColor: The background color of the WebView.

Step-1 -> Firstly, add the webview_flutter dependency in the pubspec.yaml file.

webview_flutter: ^4.2.3

Step– 2 -> Run ‘flutter pub get‘ command.

After this, we are ready to write our code.

main.dart

import 'package:flutter/material.dart';
import 'package:webview_flutter_demo/CommonWebView.dart';
 
void main() {
  runApp(const MyApp());
}
 
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: const MyHomePage(title: 'Flutter WebView'),
    );
  }
}
 
class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
 
  final String title;
 
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}
 
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
       leading: BackButton(
              onPressed: () {
                backNavigationHandler();
              },
            ),
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            MaterialButton(
              color: Colors.blue,
              onPressed: () {
                Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => CommonWebView(
                            url: "https://flutter.dev", title: "Flutter")));
              },
              child: Text(
                'https://flutter.dev',
                style: TextStyle(fontSize: 16),
              ),
            ),
            MaterialButton(
              color: Colors.blue,
              onPressed: () {
                Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => CommonWebView(
                            url:
                                "https://en.wikipedia.org/wiki/Flutter_(software)",
                            title: "Wikipedia")));
              },
              child: Text(
                "https://en.wikipedia.org/wiki/Flutter",
                style: TextStyle(fontSize: 16),
              ),
            )
          ],
        ),
      ),
    );
  }
}

Full Code:WebView In Flutter

import 'package:flutter/material.dart';
// don't forget this line
import 'package:webview_flutter/webview_flutter.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.blueGrey),
      title: "CrackerWorld",
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key? key}) : super(key: key);

  // Create a webview controller
  final _controller = WebViewController()
    ..setJavaScriptMode(JavaScriptMode.unrestricted)
    ..setNavigationDelegate(
      NavigationDelegate(
        onProgress: (int progress) {
          // print the loading progress to the console
          // you can use this value to show a progress bar if you want
          debugPrint("Loading: $progress%");
        },
        onPageStarted: (String url) {},
        onPageFinished: (String url) {},
        onWebResourceError: (WebResourceError error) {},
        onNavigationRequest: (NavigationRequest request) {
          return NavigationDecision.navigate;
        },
      ),
    )
    ..loadRequest(Uri.parse("https://www.youtube.com/"));

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Webview '),
      ),
      body: SafeArea(
          //width: double.infinity,
          // the most important part of this example
          child: WebViewWidget(
        controller: _controller,
      )),
    );
  }
}

For more : To know about Flutter Launcher icon and App Rename