How can i migrate my code from flutter_webview_plugin to webview_flutter?

Question

I'm trying to update an old flutter project. But i'm having some problems with the flutter_webview_plugin, so i want to migrate to webview_flutter. The problem i have is that i don't know how to adapt the code so it can do the same.

Here is the flutter_webview_plugin code, the bold lines are the ones i need to change.

void initState() {
    super.initState();
final flutterWebviewPlugin = flutterWebviewPlugin(); //Need to change 
flutterWebviewPlugin.onUrlChanged.listen((String url) {//Need to change 
      if (url.contains("https://www.laplata.com.py/")) {
        final urlResult = Uri.parse(url);
        flutterWebviewPlugin.close();
        Navigator.of(context).pushReplacementNamed('pay', arguments: urlResult.queryParameters);
      }
    });
  }

Widget build(BuildContext context) {
    
    final urlPagopar = ModalRoute.of(context)?.settings.arguments;
    final size = MediaQuery.of(context).size;

    if ( urlPagopar != null ) {
      return  SafeArea(
        child: WebviewScaffold( //Need to change
          hidden: true,
          initialChild: Center(
            child: Container(
              margin: const EdgeInsets.symmetric(horizontal: 50),
              decoration: const BoxDecoration(
                image: DecorationImage( image: AssetImage('assets/loading2.gif') )
              )
            )
          ),
          url: urlPagopar as String,
        ),
      ); 
    }
    else {
      return Scaffold(
        body: CustomScrollView(
          slivers: [
            SliverPersistentHeader(
              floating: true,
              pinned: true,
              delegate: SliverCustomHeaderDelegate(
                minheight: size.height * 0.15,
                maxheight: size.height * 0.15,
                child: _cabecera()
              )
            ),
            SliverList(
              delegate: SliverChildListDelegate([
                SizedBox(
                  height: size.height * 0.85,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      const Spacer(),
                      Container( padding: const EdgeInsets.symmetric(horizontal: 20), height: 300, child: SvgPicture.asset( 'assets/error.svg')),
                      const SizedBox(height: 20),
                      const Text("UPS!!!... Ocurrió un error inesperado", style: TextStyle(fontFamily: "Montserrat", fontWeight: FontWeight.bold, fontSize: 18)),
                      const Spacer(),
                      const Text("Vuelva a intentarlo o comuniquese con nuestro contact center", textAlign: TextAlign.center, style: TextStyle(fontFamily: "Montserrat", fontSize: 18)),
                      const SizedBox(height: 20)
                    ],
                  ),
                ),
              ])
            )
          ],
        )
      );
    }
  }

VRI - Opcjonalny - Optional · Accepted Answer · 2023-06-17 22:54:02Z

2

My opinion is this: it is better to use flutter_inappwebview https://inappwebview.dev/

answered Jun 17, 2023 at 22:54

VRI - Opcjonalny - Optional

415 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

magesh magi · Accepted Answer · 2023-03-29 14:18:31Z

try this below i just migrated today.

import 'package:webview_flutter/webview_flutter.dart';
import 'package:webview_flutter_android/webview_flutter_android.dart';
import 'package:webview_flutter_wkwebview/webview_flutter_wkwebview.dart';
late final WebViewController _controller; 
bool loading=true;

@override
void initState() {
super.initState();   
late final PlatformWebViewControllerCreationParams params;
  if (WebViewPlatform.instance is WebKitWebViewPlatform) {
     params = WebKitWebViewControllerCreationParams(
     allowsInlineMediaPlayback: true,
     mediaTypesRequiringUserAction: const <PlaybackMediaTypes>{},
     );
    } else {
      params = const PlatformWebViewControllerCreationParams();
    }
  final WebViewController controller =
  WebViewController.fromPlatformCreationParams(params); 
  controller
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..setBackgroundColor(const Color(0x00000000))
  ..setNavigationDelegate(
    NavigationDelegate(
      onProgress: (int progress) {
        loading = true;
        debugPrint('WebView is loading (progress : $progress%)');
      },
      onPageStarted: (String url) {
        debugPrint('Page started loading: $url');
    
        setState(() {});
      },
      onPageFinished: (String url) {
        print("url $url"); 
        loading=false;           
        setState(() {});
        
      },
      onWebResourceError: (WebResourceError error) {
       loading=false;
        setState(() {});
      },
      onNavigationRequest: (NavigationRequest request) {          
      if (request.url.contains("https://www.laplata.com.py/")) {
           final urlResult = Uri.parse(url);        
            Navigator.of(context).pushReplacementNamed('pay', arguments: urlResult.queryParameters);      
          }            
       
      },
    ),
  )
  ..addJavaScriptChannel(
    'Toaster',
    onMessageReceived: (JavaScriptMessage message) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text(message.message)),
      );
    },
  )
  ..loadRequest(Uri.parse(urlPagopar)); // url   
  if (controller.platform is AndroidWebViewController) {
    AndroidWebViewController.enableDebugging(true);
    (controller.platform as AndroidWebViewController)
       .setMediaPlaybackRequiresUserGesture(false);
   }  

_controller = controller;
}

and the build method is like

 Scaffold(      
  body: loading
      ? Center(child: CircularProgressIndicator())
      : WebViewWidget(controller: _controller),
);

and you need to add this two package webview_flutter_android and webview_flutter_wkwebview for android and ios and import in this page

Collectives™ on Stack Overflow

How can i migrate my code from flutter_webview_plugin to webview_flutter?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related