Flutter API with Webview Plugin

 Webview flutter is very useful for app developer with retrieve full website to display on your mobile app. It is every easy to learn about it by follow the step below:

- Step 1: go to website https://pub.dev/packages/webview_flutter than update pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.5
  webview_flutter: ^3.0.4
  font_awesome_flutter: ^10.2.1
  html: ^0.15.0
  url_launcher: ^5.4.0
  image_picker: ^0.8.5+3
  collection: ^1.16.0
  css_colors: ^1.0.0
  flutter_html: ^3.0.0-alpha.5
  flutter_pdfview: ^1.2.3
  dio: ^4.0.6
  path_provider: ^2.0.11
  pspdfkit_flutter: ^3.3.0

dev_dependencies:
  flutter_test:
    sdk: flutter
  integration_test:
    sdk: flutter

- Step 2: code with the myhome.dart

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

class Homepage extends StatefulWidget {
  @override
  HomepageState createState() => HomepageState();
}

class HomepageState extends State<Homepage> {
  late WebViewController _controller;
  var connectionStatus = true;

  final Completer<WebViewController> _controllerCompleter =
  Completer<WebViewController>();

  @override
  void initState() {
    super.initState();
    // Enable hybrid composition.
    if (Platform.isAndroid) WebView.platform = SurfaceAndroidWebView();
  }

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () => _goBack(context),
      child: SafeArea(
        child: WebView(
          initialUrl: 'https://bophana.org',
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (WebViewController webViewController) {
            _controllerCompleter.future.then((value) => _controller = value);
            _controllerCompleter.complete(webViewController);
          },
        ),
      ),
    );
  }
  Future check() async {
    try {
      final result = await InternetAddress.lookup('https://bophana.org');
      if (result.isNotEmpty && result[0].rawAddress.isNotEmpty) {
        connectionStatus = true;
        print("connected $connectionStatus");
      }
    } on SocketException catch (_) {
      connectionStatus = false;
      print("not connected $connectionStatus");
    }
  }

  Future<bool> _goBack(BuildContext context) async {
    if (await _controller.canGoBack()) {
      _controller.goBack();
      return Future.value(false);
    } else {
      showDialog(
          context: context,
          builder: (context) => AlertDialog(
            title: Text('Do you want to exit'),
            actions: <Widget>[
              TextButton(
                onPressed: () {
                  Navigator.of(context).pop();
                },
                child: Text('No'),
              ),
              TextButton(
                onPressed: () {
                  SystemNavigator.pop();
                },
                child: Text('Yes'),
              ),
            ],
          ));
      return Future.value(true);
    }
  }
}

 - Step 3: Code on main.dart

import 'package:bophana/screens/myhome.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:bophana/tabs.dart';
import 'package:flutter/widgets.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
       debugShowCheckedModeBanner: false,
       title: 'WebBrowser',
      home: Splash(),
    );
  }
}
class Splash extends StatefulWidget {

  @override
  _SplashState createState() => _SplashState();
}
class _SplashState extends State<Splash>{
  @override
  void initState() {
    super.initState();
    Future.delayed(const Duration(seconds: 3), (){
      Navigator.pushReplacement(context, MaterialPageRoute(builder: (context)=> Homepage()));
      }
    );
  }
  @override
Widget build(BuildContext context){
    return Scaffold(
    backgroundColor: Colors.white,
    body: Center(
        child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image.asset('assets/logo.png', height: 130,),
            const SizedBox(height: 30,),
          //  if(Platform.isIOS)
          //   const CupertinoActivityIndicator(
          //      radius: 15,
          //    )
          //  else
              const CircularProgressIndicator(
              color: Colors.orange,
              )
          ],
        ),
      ),
    );
  }
}