使用flutter_inappwebview加载网页时如何添加CircularProgressIndicator？答案

【问题标题】：How to add CircularProgressIndicator when loading web page using flutter_inappwebview?使用flutter_inappwebview加载网页时如何添加CircularProgressIndicator？
【发布时间】：2020-06-06 19:08:27
【问题描述】：

我是 Flutter 新手，

我在等待网页加载时尝试添加一个 CircularProgressIndicator，然后页面显示和圆形指示器不显示在屏幕上。

它应该在哪里？也许在下面的 onLoadStart 函数中？

源代码：

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

class CoursesInformation extends StatefulWidget {
  @override
  _CoursesInformationState createState() => _CoursesInformationState();
}

class _CoursesInformationState extends State<CoursesInformation> {
  InAppWebViewController webView;

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Directionality(
      textDirection: TextDirection.rtl,
        child: Scaffold(
        appBar: AppBar(
          title: const Text('מידע על קורסים'),
          centerTitle: true,        
        ),
        body: Container(
            child: Column(children: <Widget>[
          Expanded(
              child: InAppWebView(
            initialUrl:
                "https://shoham.biu.ac.il/BiuCoursesViewer/MainPage.aspx",
            initialHeaders: {},
            initialOptions: InAppWebViewGroupOptions(
              crossPlatform: InAppWebViewOptions(
                  debuggingEnabled: true,
                  preferredContentMode: UserPreferredContentMode.DESKTOP),
            ),
            onWebViewCreated: (InAppWebViewController controller) {
              webView = controller;
            },
            onLoadStart: (InAppWebViewController controller, String url) {

            },
            onLoadStop: (InAppWebViewController controller, String url) async {

            },
          ))
        ])),
      ),
    );
  }
}

【问题讨论】：

标签： flutter dart

【解决方案1】：

您可以onProgressChanged 参数并显示加载程序。您也可以使用LinearProgressIndicator（检查注释代码）。检查以下示例

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

void main() {
  // it should be the first line in main method
  WidgetsFlutterBinding.ensureInitialized();

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark()
          .copyWith(scaffoldBackgroundColor: Color.fromARGB(255, 18, 32, 47)),
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(body: CustomPage());
  }
}

class CustomPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return CustomPageState();
  }
}

class CustomPageState extends State<CustomPage> {
  InAppWebViewController webView;

  double progress = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('מידע על קורסים'),
        centerTitle: true,
      ),
      body: Container(
          child: Column(children: <Widget>[
        Expanded(
            child: Stack(
          children: <Widget>[
            Align(
              alignment: Alignment.center,
              child: InAppWebView(
                initialUrl:
                    "https://shoham.biu.ac.il/BiuCoursesViewer/MainPage.aspx",
                initialHeaders: {},
                initialOptions: InAppWebViewGroupOptions(
                  crossPlatform: InAppWebViewOptions(
                      debuggingEnabled: true,
                      preferredContentMode: UserPreferredContentMode.DESKTOP),
                ),
                onWebViewCreated: (InAppWebViewController controller) {
                  webView = controller;
                },
                onLoadStart: (InAppWebViewController controller, String url) {

                },
                onLoadStop:
                    (InAppWebViewController controller, String url) async {
                },
                onProgressChanged: (InAppWebViewController controller, int progress) {
                  setState(() {
                    this.progress = progress / 100;
                  });
                },
              ),
            ),
            Align(
              alignment: Alignment.center,
              child: _buildProgressBar()
            ),
          ],
        ))
      ])),
    );
  }

  Widget _buildProgressBar() {
    if (progress != 1.0) {
      return CircularProgressIndicator();
// You can use LinearProgressIndicator also
//      return LinearProgressIndicator(
//        value: progress,
//        valueColor: new AlwaysStoppedAnimation<Color>(Colors.orange),
//        backgroundColor: Colors.blue,
//      );
    }
    return Container();
  }
}

【讨论】：