[Flutter] WebView 띄우기 - ( week 4 )

책 목록에서 책을 선택했을 때 책에 대한 자세한 설명은 웹을 띄워서 보여주도록 한다.

API에서 previewLink의 값을 활용해서 webview를 띄우도록 한다.

• previewLink: "http://books.google.co.kr/books?id=8OxGcCJViU4C&pg=PA160&dq=%24q&hl=&cd=1&source=gbs_api",

 

WebView

webview는 앱 내에서 웹 브라우저 컴포넌트를 사용해 웹 페이지를 띄우는 것을 말한다. 즉, 앱 내에 웹 브라우저를 넣어 주는 것이다.

 

대표적으로 webview를 사용한 것으로 Naver 앱이 있다.

 

네이버 앱은 UI가 모바일 웹사이트와 거의 동일한데 껍데기만 앱으로 만들고 내부는 WebView를 사용해서 모바일 사이트를 그대로 띄우는 방식으로 구현되어 있는 것이다.

 

WebView를 사용하면 낮은 비용으로 빠르게 개발할 수 있으며 앱 업데이트와 상관없이 즉시 변경사항 배포가 가능하다.

하지만 네이티브와 같은 사용자 경험을 온전하게 제공하기 어려우며 앱 성능상의 제약도 따른다.

 

WebView 패키지 설치

WebView

 

WebView 문서 페이지에서 설치 명령어를 터미널에 입력하면 설치가 진행된다.

 $ flutter pub add webview_flutter

설치가 끝나고 나면 세팅이 필요하다.

android 폴더 > app > build.gradle에서 일부 내용을 수정한다.

defaultConfig 내부의 minSdkVersion을 19로 수정해야 한다.

    defaultConfig {

        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).

        applicationId "com.example.watcha_pedia"

        // You can update the following values to match your application needs.

        // For more information, see: https://docs.flutter.dev/deployment/android#reviewing-the-gradle-build-configuration.

        //minSdkVersion flutter.minSdkVersion

        minSdkVersion 19

        targetSdkVersion flutter.targetSdkVersion

        versionCode flutterVersionCode.toInteger()

        versionName flutterVersionName

    }

이유는 버전이 19 이후로부터 webview 기능이 사용가능하기 때문이다.

 

여기까지 진행하고 나서 이제 앱에서 사용하기 전에 앱을 재설치해주어야 한다.

앱을 정지하고 main.dart에서 Run Without Debugging을 클릭하면 다시 앱을 설치하고 실행한다.

 

앱이 다시 실행되고 나면 이제 WebView 패키지를 사용해서 위젯을 만든다.

 

WebViewPage

검색어를 입력하고 나온 책을 클릭했을 때 생성될 페이지가 필요하다.

class WebViewPage extends StatelessWidget {

  WebViewPage({super.key, required this.url});

  String url;

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        backgroundColor: Colors.grey,

        title: Text(url),

      ),

      body: WebView(initialUrl: url),

    );

  }

}

 

여기서 WebView를 사용하려고 할 때 에러가 발생한다. 패키지 임포트만 해주면 해결되어야 하는 문제지만 만약 webview 버전이 4.1.0 이상인 경우에는 임포트를 해도 해당 함수를 찾지 못하는 문제가 있다. 이럴 때는 pubspec.yaml 파일에서 패키지의 버전을 수정해 보면 해결된다.

  webview_flutter: ^3.0.4

 

WebView 위젯은 속성으로 initialUrl을 받는데 이 부분에 띄워줄 url을 넣으면 WebView가 보이게 된다.

이제 book의 previewLink를 해당 url로 전달해 준다.

 

리스트를 생성할 때 기능을 추가해 준다.

    return ListTile(

      onTap: () {

        Navigator.push(

          context,

          MaterialPageRoute(

            builder: (context) => WebViewPage(

              url: book.previewLink.replaceFirst("http", "https"),

            ),

          ),

        );

      },

리스트의 아이템이 클릭될 때 WebView페이지를 띄워준다.

이제 앱에서 검색해서 뜬 리스트 중 하나를 눌러본다.

선택한 아이템의 previewLink에 해당하는 페이지를 WebView로 띄워준다.