How to add CircularProgressIndicator when loading web page using flutter_inappwebview? - flutter

Question

I am new in flutter,
I tried to add a CircularProgressIndicator while waiting to the web page to load,
and then the page display and the circular indicator dosen't show on screen.
where it's should be? maybe in onLoadStart function below?
Source code:
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 {
},
))
])),
),
);
}
}

Answer 1

You can onProgressChanged parameter and show the loader. You can also use LinearProgressIndicator (check commented code). Check the following example
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();
}
}