27/12/2019 Tutorial Membuat Webview di Flutter - Tutorial Flutter Indonesia - kucingtekno com

KOMPUTER  MOBILE  CODING N DESIGN  BLOG 

Home  Android  Flutter  Tutorial Membuat Webview di Flutter - Tutorial … Temukan disini... 

Paling Banyak Dicari

Tutorial Membuat Webview di Membuat Tombol

Flutter - Tutorial Flutter Back Pada Action

Bar Di Android
Indonesia Studio

Membuat
Penulis hanamaze Diterbitkan September 24, 2019
Navigation
Drawer Dan
 TAGS ANDROID FLUTTER
Menghubungkan Intent Android
Studio
kucingtekno - Tutorial Flutter Indonesia dengan Membuat
Cara Bongkar
webview merupakan langkah awal dalam mencoba belajar
APK Paling
membuat aplikasi android. Pada tutorial sebelumnya saya pernah
Mudah dengan
menulis tentang bagaimana membuat webview di Android Studio, Advanced Apk Tool
namun kali sedikit berbeda yaitu menggunakan Flutter. Tutorial
membuat webview di Flutter bisa dibilang sangat mudah karena Microsoft Of ce
2019 Dirilis Fitur
dibanding dengan Android Studio , coding di Flutter lebih
Baru dan Tanggal
sederhana.
Peluncurannya

Game
Pertarungan
Tuhan (Fight of
Gods) Diblokir di Indonesia

Membuat Toolbar
Dan Menu Di
Action Bar
Android Studio

Membuat Splash
Screen dan
Progress Bar di
Android Studio
Tutorial membuat WebView di Flutter akan saya mulai dengan
menganggap kalian sudah paham cara instal sampai running Kategori
apilikasi menggunakan Flutter. Jadi jika ada masalah dasar Frekuensi 4G LTE
FDD, TDD, 4G
tentang penggunaan Flutter akan saya bahas di tutorial
PLUS dan Band 4G LTE Indonesia
selanjutnya.

https://www.kucingtekno.com/2019/09/tutorial-membuat-webview-di-flutter.html 1/7
27/12/2019 Tutorial Membuat Webview di Flutter - Tutorial Flutter Indonesia - kucingtekno com

Cara Membuat WebView di Flutter dengan mudah ini saya Kategori

KOMPUTER  MOBILE  CODING N DESIGN  BLOG 
praktekkan menggunakan Visual Studio Editor dan Emulator
smartphone Android , berikut langkah membuat webview di ANDROID ANDROID STUDIO

utter : TemukanDESAIN
ARTIKEL disini... FIREFOX 

1. Buat Projek baru dengan nama FLUTTER GADGET GAMES

terserah kalian, kemudian buka pluggin
WebView di PUBSPEC.YAML
LINUX PROGRAMMING

SOFTWARE TRIK N TIPS

Tambahkan kode berikut di bawah cupertino_icons

WINDOWS 10 WINDOWS 8
utter_webview_plugin: 0.3.0+2 
WINDOWS 8.1 WINDOWS MOBILE
webview_ utter: 0.2.0 

2. Buat File Dart baru dengan nama

tampilku.dart

setelah le tampilku.dart sudah dibuat , kemudian edit dan

sesuaikan halaman web yang diinginkan dengan fornat
http://namaweb lalu perhatikan juga URL dan Text yang ingin di
tampilkan

url: 'https://kucingtekno.com',
      hidden: true,
      appBar: AppBar(title: Text("Kucing Tekno Com ")),

3. Edit le main.dart dan import le

tampilku.dart lalu sesuaikan dengan
codingnya 

Perhatikan import 'tampilku.dart'; harus sesuai dengan nama le

bagian tutorial no.2 diatas

4. Coba Running dan lihat hasilnya


https://www.kucingtekno.com/2019/09/tutorial-membuat-webview-di-flutter.html 2/7
27/12/2019 Tutorial Membuat Webview di Flutter - Tutorial Flutter Indonesia - kucingtekno com

KOMPUTER  MOBILE  CODING N DESIGN  BLOG 

Temukan disini... 

CODING LENGKAP TUTORIAL WEBVIEW FLUTTER :

1 import 'package:flutter/material.dart';
2 import 'tampilku.dart';
3
4
5 void main() => runApp(MyApp());
6
7 class MyApp extends StatelessWidget {
8 // This widget is the root of your application.
9 @override
10 Widget build(BuildContext context) {
11 return MaterialApp(
12 title: 'Flutter Demo',
13 debugShowCheckedModeBanner: false,
14 theme: ThemeData(
15 // This is the theme of your application.
16 //
17 // Try running your application with "flutter run"
18 // application has a blue toolbar. Then, without q
19 // changing the primarySwatch below to Colors.gree
20 // "hot reload" (press "r" in the console where yo
21 // or simply save your changes to "hot reload" in
22 // Notice that the counter didn't reset back to ze
23 // is not restarted.
24 primarySwatch: Colors.blue, 
https://www.kucingtekno.com/2019/09/tutorial-membuat-webview-di-flutter.html 3/7
27/12/2019 Tutorial Membuat Webview di Flutter - Tutorial Flutter Indonesia - kucingtekno com

25 ),
26 home: WebViewInFlutter(),KOMPUTER  MOBILE  CODING N DESIGN  BLOG 
27 );
28 }
Temukan disini... 
29 }

main.dart hosted with ❤ by GitHub view raw

1 name: nikku
2 description: A new Flutter project.
3
4 # The following defines the version and build number for y
5 # A version number is three numbers separated by dots, lik
6 # followed by an optional build number separated by a +.
7 # Both the version and the builder number may be overridde
8 # build by specifying --build-name and --build-number, res
9 # In Android, build-name is used as versionName while buil
10 # Read more about Android versioning at https://developer.
11 # In iOS, build-name is used as CFBundleShortVersionString
12 # Read more about iOS versioning at
13 # https://developer.apple.com/library/archive/documentatio
14 version: 1.0.0+1
15
16 environment:
17 sdk: ">=2.1.0 <3.0.0"
18
19 dependencies:
20 flutter:
21 sdk: flutter
22
23 # The following adds the Cupertino Icons font to your ap
24 # Use with the CupertinoIcons class for iOS style icons.
25 cupertino_icons: ^0.1.2
26 flutter_webview_plugin: 0.3.0+2
27 webview_flutter: 0.2.0
28
29 dev_dependencies:
30 flutter_test:
31 sdk: flutter
32
33
34 # For information on the generic Dart part of this file, s
35 # following page: https://dart.dev/tools/pub/pubspec
36
37 # The following section is specific to Flutter.
38 flutter:
39

https://www.kucingtekno.com/2019/09/tutorial-membuat-webview-di-flutter.html 4/7
27/12/2019 Tutorial Membuat Webview di Flutter - Tutorial Flutter Indonesia - kucingtekno com

40 # The following line ensures that the Material Icons fon

41 KOMPUTER
# included with your application, so thatyou MOBILE 
can use th CODING N DESIGN  BLOG 
42 # the material Icons class.
43 uses-material-design: true
Temukan disini... 
44
45 # To add assets to your application, add an assets secti
46 # assets:
47 # - images/a_dot_burr.jpeg
48 # - images/a_dot_ham.jpeg
49
50 # An image asset can refer to one or more resolution-spe
51 # https://flutter.dev/assets-and-images/#resolution-awar
52
53 # For details regarding adding assets from package depen
54 # https://flutter.dev/assets-and-images/#from-packages
55
56 # To add custom fonts to your application, add a fonts s
57 # in this "flutter" section. Each entry in this list sho
58 # "family" key with the font family name, and a "fonts"
59 # list giving the asset and other descriptors for the fo
60 # example:
61 # fonts:
62 # - family: Schyler
63 # fonts:
64 # - asset: fonts/Schyler-Regular.ttf
65 # - asset: fonts/Schyler-Italic.ttf
66 # style: italic
67 # - family: Trajan Pro
68 # fonts:
69 # - asset: fonts/TrajanPro.ttf
70 # - asset: fonts/TrajanPro_Bold.ttf
71 # weight: 700
72 #
73 # For details regarding fonts from package dependencies,
74 # see https://flutter.dev/custom-fonts/#from-packages

pubspec.yaml hosted with ❤ by GitHub view raw

1 import 'package:flutter/material.dart';
2 import 'package:flutter_webview_plugin/flutter_webview_plu
3
4 class WebViewInFlutter extends StatelessWidget {
5 @override
6 Widget build(BuildContext context) {
7 return WebviewScaffold(
8 url: 'https://kucingtekno.com',
9 hidden: true,

https://www.kucingtekno.com/2019/09/tutorial-membuat-webview-di-flutter.html 5/7
27/12/2019 Tutorial Membuat Webview di Flutter - Tutorial Flutter Indonesia - kucingtekno com

10 appBar: AppBar(title: Text("Kucing Tekno Com ")),

11 ); KOMPUTER  MOBILE  CODING N DESIGN  BLOG 
12 }
13 }
Temukan disini... 

tampilku.dart hosted with ❤ by GitHub view raw

Berikut adalah tutorial membuat webview di Flutter dengan

mudah dan cepat. Semoga membantu teman-teman. Disini saya
masih belajar dan jika ada kekurangan atau kesalahan silakan
komentar nanti akan saya perbaiki lagi.

-
Jangan lupa bagikan ke teman-
teman kamu :)
 Google  Facebook  Twitter

  

Throwing Penguin - Google Akan Merilis

Android Games Nama Android O Pada


https://www.kucingtekno.com/2019/09/tutorial-membuat-webview-di-flutter.html 6/7
27/12/2019 Tutorial Membuat Webview di Flutter - Tutorial Flutter Indonesia - kucingtekno com

Membuat Screenshot Tutorial Membuat

Panjang di Android KOMPUTER 
SliverAppBar Flutter MOBILE  CODING N DESIGN  BLOG 

Temukan disini... 

5 Icon Pack Android Download APK di

ini Bikin Smartphone browser PC | Android

 Atasi Receiver Mouse Update MIUI 10.3.9.0 

Logitech yang Hilang PFGMIXM Redmi Note 7
Telah Tersedia

Jika tidak jelas silakan komentar ya

Terima kasih atas kunjungan Anda.

Emoticon

Enter your comment...

Comment as: Furqon always Sign out

Publish Preview Notify

ABOUT CONTACT SITEMAP DISCLAIMER PRIVACY POLICY TERMS OF SERVICE

   

Copyright © 2019 Simplify All Right Reserved Modi ed by Arlina Design Powered by Blogger


https://www.kucingtekno.com/2019/09/tutorial-membuat-webview-di-flutter.html 7/7