Use flutter_inappwebview to load remote html files in Flutter

1. Install the plugin

 Configure  the flutter_inappwebview  plugin.

  1. dependencies:
  2. flutter:
  3. sdk: flutter
  4. flutter_localizations:
  5. sdk: flutter
  6. date_format: ^1.0.6
  7. flutter_cupertino_date_picker: ^1.0.26+2
  8. flutter_swiper: ^ 1.1 . 6
  9. fluttertoast: ^7.1.6
  10. http: ^0.12.2
  11. part: ^ 3.0 . 10
  12. flutter_html: ^1.1.0
  13. # Load remote HTML plugin
  14. flutter_inappwebview: ^4.0.0+4

After the configuration is saved in pubspec.yaml, the dependency package will be automatically downloaded in the VS Code environment.

If it cannot be downloaded normally, execute  flutter pub get  .

2. Introduce dependencies

Introduce the plug-in package in the file of the plug-in that needs to be used.

import 'package:flutter_inappwebview/flutter_inappwebview.dart';

3. Use plugins

  1. InAppWebView(
  2. initialUrl: "https://www.baidu.com",
  3. initialHeaders: {},
  4. initialOptions: InAppWebViewGroupOptions(
  5. inAppWebViewOptions: InAppWebViewOptions(
  6. debuggingEnabled: true,
  7. )
  8. ),
  9. onWebViewCreated: (InAppWebViewController controller) {
  10. },
  11. onLoadStart: (InAppWebViewController controller, String url) {
  12. },
  13. onLoadStop: (InAppWebViewController controller, String url) {
  14. },
  15. )

4. Precautions

1. If the SDK version is too low, please upgrade as follows.

 2. If you are prompted that you do not have network permissions, please add the following configuration to add network permissions.

5. Complete example

  1. import 'package:flutter/material.dart';
  2. import 'package:flutter_inappwebview/flutter_inappwebview.dart';
  3. class DetailPage extends StatefulWidget {
  4. final Map arguments;
  5. DetailPage({Key key,this.arguments}) : super(key: key);
  6. @override
  7. _DetailPageState createState() => _DetailPageState(this.arguments);
  8. }
  9. class _DetailPageState extends State<DetailPage> {
  10. // Whether to show the loading animation
  11. bool _flag = false;
  12. final Map arguments;
  13. _DetailPageState(this.arguments);
  14. @override
  15. void initState() {
  16. super.initState();
  17. }
  18. @override
  19. Widget build(BuildContext context) {
  20. return Container(
  21. child: Scaffold(
  22. appBar: AppBar(
  23. title: Text( "News Details" ),
  24. ),
  25. body: Column(
  26. children: <Widget>[
  27. this._flag?_getMoreWidget():Text(""),
  28. Expanded(
  29. // official code
  30. child:InAppWebView(
  31. initialUrl: "http://www.ifindbug.com/doc/id-44927/name-Implement pull-down refresh and pull-up loading in Flutter.html",
  32. // Load progress change event
  33. onProgressChanged: (InAppWebViewController controller, int progress) {
  34. if((progress/100)>0.999){
  35. setState (() {
  36. this._flag=false;
  37. });
  38. }
  39. },
  40. ),
  41. )
  42. ],
  43. )
  44. )
  45. );
  46. }
  47. // load state
  48. Widget _getMoreWidget() {
  49. return Center(
  50. child: Padding(
  51. padding: EdgeInsets.all(10.0),
  52. child: Row(
  53. mainAxisAlignment: MainAxisAlignment.center,
  54. crossAxisAlignment: CrossAxisAlignment.center,
  55. children: <Widget>[
  56. Text(
  57. 'Loading...' ,
  58. style: TextStyle(fontSize: 16.0 ),
  59. ),
  60. CircularProgressIndicator(
  61. strokeWidth: 1.0,
  62. )
  63. ],
  64. ),
  65. ),
  66. );
  67. }
  68. }

Below is the rendering of loading the remote page.

Reference: flutter_inappwebview | Flutter Package 

Related: Use flutter_inappwebview to load remote html files in Flutter