Search This Blog

Sunday, July 21, 2019

Flutter - Web view widget and progress bar.

WebView in a mobile application allows us to integrate a web page as a part of the app. It comes with all the features for managing history, cookies, HTML5 support and lot more. 

flutter web view url loading example with progress bar
Using webview, you can build very cool apps like integrating HTML5 games, show text, audio, video, animation and more in the mobile app. The web page can be loaded from the same application by using a url address. It is the responsibility of a web browser to interpret text and commands that contained in the web page.

In this post, we are going to learn the basic usage of WebView in Flutter application. You will also learn how to use the WebView with progress bar loader widget that will hide when page fully loaded in the application. We going to create a small example for the same. The final output of the example will look like below:

flutter web view widget example with progress bar

Creating a new Project
2. Now,  add the WebView plugin webview_flutter 0.3.10+3 as a dependency in the pubspec.yaml file. Once you do that, you need to run flutter packages get.
3. After that open main.dart file and edit it. As we have set our theme and change debug banner property of Application.
import 'package:flutter/material.dart'; import 'package:flutter_webw_widget/progress_hud.dart'; import 'package:webview_flutter/webview_flutter.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Webview Widget', debugShowCheckedModeBanner: false, theme: ThemeData( primaryColor: const Color(0xFF02BB9F), primaryColorDark: const Color(0xFF167F67), accentColor: const Color(0xFF02BB9F), ), home: MyHomePage(title: 'Webview Widget'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { bool _isLoading = true; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title,style: TextStyle(color:Colors.white),), ), body: ProgressHUD( child: Padding( padding: EdgeInsets.all(10.0), child: Stack( children: <Widget>[ WebView( initialUrl:"", javascriptMode: JavascriptMode.unrestricted, onPageFinished: pageFinishedLoading, ), ], ), ), inAsyncCall: _isLoading, opacity: 0.0, )); } void pageFinishedLoading(String url) { setState(() { _isLoading = false; }); } }
in the build method of the widget, we have added WebView inside of ProgressHUD that is root widget of the screen. The pageFinishedLoading method will change progress bar state when page fully loaded.

Here, we have progress_hud.dart widget that we used in this example. You can use it in another project of flutter application. To change the state of this widget, you have to update inAsyncCall field. The progress bar will display if you make it true.

library modal_progress_hud; import 'package:flutter/material.dart'; class ProgressHUD extends StatelessWidget { final Widget child; final bool inAsyncCall; final double opacity; final Color color; final Animation<Color> valueColor; ProgressHUD({ Key key, @required this.child, @required this.inAsyncCall, this.opacity = 0.3, this.color = Colors.grey, this.valueColor, }) : super(key: key); @override Widget build(BuildContext context) { List<Widget> widgetList = new List<Widget>(); widgetList.add(child); if (inAsyncCall) { final modal = new Stack( children: [ new Opacity( opacity: opacity, child: ModalBarrier(dismissible: false, color: color), ), new Center( child: new CircularProgressIndicator( valueColor: valueColor, ), ), ], ); widgetList.add(modal); } return Stack( children: widgetList, ); } }

If you have followed the article carefully, you can see the app running very smoothly as shown in the above. But if you are facing any problem or you have any quires, please feel free to ask it from the comment section.



Post a Comment



  • Cover art Blend
