Flutter - Web View (프로젝트 세팅)

Web View

어떤 웹사이트를 앱에 패키징하는걸 웹 뷰라고 합니다.

WebView를 사용하면 원래 앱애 존재하던 것처럼 사용할 수 있습니다.

블로그 사이트를 웹 뷰로 제작해보겠습니다.

---

주요 기술

• Web View : 웹뷰에 웹사이트를 넣습니다.
• App Bar : 앱 상단의 디자인을 담당합니다.
• pub.dev (외부 패키지 활용법) : 오픈소스 라이브러리들이 모여있는 사이트 입니다.

---

프로젝트에 패키지 추가

pub.dev 사이트 접속

사이트에 접속해서 중앙 검색창에 webview를 검색합니다.

flutter.dev (플러터 공식 개발팀)이 올린 webview_flutter를 클릭해 들어갑니다.

들어가서 맨위 flutter_webview 이름에 마우스를 올려놓으면 옆에 복사버튼이 있는데 복사해줍니다.

이제 프로젝트의 pubspec.yaml 파일로 들어와서 중간쯤에 dependency 부분을 찾습니다.

dependency 하위에 복사한걸 붙여넣고 pub get을 눌러줍니다.

dependencies:  
  flutter:  
    sdk: flutter  


  # The following adds the Cupertino Icons font to your application.  
  # Use with the CupertinoIcons class for iOS style icons. 
  cupertino_icons: ^1.0.2  
  webview_flutter: ^3.0.0   # 4.2.1이 최신 버전인데 학습용으로 3.0.0을 사용함

yaml 파일의 버전에 ^ 표시가 붙은것을 확인 할 수 있습니다.

버전은 . 을 기준으로 메이저, 마이너, 패치 버전을 뜻하는데,

숫자 앞에 ^가 붙으면 자동 업데이트를 안하겠다는 의미입니다.

마이너 버전이나 패치버전은 자동 업데이트가 되어도 상관없지만,

메이저 버전이 바뀌면 사용법 자체가 달라질 수도 있기 때문에 표시를 해주었습니다.

그리고, Web View는 몇가지 추가 설정이 더 필요 합니다.

다시 pub.dev 사이트의 flutter_webview 부분에서 조금 밑으로 내리다보면,

Android Platform View 항목이 있습니다.

SDK 버전의 최소값을 설정하는 부분인데 사이트에 나온 버전대로 변경해줍시다.

프로젝트의 android/app/build.gradle 파일로 이동합니다.

조금 내디가 보면 DefaultConfig 부분에 minSdkVersion이 보입니다.

사이트에 나온대로 minSdkVersion 20 으로 설정해줍니다.

이렇게 안드로이드 세팅을 해주면 iOS, Android 모두 Web View를 사용할 수 있게 됩니다.