Webview not refresh after added refresh indicator method in flutter project

Question

**hi friends, I have a flutter project where I'll use a webview page. I have 2 problems.

1. I'll use stack layout, in this stack I'll add webview and lottie animation... when webview load a lottie animation will show... but when webview load and lottie will disappear ... a white screen show approx 800 milliseconds... please find this solution... how to show animation without this gap..

2. I want a pull down to refresh page function, when pull down webview reload and show a small circular progress..

any coders who have any idea to do that... please solve this... problem... Note please don't use the appbar because I have a website that has already an app bar...**

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


class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
   late WebViewController controller;
 
  bool isLoading = true;
  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        if (await controller.canGoBack()) {
          controller.goBack();
          return false;
        }else{return true;}
      },
      child: Scaffold(
        body: RefreshIndicator(
              onRefresh: _refresh,
          child: SafeArea(
            child: Stack(children: <Widget>[
              WebView(
                onWebViewCreated: (controller) {
                  this.controller = controller;
                },
                initialUrl: "https://stackoverflow.com/",
                javascriptMode: JavascriptMode.unrestricted,
                onPageFinished: (finished) {
                  setState(() {
                    isLoading = false;
                  });
                },
              ),
              isLoading
                  ? Center(
                      child: Lottie.asset(
                        'assets/images/load_anm.json',
                        width: 200,
                        height: 200,
                      ),
                    )
                  : Stack(), //CircularProgressIndicator()
            ]),
          ),
        ),
      ),
    );
  }

 
}

Future<void> _refresh(){
  return Future.delayed(const Duration(seconds: 2));
}

Answer 1

you haven't added the code to refresh the webview. There should be a refresh method on the controller to reload the web view.

remove this

Future<void> _refresh(){
  return Future.delayed(const Duration(seconds: 2));
}

then add this immediately after the build widget

Future<void> _refresh(){
  // one of these should work. uncomment and see which one works.
  // controller.refresh()
  // controller.reload()
  return Future.delayed(const Duration(seconds: 2));
}

then move this immediately after the build widget