While rendering the webview in Flutter App, if there are any links to navigate it should navigate to respective link using webview_flutter 4.0.2

Question

While rendering the webview in Flutter App, if there are any links to navigate it should navigate to respective link using webview_flutter 4.0.2

80 Views Asked by Tux Ficus Mercury At 18 January 2024 at 13:28

This is my code:

import 'dart:io';
import 'dart:ui';
 
import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:webview_flutter/webview_flutter.dart';
 
class MyWidget extends StatefulWidget {
  final MyWidgetModel model;
  const MyWidget({Key? key, required this.model}) : super(key: key);
 
  @override
  State<MyWidget> createState() => _MyWidgetState();
}
 
class _MyWidgetState extends State<MyWidget> {
  late final WebViewController _controller;
 
  double webViewHeight = 10;
  bool loading = true;
 
  @override
  void initState() {
    super.initState();
    _controller = WebViewController()
      ..setNavigationDelegate(NavigationDelegate(onPageFinished: (_) {
        updateHeight();
      }));
 
    initWebView();
  }
 
  void initWebView() async {
    String htmlString = '';
 
    final startIndex = widget.model.page?.indexOf('<head>') ?? -1;
    if (startIndex > -1) {
      htmlString = widget.model.page!;
    } else {
      htmlString = '''
      <!DOCTYPE html>
      <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      </head>
      <body>
      ${widget.model.page ?? ''}
      </body>
      </html>
      ''';
    }
    await _controller.loadHtmlString(htmlString);
    await _controller.setJavaScriptMode(JavaScriptMode.unrestricted);
    _controller.enableZoom(true);
  }
 
  void updateHeight() async {
    final screenHeight = MediaQuery.of(context).size.height;
    final bottomPadding = MediaQueryData.fromWindow(window).padding.bottom;
    final topPadding = MediaQueryData.fromWindow(window).padding.top;
    const appBarHeight = 84;
    final bottomBarPadding = Platform.isIOS ? 70 : 90;
    final minimumHeight = screenHeight -
        bottomBarPadding -
        bottomPadding -
        topPadding -
        appBarHeight;
    webViewHeight = minimumHeight;
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      setState(() {
        loading = false;
      });
    });
  }
 
  @override
  Widget build(BuildContext context) {
    if (widget.model.description == 'web_view') {
      return Container(
        // height: MediaQuery.of(context).size.height - 250,
        constraints: BoxConstraints(minHeight: 0, maxHeight: webViewHeight),
        child: Stack(
          children: [
            WebViewWidget(
              controller: _controller,
              
            ),
            if (loading)
              const Positioned.fill(
                  child: CircularProgressIndicator(
              ))
          ],
        ),
      );
    }
  }
}

I just want to navigate to the link which are present in the webview. I have tried the above code.i

_{I have been using the webview_flutter 4.0.2. Here is the link
https://pub.dev/packages/webview_flutter
A Flutter plugin that provides a WebView widget.
Usage:
You can now display a WebView by:

Instantiating a WebViewController.
Passing the controller to a WebViewWidget.}

How can I solve this?

Original Q&A

There are 1 best solutions below

**Jaimin Raval** · Answer 1 · 2024-01-19T07:10:43.363000

Please check out webview package documentation. it is mentioned about navigation in webview's.

Example :

    @override
  void initState() {
    loadWebView();
    super.initState();
  }

  void loadWebView() {
    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setBackgroundColor(const Color(0x00000000))
      ..setNavigationDelegate(
        NavigationDelegate(
          onProgress: (int progress) {
            // Update loading bar.
          },
          onPageStarted: (String url) {},
          onPageFinished: (String url) {},
          onWebResourceError: (WebResourceError error) {},
          onNavigationRequest: (NavigationRequest request) {
            if (request.url.startsWith('https://www.youtube.com/')) {
              return NavigationDecision.prevent;
            }
            return NavigationDecision.navigate;
          },
        ),
      )
      ..loadRequest(Uri.parse('https://flutter.dev'));
  }

i hope it will help you.

While rendering the webview in Flutter App, if there are any links to navigate it should navigate to respective link using webview_flutter 4.0.2

This is my code:

There are 1 best solutions below

Related Questions in FLUTTER

Related Questions in DART

Related Questions in CROSS-PLATFORM

Related Questions in DART-PUB

Related Questions in WEBVIEW-FLUTTER

Trending Questions

Popular # Hahtags

Popular Questions