Membuat Webview di Flutter

Hallo teman-teman gimana masih semangat sampai pertemuan kita yang ke 5 ini ?, masih dong ya.

Nah sekarang kita mau mencoba belajar webview sederhana di flutter ni.

Mungkin ada sedikit pengertian webview dari aku temen-temen. Webview sendiri merupakan, ekstensi class View Android yang memungkinkan temen-temen menampilkan halaman web sebagai bagian dari tata letak aktivitas pada device mobile. Tetapi class ini tidak menyertakan fitur apa pun dari browser web yang dikembangkan sepenuhnya, seperti kontrol navigasi atau kolom URL.

Untuk cara membuat webview diflutter sendiri sebagai berikut :

1. Buat Projek baru dengan nama terserah temen-temen, kemudian temen-temen bisa membuka pluggin WebView di PUBSPEC.YAML

Tambahkan kode berikut di bawah cupertino_icons
flutter_webview_plugin: 0.3.0+2
webview_flutter: 0.2.0

2. Kemudian sesuaikan Pubspec.yaml

name: makan_yok_app
description: A new Flutter project.
# The following line prevents the package from being accidentally published to
# pub.dev using `flutter pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 1.0.0+1
environment:
  sdk: ">=2.12.0 <3.0.0"
# Dependencies specify other packages that your package needs in order to work.
# To automatically upgrade your package dependencies to the latest versions
# consider running `flutter pub upgrade --major-versions`. Alternatively,
# dependencies can be manually updated by changing the version numbers below to
# the latest version available on pub.dev. To see which dependencies have newer
# versions available, run `flutter pub outdated`.
dependencies:
  cupertino_icons: ^1.0.2
  flutter:
    sdk: flutter
  google_fonts: 2.2.0
  url_launcher: ^6.0.20
  webview_flutter: 3.0.1
  flutter_webview_plugin: 0.4.0
dev_dependencies:
  flutter_lints: ^1.0.0
  flutter_test:
    sdk: flutter
# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec
# The following section is specific to Flutter.
flutter:
# The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true
# To add assets to your application, add an assets section, like this:
  assets:
    - assets/
  #   - images/a_dot_burr.jpeg
  #   - images/a_dot_ham.jpeg
  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.dev/assets-and-images/#resolution-aware.
  # For details regarding adding assets from package dependencies, see
  # https://flutter.dev/assets-and-images/#from-packages
  # To add custom fonts to your application, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  #
  # For details regarding fonts from package dependencies,
  # see https://flutter.dev/custom-fonts/#from-packages

3. Selanjutnya sesuaikan main.dart

import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
import 'package:webview_flutter/webview_flutter.dart';
class WebviewPage extends StatelessWidget {
  const WebviewPage({Key? key}) : super(key: key);
@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: WebviewScaffold(
        appBar: AppBar(
          title: Text('LinkedIn'),
        ),
        url: 'https://linkedin.com',
        initialChild: Container(
          color: Colors.redAccent,
          child: const Center(
            child: Text('Waiting.....'),
          ),
        ),
      ),
    );
  }
}

Untuk bagian url nya temen temen bisa menyesuaikan dengan kemauan url yang diinginkan.

Baik temen temen kurang lebih seperti itu yaa, selamat mencobaa, ganbate !!!