https://pub.dev/packages/webview_flutter
현재 날짜 기준 최신 버전은 4.0.4버전인데, 이 글은 4.0.2버전을 기준으로 작성했다.
# pubspec.yaml
dependencies:
flutter:
sdk: flutter
#...
webview_flutter: ^4.0.2
#...
webview_flutter: ^4.0.2 추가
# AppBar 구현하기
home_screen.dart
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
class HomeScreen extends StatelessWidget {
const HomeScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.blue,
title: Text('ICT Story'), // title
centerTitle: true, // title 위치
),
//...
);
}
}
# WebView 4.x 버전 대응
main.dart
import 'package:flutter/material.dart';
import 'package:web_view_android/screen/home_screen.dart';
void main() {
WidgetsFlutterBinding.ensureInitialized();
runApp(MaterialApp(
home: HomeScreen(),
));
}
WidgetsFlutterBinding.ensureInitalized(); 추가
이 함수는 Flutter 프레임워크가 앱을 실행할 준비가 될때까지 기다린다.
원래 이 함수는 runApp()을 main()함수에서 사용하면 자동으로 실행되는 함수이다.
WebView 4.x 버전에서는 WebView를 Stateless widget에 사용하기 위해 이 함수를 넣어줘야 한다.
home_screen.dart
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
final homeUrl = Uri.parse('https://knoow.tistory.com');
class HomeScreen extends StatelessWidget {
WebViewController controller = WebViewController()
..setJavaScriptMode(JavaScriptMode.unrestricted)
..loadRequest(homeUrl);
HomeScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.blue,
title: Text('ICT Story'),
centerTitle: true,
actions: [
IconButton(
onPressed: () {
controller.loadRequest(homeUrl);
},
icon: Icon(
Icons.home,
))
],
),
body: WebViewWidget(
controller: controller,
),
);
}
}
먼저, 홈페이지 주소를 Uri.parse() 함수를 사용해서 선언한다.
👉 final homeUrl = Uri.parse('https://knoow.tistory.com');
그리고 WebViewController를 선언과 동시에 초기화한다.
👉 WebViewController controller = WebViewController() ...
loadRequest() 함수를 사용해서 IconButton을 눌렀을 때, 홈페이지를 로드할 수 있도록 한다.
👉 controller.loadRequest(homeUrl);
마지막으로, WebViewWidget을 추가하면 된다.
👉 body: WebViewWidget(...)
# Permission
Android 또는 iOS에서 WebView를 사용하기 위해서는 HTTP 프로토콜 사용을 위한 권한을 열어줘야한다.
iOS
ios > Runner > info.plist
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsLocalNetworking</key>
<true/>
<key>NSAllowsArbitraryLoadsInWebContent</key>
<true/>
</dict>
Android
android > app > src > main > AndroidManifest.xml
INTERNET 권한과 usesCleartextTraffic 옵션을 추가해주면 된다.
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.web_view_android">
<uses-permission android:name="android.permission.INTERNET"/>
<application
android:label="web_view_android"
android:name="${applicationName}"
android:icon="@mipmap/ic_launcher"
android:usesCleartextTraffic="true">