[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출! 강의을 참고하여 작성하였습니다.
모바일 앱의 화면은 앱 위젯의 조합과 모바일 웹으로 구성되어 있습니다.
앱에서 모바일 웹을 사용하는 이유는다양합니다. 개발 공수 절약 적인 부분도 있고, 웹과 같이 사용하기 위해서 사용하는 경우도 있습니다. 이번 포스트는 Flutter 에서 모바일 웹을 보여줄 수 있는 위젯인 WebView 사용하는 방법에 대해서 공유하겠습니다.
Pub Dev
먼저, Flutter 기본 내장 위젯만으로 앱을 구성하는 것은 힘듭니다. 이런 어려움을 도와주기 위해서 많은 개발자들이 오픈 소스로 유용한 라이브러리를 제공하고 있습니다. Dart (Flutter) 도 오픈소스 사이트가 존재하며 다양한 오픈소스가 업로드 되고 있습니다.
Flutter 에서 WebView 을 표현할 때 오픈소스에서 제공하는 위젯으로 작업하겠습니다.
먼저, WebView 오픈소스를 적용하기 위해서 pub.dev 사이트에 접속합니다.
검색창에 webview 라고 입력하면 여러 오픈소스 라이브러리가 나오는데요.
오른쪽에 popularity 을 눌러주어 가장 인기있는 라이브러리 정렬을 합니다.
그 뒤 webview_flutter 라는 오픈소스를 클릭 후 복사하기 버튼을 클릭합니다.
복사 하였으면 pubspec.yzmi 파일로 접근하여 dependencies 아래에 붙여 넣습니다. (필자는 3.0.0 버전으로 dependencie 하였습니다.
복사한 값을 넣으면 webview_flutter: ^3.0.0 으로 표시 될텐데요.
웃음 표시(캐롯) 의 의미는 캐롯이 있는 부분의 업데이트 안한다는 의미입니다. 지금 보면 버전이 XX.XX.XX 로 표시 하고 있습니다. 이 버전을 점(.) 기준으로 나눠서 보면 {메이저}.{마이너}.{패치} 로 버전을 표시하고 있습니다. 여기서 캐롯이 있는 위치를 보면 메이저이고, 그 메이저 버전의 업데이트를 막는다는 것을 확인할 수 있습니다.
만약, 라이브러리가 잘 적용이 안된다면, Android Studio 하단 terminal에 clean 명령어 입력하시면 됩니다.
$ flutter clean
weview_flutter 라이브러리로 웹사이트 열기
웹뷰 위젯을 작성하겠습니다. HomeScreen class 을 만들고요.
import 'package:flutter/material.dart';
import 'package:startwebview/screen/home_screen.dart';
void main() {
runApp(
MaterialApp(
home:HomeScreen(),
)
);
}
WebView을 입력하면 자동으로 import 할 목록이 나오는데 여기서 webview_flutter 가 보일 것입니다. webview_flutter을 선택하여 import 시킵니다.
loadUrl은 initialUrl 에 입력하면되고, 웹사이트에서 제공하는 javascript을 사용 시 JavascriptMode.unrestricted 을 사용하여 활성화 합니다.
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(
body: WebView(
initialUrl: "https://faith-developer.tistory.com", // load할 Url
javascriptMode: JavascriptMode.unrestricted, // javascript 활성화
)
);
}
}
요즘 Https 로 보안을 강화한 프로토콜을 사용하는데요. 만약 Http를 앱에서 사용하고 싶을 경우는 다음 포스트에서 확인 가능
App Bar
웹뷰만 넣기 아쉬우니 간단히 App Bar을 넣는 방법을 가이드하겠습니다.
Scaffold을 보면 Appbar 을 제공하고 있습니다. 제공하는 파라미터에 AppBar 위젯을 생성하여 넣으면 됩니다.
Scaffold(
appBar: AppBar(
title: Text("KCS Factory"),
centerTitle: true,
backgroundColor: Colors.orange,
),
Controller
Flutter는 위젯들을 프로그램적으로 조절하기 위해서 Controller을 제공하고 있습니다.
WebView 도 Controller 를 제공하고 있는데요. AppBar의 홈 버튼을 클릭 하면 URL 이 로드되는 것으로 Controller 사용법을 보겠습니다.
class HomeScreen extends StatelessWidget {
WebViewController? controller;
HomeScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
var homeUrl = "https://faith-developer.tistory.com";
return Scaffold(
appBar: AppBar(
title: Text("KCS Factory"),
centerTitle: true,
actions: [
IconButton(
onPressed: () {
controller?.loadUrl(homeUrl);
},
icon: Icon(Icons.home))
],
backgroundColor: Colors.orange,
),
body: WebView(
onWebViewCreated: (WebViewController controller) {
this.controller = controller;
},
initialUrl: homeUrl,
javascriptMode: JavascriptMode.unrestricted,
));
}
}WebView에서 Controller 설정하는 방법은 WebView 위젯 안의 onWeViewCreated 을 통해서 설정할 수 있습니다.
onWebViewCreated: (WebViewController controller) {
this.controller = controller;
},여기서 주의할 점은 WebView가 Create 할 때 저 controller 을 가져오고 있기에 WebView만 선언하고 앱 실행 후 onWeViewCreate 을 추가 한다음 HotWillLoad 을 했을 경우 저 controller를 못가져오게 됩니다.
contoller 가 잘 정의 되었다면 원하는 위치에 controller.loadUrl() 처럼 controller를 사용할 수 있습니다.
IconButton(
onPressed: () {
controller?.loadUrl(homeUrl);
},
icon: Icon(Icons.home))
Tip
Naming에서 on으로 시작하는 것은 어떤 행동을 시작했을 때의 의미합니다.
예를들어 onTouch 라고 하면 터치가 일어났을 때 라는 것을 의미합니다.
참고
