自定义WebView / WebViewX,如iFrame flutter移动的或矩形中的WebView

jxct1oxe  于 2022-12-30  发布在  Flutter
关注(0)|答案(1)|浏览(156)

我试图创建一个移动的应用程序在Flutter,我可以显示从webView的内容,但我需要它在一个矩形的形式,并在应用程序的中心小部件内。

w51jfk4q

w51jfk4q1#

您可以使用“flutter_inappwebview”软件包:- https://pub.dev/packages/flutter_inappwebview/install.您可以在应用程序内部使用它,并像flutter中的任何其他小部件一样自定义它。
您只需将网站的URL作为参数传递,如下所示:-

InAppWebView(
            initialUrlRequest: URLRequest(
                url: WebUri('https://www.apple.com/apple-watch-series-8/')),// website's URL
          ),

产品代码:

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

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Web View',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: const WebView(),
    );
  }
}

class WebView extends StatefulWidget {
  const WebView({Key? key}) : super(key: key);
  @override
  _WebViewState createState() => _WebViewState();
}

class _WebViewState extends State<WebView> {
  Offset offset = Offset.zero;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("WebView"),
        backgroundColor: Colors.green,
      ),
      body: Center(
        child: Container(
          height: 350,
          width: double.infinity,
          margin: EdgeInsets.only(right: 20, left: 20),
          child: InAppWebView(
            initialUrlRequest: URLRequest(
                url: WebUri('https://www.apple.com/apple-watch-series-8/')),
          ),
        ),
      ),
    );
  }
}

输出:-

相关问题