Flutter 在片段内加载 webview答案

【问题标题】：Flutter load webview inside the fragmentFlutter 在片段内加载 webview
【发布时间】：2019-06-11 07:24:27
【问题描述】：

// 这是我的颤振代码

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

【解决方案1】：

您可以使用 Flutter webview 插件。这是插件的网址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(),)
            ),
          ],
        ));
  }
}

【讨论】：