**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));
}
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