How To Open Web Page Url In Webview Using Flutter App

admin_img Posted By Bajarangi soft , Posted On 07-11-2020

In flutter mobile, webview is an important Flutter API which comes in handy when html tags that are not supported by Text widget needs to be displayed in an app.Two major usage of flutter webview is either to open a locally stored html file or display a remote web page using the web url.The previous flutter code example explores how to load and display locally store html file in flutter webview.Here, we will learn how to open a remote web page using the web page url.To make it a bit dynamic, we are going the let the user add the web page url to visit.Once entered, the user will need to click a submit button which will navigate to another page where the web page will be displayed.This is a simple code example to give some insights on how to go about implementing this solution.

How To Open Web Page Url In Webview Using Flutter App

Open Web Page Url In Webview
Step 1 
We cannot directly remove the time stamp from Open Web Page Url In Webview 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.2.0
  flutter_webview_plugin: 0.3.0+2

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



Complete Code For Open Web Page Url In Webview In Flutter
main.dart
import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  TextEditingController _textController =
  TextEditingController(text: 'https://');
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.orange,
          title: Text("Open Web Page URL in webview"
          )),
      body: Center(
          child: Column(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(20.0),
                child: TextField(
                  controller: _textController,
                ),
              ),
              RaisedButton(
                textColor: Colors.white,
                child: Text("Goto Webpage"),
                color: Colors.orange,
                onPressed: () {
                  Navigator.of(context).push(
                      MaterialPageRoute<Null>(builder: (BuildContext context) {
                        return new WebViewWebPage(url: _textController.text);
                      }));
                },
              ),
            ],
          )),
    );
  }
}

class WebViewWebPage extends StatelessWidget {
  final String url;

  WebViewWebPage({this.url});

  @override
  Widget build(BuildContext context) {
    return WebviewScaffold(
      url: url,
      hidden: true,
      appBar: AppBar(
        backgroundColor: Colors.deepOrangeAccent,
          title: Text("Open Web Page Url In Webview")),
    );
  }
}

Related Post