简介

浏览器url 展示

安装

flutter pub add webview_flutter

引入

import 'package:webview_flutter/webview_flutter.dart';

路由 routers.dart

Map routes = {
  "/": (contxt) => const Tabs(),
  "/search": (contxt) => const SearchPage(),
  "/webviewurl": (contxt, {arguments}) => WebUrlPage(arguments: arguments),
};

按钮跳转 search.dart

void toSearch() {
    Navigator.pushNamed(context, "/webviewurl",
        arguments: {"keyword": "https://$keyword"});
  }

使用 webviewurl.dart

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

/// 使用步骤分为3步
/// 1、初始化WebViewController
/// 2、重写这个WebViewController
/// 3、使用WebViewWidget实现外部页面嵌入

class WebUrlPage extends StatefulWidget {
  final Map arguments;
  const WebUrlPage({super.key, required this.arguments});

  @override
  State<WebUrlPage> createState() => _WebUrlPageState();
}

class _WebUrlPageState extends State<WebUrlPage> {
  // 1
  late WebViewController controller;
  @override
  void initState() {
    // 2
    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..loadRequest(Uri.parse(widget.arguments["keyword"]));
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter Simple Example')),
      body: Column(
        children: [
          // 3
          Expanded(child: WebViewWidget(controller: controller))
        ],
      ),
      floatingActionButton: ElevatedButton(
        onPressed: () async {
          var title = await controller.getTitle();
          // ignore: avoid_print
          print(title);
          // ignore: avoid_print
          print(widget.arguments);
        },
        child: const Text('获取 title'),
      ),
    );
  }
}