时间戳

首页 > 解决方案 > Flutter 在片段内加载 webview

flutter - Flutter 在片段内加载 webview

问题描述

// 这是我的颤振代码

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

class HairtipsPage extends StatefulWidget {
  @override
  _HairtipsPageState createState() => _HairtipsPageState();
}

class _HairtipsPageState extends State<HairtipsPage> {

  @override
  Widget build(BuildContext context) {
   return Scaffold(
    body: Center(
    child : WebviewScaffold(
      url: "https://www.google.com",
      appBar: new AppBar(
        // title: new Text('Hairtips'),
      ),
      withZoom: true,
      withLocalStorage: true,    
     )
   ),
 );

  }

}

我在我的应用程序中使用底部导航并尝试在片段中实现 webview。我知道如何在 android 中实现同样的效果，我也不希望 webview 应该在浏览器中打开。我希望 webview 应该在应用程序内部和内部加载片段。

标签： flutter

解决方案

你可以使用 Flutter webview 插件。这是插件的 URL https://pub.dartlang.org/packages/webview_flutter

webview 将使用 CircularProgressIndicator 在应用程序中加载。

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

class WebView extends StatefulWidget {
  @override
  _WebViewState createState() => _WebViewState();
}

class _WebViewState extends State<WebView> {

  final Completer<WebViewController> _controller =
      Completer<WebViewController>();

  num _stackToView = 1;

  void _handleLoad(String value) {
    setState(() {
      _stackToView = 0;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          leading: Builder(builder: (BuildContext context) {
            return IconButton(
              icon: Icon(Icons.volume_up, color: Colors.black,),
              onPressed: () {
                Navigator.pop(context);
              },
            );
          }),
          backgroundColor: Colors.white10,
          elevation: 0,
        ),
        body: IndexedStack(
          index: _stackToView,
          children: [
            Column(
              children: <Widget>[
                Expanded(
                    child: WebView(
                  initialUrl: "https://www.google.co.in/",
                  javascriptMode: JavascriptMode.unrestricted,
                  onPageFinished: _handleLoad,
                  onWebViewCreated: (WebViewController webViewController) {
                    _controller.complete(webViewController);
                  },
                )),
              ],
            ),
            Container(
              child: Center(child: CircularProgressIndicator(),)
            ),
          ],
        ));
  }
}

推荐阅读