如何在Flutter中创建WebView

uubf1zoe  于 2023-04-07  发布在  Flutter
关注(0)|答案(3)|浏览(169)

我正在尝试在Flutter中使用Web视图。我关注了这篇中等的文章,它描述了我们如何使用Flutter嵌入Web视图来创建一个简单的应用程序。
https://medium.com/@ekosuprastyo15/webview-in-flutter-example-a11a24eb617f
我能够成功地创建应用程序,但现在该应用程序正在打开按钮点击,如上面的文章所示。

我想要的-现在我想创建一个应用程序,在加载时在webview中加载URL(即用户不必单击任何按钮或链接来打开该URL)。
到目前为止我们都做了什么

我们已经尝试了flutter url_launcher插件和flutter_webview_plugin插件。

mpgws1up

mpgws1up1#

添加此库Flutter WebView

import 'package:webview_flutter/webview_flutter.dart';

return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter WebView example'),
      ),
      body: const WebView(
        initialUrl: 'https://flutter.io',
        javascriptMode: JavascriptMode.unrestricted,
      ),
    );
zbdgwd5y

zbdgwd5y2#

如果你想不按任何按钮直接打开你想要的网站,你应该给予初始URL.但你应该nagivate.从其他页面推到这里.它是这样的;

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

class WebViewExample extends StatefulWidget {

  @override
  WebViewExampleState createState() => WebViewExampleState();
}

class WebViewExampleState extends State<WebViewExample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("webview"),
      ),
      body: WebView(
        initialUrl: "https://www.google.com/",
        javascriptMode: JavascriptMode.unrestricted,
      ),
    );
  }
}
v1uwarro

v1uwarro3#

您可以使用此更新后的webview小部件是不存在的

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

class Shop extends StatefulWidget {
  const Shop({super.key});

  @override
  State<Shop> createState() => _ShopState();
 }

class _ShopState extends State<Shop> {
  late final WebViewController _controller;
   @override
   void initState() {
    _controller = WebViewController()
     ..loadRequest(
       Uri.parse('https://url'),
        );
     super.initState();
     }

   @override
  Widget build(BuildContext context) {
    return Scaffold(
    
    body: SafeArea(child: WebViewWidget(controller: _controller))
    
    );
 }
}

相关问题