Show webpage in flutter app – webview_flutter plugin

In this post, you will learn how to display a webpage inside a Flutter app. I will use a Flutter plugin called webview_flutter. You will learn to use this flutter plugin to show a webpage inside your Flutter app.

How to use webview_flutter plugin?

If you have already set up a flutter project, then the first thing you need to do is to add the webview_flutter dependency to your project. Add the below lines in your project’s pubspec.yaml file

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^3.0.4

webview_flutter plugin requires a higher android SDK version. Add the configuration code shown below to the android defaultConfig section by opening android/app/build.gradle in your project.

android {
    defaultConfig {
        minSdkVersion 19
    }
}

Now, you need to import the webview_flutter package.

import 'package:webview_flutter/webview_flutter.dart';

Now, use the the WebView widget to load and render the webpage.

WebView(
            initialUrl: 'https://www.wikipedia.org/', 
            javascriptMode: JavascriptMode.unrestricted,
          )

Here’s the full code.

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  
  @override
  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(
        title: const Text('webview_flutter Example'),
      ),
      body:  const WebView(
            initialUrl: 'https://www.wikipedia.org/', 
            javascriptMode: JavascriptMode.unrestricted,
          )
    );
  }
}


Output:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: