Open Web Url In App Using Webview Example In Flutter

admin_img Posted By Bajarangi soft , Posted On 10-09-2020

WebView in flutter is used to display online Web URL’s in flutter android iOS mobile apps. Sometimes we have some payment flow or like button already present in our website and we don’t wanted to implement complete payment flow again in our app. So we can use WebView and do all this by opening page in WebView.

Open Web Url In App Using Webview Example In Flutter

Step 1
We cannot directly remove the time stamp from  Web Url In App Using Webview Example but using the intl.dart package we can easily filter the date stamp from time stamp. So open your flutter project’s pubspec.yaml in code .

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^0.3.19+6


Step 2
After done saving the pubspec.yaml file, Open your flutter project root folder in Command Prompt or Terminal and execute flutter pub get command. 
flutter pub get


Step 3
 Open your project’s main.dart file and import material.dart and   webview_flutter: ^0.3.19+6.dart package.
import 'package:webview_flutter/webview_flutter.dart';


Complete Code For Web Url In App Using Webview Example In Flutter
Main.dart
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
            body: WebViewLoad()
        )
    );
  }
}

class WebViewLoad extends StatefulWidget {

  WebViewLoadUI createState() => WebViewLoadUI();

}

class WebViewLoadUI extends State<WebViewLoad>{

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            centerTitle:true,
            backgroundColor: Colors.deepPurple[400],
            title: Text('Web View')),
        body: WebView(
          initialUrl: 'https://google.com',
          javascriptMode: JavascriptMode.unrestricted,

        )
    );
  }
}

Related Post