Flutter: How to Use WebView, Add Progress bar, Push Notification

How to use WebView in FlutterPin

You can easily convert your existing website into Android mobile app using Flutter. If you want to embed your website inside Flutter app, all you have to do use flutter plugin named plugin named “Webview”. In this tutorial I going to show you how to add WebView in Flutter app.

On Android,

The Webview widget is backed up by WKWebView

On iOS,

Webview widget is backed up by WebView

Add Package in Main Dart File

In the main dart file, import the basic packages like material.dart

import ‘package:flutter/material.dart’;

Depend Flutter Webview Plugin

  1. Go to “pubspec.yaml” file.
  2. Under “cupertino_icons: ^0.1.2”, enter the code
Flutter_webview_plugin: ^0.2.1+2
Flutter Webview PluginPin

Install Plugin

  1. To Install the Flutter webview plugin,
  2. Tap “Package get” to install.

Import Package File in Main dart file

import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

Create Class File in Main Dart

class MyApp extends StatefulWidget {
 @override
 _MyAppState createState() => _MyAppState();
}

Create Webview Scaffold

Widget build(BuildContext context) {
   return WebviewScaffold(
     appBar: AppBar(
       title: TextField(
         ),
       ),
    url: "https://www.webapptiv.com",
   );
 }
}



The Final output will look like this one.

WebviewPin

I hope you enjoyed this tutorial. Do not forget to check other Flutter tutorials on our blog.

Flutter: Add Webview Progress bar

Add Webview Progress bar in FlutterPin

If you need to show the progress bar before loading the URL in the web view at Flutter means, this tutorial will be useful for you.

Add Package in Main Dart File

At the main dart, file enter the basic package

import ‘package:flutter/material.dart’;

Add Package in pubspec.yaml file

1.Go to “pubspec.yaml” file.

2. Under “cupertino_icons: ^0.1.2”, enter the code

#url_launcher: ^3.0.0
 flutter_webview_plugin: ^0.3.0+2
Add Package in pubspec.yaml filePin

Install Plugin

1.To Install the Flutter webview plugin,

2. Tap “Package get” to install.

Import package in main.dart file

// import 'package:url_launcher/url_launcher.dart';
// import 'dart:async';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

Enter URL

Enter the URL command which you want to progress,

String url = "https://webapptiv.com/";
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
  @override
 Widget build(BuildContext context) {
   return MaterialApp(
     title: 'WebApptiv',
     theme: ThemeData.dark(),
       routes: {
       ' ': (_) => Home(),
         '/webview': (_) => WebviewScaffold(
           url: url,
           appBar: new AppBar(
             title: new Text("Webview"),
           ),
           withJavascript: true,
           withLocalStorage: true,
           withZoom: true,
         )
       },

Enter Flutter Webview Plugin at Class File

class Home extends StatefulWidget {
 @override
 HomeState createState() => HomeState();
}
class HomeState extends State<Home> {
 final webView = FlutterWebviewPlugin();
 TextEditingController controller = TextEditingController(text: url);
 @override
 void initState() {
   super.initState();
   webView.close();
   controller.addListener(() {
     url = controller.text;
   });
 }

Sync the URL to the File

To launch the URL in the page write the following code,

  // Future launchURL(String url) async {
    // if (await canLaunch(url)) {
      // await launch(url, forceSafariVC: true, forceWebView: true);
    // } else {
      // print("Can't Launch ${url}");
       // }
  // }

Create AppBar

@override
  Widget build(BuildContext context) {
  return Scaffold(
    appBar: new AppBar(
     title: new Text("Webview"),
          ),
body: Center(
      child: Column(
        children: <Widget>[
          Container(
            padding: EdgeInsets.all(10.0),
            child: TextField(
              controller: controller,
            ),

Create onPressed button to open Link

 RaisedButton(
 child: Text("Open Link"),           
 onPressed: () {              
 Navigator.of(context).pushNamed("/webview"); 
Create on Pressed button to open LinkPin

Add Push Notification in Flutter App via FireBase

Add Push Notification in Flutter App via FireBasePin

FireBase Segment

Create a Firebase account

Go to Firebase Console.

Tap  Add Project for the new project.

Enter the details of your project and tap Create Project.

Click Continue. 

Pin

Add your App To Firebase Project

Tap Android device.

Tap android > app > build.gradle.

Copy the applicationId under defaultconfig.

appidPin

Then paste the ID on the Android Package name.

Then tap Register App.

Now download google-services.json.

firebasePin

Copy the Google-services.json file and then paste it into android > app > src.

Pin
Pin

Add Firebase SDK

Copy the 1st link and then go to project > build.gradle.  Paste classpath ‘com.google.gms:google-services:4.0.1' under dependencies

Pin

Now copy the 2nd link and then go to project > app-model > build.gradle. paste apply plugin: ‘com.google.gms.google-services'  at the end of the code

Then tap next.

Run your flutter project first and then uninstall it.

Again run the flutter App.

Finally, you receive a Flutter Notification window.

Pin

Here you can enter the notification title, text, duration, and tap review.

Pin

8. Finally, tap Publish.

Flutter Segment

First Install the package

  1. After creating a new flutter document move to pubspec.yaml file
  2. Find Dependencies and then add the package name.

Note: you should add under cupertino_icons: ^0.1.2

firebase_core:

firebase_messaging:

3. Tap Package get at the top right corner.

Import the package

1.Import the package under the basic package

import 'package:firebase_messaging/firebase_messaging.dart';

2. Given coding is to  Configure your notification.

 firebaseMessaging.configure(
    onMessage: (Map<String, dynamic> message) {
      print('on message $message');
    },
    onResume: (Map<String, dynamic> message) {
      print('on resume $message');
    },
    onLaunch: (Map<String, dynamic> message) {
      print('on launch $message');
    },
  );

3. Given coding is to set Notification alert, and sound.

firebaseMessaging.requestNotificationPermissions(

        const IosNotificationSettings(sound: true, badge: true, alert: true));

    firebaseMessaging.getToken().then((token) {

      print(token);

    });

4. Tokens are one of the important concepts for firebase notification

firebaseMessaging.getToken().then((token) {
    update(token);
  });

Output:

Pin

About The Author

Scroll to Top
Share to...