Cara Mudah Menampilkan Web View Pada Flutter
- Maulana Saputra
- https://github.com/eccosuprastyo/flutter/tree/master/webview
Memastikan possible untuk menampilkan sebuah halaman website di dalam aplikasi.
1. Install
pubspec.yaml
dependencies:
webview_flutter: ^0.3.3
kemudian jalankan
flutter pub get
2. Menjalankan Web View
lib/main.dart
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'dart:async';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Web Views',
theme: ThemeData(
primarySwatch: Colors.blue,
fontFamily: "Arial",
textTheme: TextTheme(
button: TextStyle(color: Colors.white, fontSize: 18.0),
title: TextStyle(color: Colors.red))),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
String url = "https://gentle-river-19491.herokuapp.com";
@override
createState() => _MyHomePageState(this.url);
}
class _MyHomePageState extends State<MyHomePage> {
_MyHomePageState(this._url);
String _url;
bool loading = true;
WebViewController _controller;
final Completer<WebViewController> _controllerCompleter = Completer<WebViewController>();
Future<bool> _onWillPop(BuildContext context) async {
if (await _controller.canGoBack()) {
_controller.goBack();
return Future.value(false);
} else {
return Future.value(true);
}
}
Future<bool> startSplashScreen() async {
var duration = const Duration(seconds: 3);
await Timer(
duration,
() => setState(() => loading = false ),
);
return false;
}
@override
void initState() {
super.initState();
startSplashScreen();
}
@override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: () => _onWillPop(context),
child: Scaffold(
body: loading == true ? Center(
child: Text(
'APP LOGO',
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
),
),
) : SafeArea(
child: WebView(
key: UniqueKey(),
javascriptMode: JavascriptMode.unrestricted,
initialUrl: _url,
onWebViewCreated: (WebViewController webViewController) {
_controllerCompleter.complete(webViewController);
},
),
),
),
);
}
}
Sekian untuk kali ini semoga bermanfaat :D untuk lebih lanjut bisa kunjungi link tersebut.