封装flutter webview页面

UzumakiHan2023-12-03 12:50

例如在flutter里面跳转百度页面

需要安装webview_flutter

webview_page.dart

Dart 复制代码

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';



class MyWebView extends StatefulWidget {


  const MyWebView({super.key, required this.webViewUrl,  this.webViewTitle =''});
 final String webViewUrl;
 final String webViewTitle;
  @override
  // ignore: library_private_types_in_public_api
  _MyWebViewState createState() => _MyWebViewState();
}

class _MyWebViewState extends State<MyWebView> {



  @override
  Widget build(BuildContext context) {
     WebViewController 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) {},
    ),
  )
  ..loadRequest(Uri.parse(widget.webViewUrl));
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
          appBar: AppBar(
            leading: GestureDetector(child: Icon(Icons.arrow_back),onTap: (){Navigator.pop(context);},),
            title:  Text(widget.webViewTitle),
            centerTitle: true,
            backgroundColor: const Color(0xFF206CFF),
          ),
          body: WebViewWidget(controller: controller)
          ),
    );
  }
}

使用

Dart 复制代码

 Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => MyWebView(webViewUrl: 'https://www.baidu.com/', webViewTitle: '百度一下你就知道'),
    ),
  );