A complete tutorial series on Flutter webview.

Overview

Flutter Webview | Tech With Sam

Youtube Twitter Follow GitHub stars GitHub TechWithSam

Youtube Banner

Flutter Webview Tutorial - Watch on youtube


  App Preview

App Screenshot App Screenshot

A new Flutter project.

Getting Started

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference. "# flutter_webview"

You might also like...

Arispewdie - Flutter app to watch LIVE subscriber count of PewDiePie vs T-Series

Arispewdie - Flutter app to watch LIVE subscriber count of PewDiePie vs T-Series

PewDiePie VS T-Series Flutter app to watch LIVE subscriber count of PewDiePie vs

Jan 10, 2022

Source code for login demo in Coding with Flutter series

Source code for login demo in Coding with Flutter series

Flutter & Firebase Authentication demo Source code based on my Flutter & Firebase Authentication video series: Part 1 Part 2 Part 3 Part 4 Part 5 Part

Dec 29, 2022

BreakingBad-App - A description of the Braking Bad series, using flutter bloc

BreakingBad-App - A description of the Braking Bad series, using flutter bloc

breaking_bad The application is a description of the Braking Bad series Using Bl

Jan 9, 2022

Open source Flutter package, bar indicator made of a series of selected and unselected steps

Open source Flutter package, bar indicator made of a series of selected and unselected steps

Step Progress Indicator Open source Flutter package, bar indicator made of a series of selected and unselected steps. Made by Sandro Maglione, check o

Dec 15, 2022

Individual Flutter application with BLoC compliance on the theme of the series Rick and Morty

Rick & Morty Catalog REST Individual Flutter application with BLoC compliance on the theme of the series Rick and Morty. List of all characters in the

Oct 31, 2022

Wired Elements is a series of basic UI Elements that have a hand drawn look. These can be used for wireframes, mockups, or just the fun hand-drawn look.

Wired Elements is a series of basic UI Elements that have a hand drawn look. These can be used for wireframes, mockups, or just the fun hand-drawn look.

wired_elements Wired Elements is a series of basic UI Elements that have a hand drawn look. These can be used for wireframes, mockups, or just the fun

Dec 1, 2022

a mobile app to search for information and watch movie, series and TV show trailers

inWatch Just a clean architecture app, to get trailers and informations of movies, series and TV shows, made with Getx, omdb API and Flutter sdk. The

Nov 10, 2022

This application displays the characters of the series Breaking Bad, has been used Cubit state and API .

breaking_bad A new Flutter project using bloc. Getting Started This project is a starting point for bloc state_management. A few resources to get you

Dec 24, 2021

A group of overlapping round avatars are called face piles, a face pile is a series of overlapping avatar images that come and go as users join and leave a given group.

A group of overlapping round avatars are called face piles, a face pile is a series of overlapping avatar images that come and go as users join and leave a given group.

Flutter Face Pile A group of overlapping round avatars are called face piles. A face pile is a series of overlapping avatar images that come and go as

Sep 22, 2022
Comments
  • How to Handle (Tel:,Mailto:,Wa:,Sms:) In Inappwebview?

    How to Handle (Tel:,Mailto:,Wa:,Sms:) In Inappwebview?

    excuse me sir, permission to ask, I'm just learning flutter and am trying to make an application using package _inappwebview & url_launcher, Well, I'm having trouble trying to handle mailto, tel, etc.

    Now when the link is clicked (eg href=tel:), it does exit the application but why does it go to the chrome browser (opens the webview url) instead of going to the phone. Can anyone help me to tell where is my error?

    My full code example can be seen here:

    
    import 'dart:async';
    import 'dart:collection';
    import 'dart:convert';
    import 'dart:io';
    import 'dart:typed_data';
    import 'package:flutter/services.dart';
    import 'package:flutter/material.dart';
    import 'package:flutter_inappwebview/flutter_inappwebview.dart';
    import 'package:url_launcher/url_launcher.dart';
    import 'package:flutter_downloader/flutter_downloader.dart';
    import 'package:permission_handler/permission_handler.dart';
    
    void main() async {
      SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
        statusBarColor: Colors.white, // status bar color
        statusBarIconBrightness: Brightness.dark, // status bar icon color
        systemNavigationBarColor: Colors.white, // navigation bar color
        systemNavigationBarIconBrightness: Brightness.dark, // color of navigation controls
      ));
      WidgetsFlutterBinding.ensureInitialized();
      await Permission.camera.request();
      await Permission.microphone.request();
      await Permission.storage.request();
      await AndroidInAppWebViewController.setWebContentsDebuggingEnabled(true);
      await FlutterDownloader.initialize(debug: true);
      runApp(MaterialApp(home: MyApp()));
    }
    
    class MyApp extends StatefulWidget {
      @override
      _MyAppState createState() => new _MyAppState();
    }
    
    class _MyAppState extends State<MyApp> {
      late InAppWebViewController webViewController;
      GlobalKey<ScaffoldState>webViewKey=GlobalKey<ScaffoldState>();
    
      InAppWebViewGroupOptions options = InAppWebViewGroupOptions(
          crossPlatform: InAppWebViewOptions(
            useShouldOverrideUrlLoading: true,
            mediaPlaybackRequiresUserGesture: false,
            javaScriptEnabled: true,
            javaScriptCanOpenWindowsAutomatically: true,
            useOnDownloadStart: true,
          ),
          android: AndroidInAppWebViewOptions(
            useHybridComposition: true,
          ),
          ios: IOSInAppWebViewOptions(
            allowsInlineMediaPlayback: true,
          )
      );
    
      late PullToRefreshController pullToRefreshController;
      String url = "";
      double progress = 0;
      final urlController = TextEditingController();
    
      @override
      void initState() {
        super.initState();
        pullToRefreshController = PullToRefreshController(
          options: PullToRefreshOptions(
            color: Colors.red,
          ),
          onRefresh: () async {
            if (Platform.isAndroid) {
              webViewController.reload();
            } else if (Platform.isIOS) {
              webViewController.loadUrl(
                  urlRequest: URLRequest(url: await webViewController.getUrl()));
            }
          },
        );
      }
    
      @override
      void dispose() {
        super.dispose();
      }
    
      @override
      Widget build(BuildContext context) {
        return WillPopScope(
          onWillPop: _onBack,
          child: Scaffold(
              key: webViewKey,
              appBar: null,
              body: SafeArea(
                  child: Column(children: <Widget>[
                    Expanded(
                      child: Stack(
                        children: [
                          InAppWebView(
                            initialUrlRequest: URLRequest(url: Uri.parse("https://ummmah.com/")),
                            initialOptions: options,
                            pullToRefreshController: pullToRefreshController,
                            onWebViewCreated: (controller) {
                              webViewController = controller;
                            },
                            onLoadStart: (controller, url) {
                              setState(() {
                                this.url = url.toString();
                                urlController.text = this.url;
                              });
                            },
                            androidOnPermissionRequest: (controller, origin, resources) async {
                              return PermissionRequestResponse(
                                  resources: resources,
                                  action: PermissionRequestResponseAction.GRANT);
                            },
                            shouldOverrideUrlLoading: (controller, shouldOverrideUrlLoadingRequest) async {
                              var uri = shouldOverrideUrlLoadingRequest.request.url!;
                              if (uri.scheme.startsWith("tel")) {
                                if (await canLaunch(url)) {
                                  await launch(
                                    url,
                                  );
                                  return NavigationActionPolicy.CANCEL;
                                }
                              }
                              return NavigationActionPolicy.ALLOW;
                            },
                            onLoadStop: (controller, url) async {
                              pullToRefreshController.endRefreshing();
                              setState(() {
                                this.url = url.toString();
                                urlController.text = this.url;
                              });
                            },
                            onLoadError: (controller, url, code, message) {
                              pullToRefreshController.endRefreshing();
                            },
                            onProgressChanged: (controller, progress) {
                              if (progress == 100) {
                                pullToRefreshController.endRefreshing();
                              }
                              setState(() {
                                this.progress = progress / 100;
                                urlController.text = this.url;
                              });
                            },
                            onUpdateVisitedHistory: (controller, url, androidIsReload) {
                              setState(() {
                                this.url = url.toString();
                                urlController.text = this.url;
                              });
                            },
                            onConsoleMessage: (controller, consoleMessage) {
                              print(consoleMessage);
                            },
                          ),
                          progress < 1.0
                              ? LinearProgressIndicator(
                                  value: progress,
                                  minHeight: 2,
                              )
                              : Container(),
                        ],
                      ),
                    ),
                  ]
                  )
              )
          ),
        );
      }
      Future<bool> _onBack() async {
        bool goBack;
        if (await webViewController.canGoBack()) {
          webViewController.goBack();
          return false;
        } else {
          showDialog(
              context: context,
              builder: (context) => AlertDialog(
                title: Text('Kamu yakin ingin keluar ?'),
                actions: <Widget>[
                  FlatButton(
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                    child: Text('Tidak'),
                  ),
                  FlatButton(
                    onPressed: () {
                      SystemNavigator.pop();
                    },
                    child: Text('Iya'),
                  ),
                ],
              ));
          return Future.value(true);
        }
      }
    }
    
    
    opened by dickynh2292 0
Owner
Samuel Adekunle
I'm passionate about learning and teaching programming, majorly Flutter at the moment. Read full info 👉
Samuel Adekunle
Flutter-nav-bottom-bar-tutorial - A flutter bottom navigation bar tutorial

Flutter Bottom Navigation Bar Tutorial A tutorial with various Flutter bottom na

Aleyna Eser 2 Oct 25, 2022
A rewrite of Bloc tutorial: Flutter Weather Tutorial using freezed

A rewrite of Bloc tutorial: Flutter Weather Tutorial using freezed. Bloc was used instead of Cubit (Cubit vs Bloc)

Yu-Han Luo 17 Nov 23, 2022
A Flutter plugin that allows you to add an inline WebView.

native_webview A Flutter plugin that allows you to add an inline WebView. Motivation There is already a useful library for working with WebViews in Fl

hisaichi5518 46 Dec 14, 2022
Plugin that allow Flutter to communicate with a native WebView.

interactive_webview Plugin that allow Flutter to communicate with a native WebView. Warning: This is not a display WebView. This plugin is designed to

Duy Duong 46 Dec 15, 2022
Tech News Application by Flutter WebView .

Tech News APP developed by flutter_web_view Tech News developed by Flutter (Dart) it is a simple WebView that run on Android & iOS. *New changes: Migr

Hamed Jaliliani 34 Oct 31, 2021
A feature-rich cross-platform webview using webview_flutter for mobile and iframe for web. JS interop-ready.

A feature-rich cross-platform webview using webview_flutter for mobile and iframe for web. JS interop-ready. Getting started Gallery Basic usage Featu

null 2 Mar 17, 2022
A cross-platform WebView for Android, iOS and Web.

A feature-rich cross-platform webview using webview_flutter for mobile and iframe for web. JS interop-ready. Getting started Gallery Basic usage Featu

Mahad Asghar 4 Dec 14, 2022
End to end flutter series for zero to hero flutter devloper.( lang of videos is turkish)

flutter_full_learn A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you start

Veli Bacik 191 Dec 24, 2022
A todo app using firebase and flutter as part of youtube series

Welcome to flutter-with-firebase ?? This project made for those whowanted to learn about the firebase and thier Auth, Cloud Storage and Cloud function

Balram Rathore 71 Jan 6, 2023
Turtle graphics for Flutter. It simply uses a custom painter to draw graphics by a series of Logo-like commands.

flutter_turtle flutter_turtle is a simple implementation of turtle graphics for Flutter. It simply uses a custom painter to draw graphics by a series

Weizhong Yang a.k.a zonble 46 Dec 16, 2022