如何摆脱 Flutter 'WebBrowser' 插件中的地址栏和底栏？答案

【问题标题】：How to get rid of address bar and bottom bar in Flutter 'WebBrowser' Plugin?如何摆脱 Flutter 'WebBrowser' 插件中的地址栏和底栏？
【发布时间】：2021-06-21 15:10:47
【问题描述】：

我的应用是一个 Flutter WEB 应用。这是我用来显示来自服务器的一些 HTML 的插件：

https://pub.dev/packages/web_browser

这是我正在使用的代码：

  WebBrowser( 
initialUrl: 'https://${Provider.of<CP>(context).getPaymentURL()+Provider.of<CP>(context).getPaymentPATH()}?O=${Provider.of<CP>(context).getOrder().orderUID}&Ro=${Provider.of<CP>(context).getOrder().res_key}',

我的屏幕如下所示：

我想去掉地址栏和底栏，但不知道怎么做。有人可以帮忙吗？

【问题讨论】：

标签： flutter flutter-layout flutter-dependencies flutter-web

【解决方案1】：

您可以在下面复制粘贴运行完整代码
您可以使用属性interactionSettings 并将WebBrowserInteractionSettings 的topBar 和bottomBar 设置为SizedBox.shrink()

代码sn-p

return WebBrowser(
        initialUrl: 'https://dart.dev/',
        interactionSettings: WebBrowserInteractionSettings(
            topBar: SizedBox.shrink(), bottomBar: SizedBox.shrink()));

工作演示

完整代码

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

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return WebBrowser(
        initialUrl: 'https://dart.dev/',
        interactionSettings: WebBrowserInteractionSettings(
            topBar: SizedBox.shrink(), bottomBar: SizedBox.shrink()));
  }
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
          appBar: AppBar(
            title: Text("Demo"),
          ),
          body: MyWidget()),
    );
  }
}

【讨论】：