Flutter WebView 위젯

이번 글에서는 flutter의 webview를 이용해 홈페이지를 웹 앱으로 만들어본다.

프로젝트 결과는 다음과 같이 나온다.

프로젝트 결과

 

우선 flutter 프로젝트를 생성하고 android/app/main/res 폴더 안에 있는 AndroidManifest.xml로 들어간다.

그리고 그 안에 다음 코드를 추가해준다.

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <uses-permission android:name="android.permission.INTERNET"/><!--추가 할 코드-->
    <application
        android:label="flutter_example"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher">
...

이 코드는 어플리케이션이 휴대폰의 인터넷에 접속할 수 있도록 허용해주는 코드이다.

 

다음으로 pubspec.yaml로 들어간다.

이 파일 안의 dependencies에 다음과 같이 코드를 추가시켜준다.

이 글을 쓰는 시점에서 가장 최신 버전인 4.2.2 버전을 쓴다.

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: 4.2.2 #추가 할 코드

이후 위에 뜨는 pub get을 눌러준다.

다음과 같이 창이 뜨면 정상적으로 동작된 것이다.

이제 lib 폴더 안에 있는 main.dart 파일로 돌아가 모든 코드를 지워준다.

그리고 다음과 같이 코드를 써준다.

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() {
  runApp(WebViewExample());
}

맨 첫 줄에 있는 import는 앱이 material design을 사용할 수 있도록 해준다.

두 번째 import는 이번에 배울 webview가 들어있는 라이브러리이다.

 

void main() 안의 runApp은 파라미터로 받은 위젯을 띄워준다.

WebViewExample()은 위젯을 return한다.

 

그 다음으로 WebViewExample class를 선언해준다.

이후 Webview의 컨트롤러 변수를 생성해준다.

class WebViewExample extends StatelessWidget{
  WebViewExample({Key? key}):super(key: key); //생성자

  WebViewController controller = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted) //자바스크립트 사용여부
  ..loadRequest(Uri.parse("https://ti-project-11.tistory.com")); //초기 URL

WebViewExample 뒤에 extends StatelessWidget이 붙어있다.

이는 해당 클래스가 StatelessWidget 클래스를 상속받는다는 뜻이다.

때문에 WeBViewExample은 상태가 없는 클래스가 된다.

 

그 아래 있는 "WebViewExample({Key? key}):super(key: key);"는 생성자를 나타낸다.

상속받기 때문에 부모 클래스의 생성자를 의미하는 super를 사용한다.

 

그 밑에는 WebViewController를 생성해준다.

WebViewController()생성자를 이용해 생성하였고, 케스케이드 연산자를 이용해 초기 URL과 javascript 사용 여부를 설정해주었다.

 

클래스와 캐스케이드 대한 내용이 이해가 가지 않을 경우 이전 글을 참고해보길 바란다.

2023.06.14 - [단기 프로젝트] - 프로젝트1_1. Dart의 기본 (3) - Class

프로젝트1_1. Dart의 기본 (3) - Class

2023.06.16 - [단기 프로젝트] - 프로젝트1_1. Dart의 기본 (4) - Class_2

프로젝트1_1. Dart의 기본 (4) - Class_2

 

다음으로는 build 메서드를 우리가 원하는 대로 override 해준다.

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.blue,
          title: const Text("ti_project_11"),
          centerTitle: true,
          actions: [
            IconButton(
                onPressed: (){
                  if(controller != null) {
                    controller!.loadRequest(Uri.parse("https://ti-project-11.tistory.com"));
                  }
                },
                icon: const Icon(Icons.home),
            ),
          ],
        ),
        body: WebViewWidget(
            controller: controller,

        ),
      ),
    );
  }

Widget build(BuildContext context) 메서드를 통해 우리가 띄우고자 하는 widget을 설정해준다.

여기서는 MaterialApp 위젯 안에 Scaffold 위젯을 넣었다.

 

MaterialApp은 이 위젯이 material design을 사용한 앱 임을 알려주고, Scaffold  위젯은 사용할 앱의 뼈대를 잡아주는 위젯이다.

 

Scaffold 위젯 안에 appBar 파라미터와 body 파라미터가 있다.

 

appBar는 앱의 상단에 위치할 위젯을 정한다.

여러 파라미터가 있는데 각각 다음과 같은 역할을 한다.

• backgroundColor : appBar의 배경 색을 지정한다.
• title : appBar에 띄울 제목을 지정한다.
• centerTitle : true로 지정하면 제목이 가운데 정렬 된다.
• actions : 버튼과 같은 요소 처럼 appBar에서 이벤트가 발생하는 요소를 넣어준다.

actions 안에 IconButton이 있고, 버튼의 onPressed로 controller!.loadRequest가 있다.

이 코드가 의미하는 바는 만약 버튼이 눌리면 파라미터 값으로 들어온 url을 띄운다는 것이다.

 

 

body에는 WebViewWidget 이란 이름의 위젯이 있다.

파라미터로 controller가 있고 그 안에 controller가 있는데, 뒤에 있는 controller는 우리가 위에서 생성해준 WebViewController를 의미한다.

 

전체 코드는 다음과 같다.

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() {
  runApp(WebViewExample());
}

class WebViewExample extends StatelessWidget{
  WebViewExample({Key? key}):super(key: key);

  WebViewController controller = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..loadRequest(Uri.parse("https://ti-project-11.tistory.com"));


  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.blue,
          title: const Text("ti_project_11"),
          centerTitle: true,
          actions: [
            IconButton(
                onPressed: (){
                  if(controller != null) {
                    controller!.loadRequest(Uri.parse("https://ti-project-11.tistory.com"));
                  }
                },
                icon: const Icon(Icons.home),
            ),
          ],
        ),
        body: WebViewWidget(
            controller: controller,

        ),
      ),
    );
  }
}

이제 실행을 해보면 이 블로그의 메인 화면이 뜰 것이다. 

아무 글이나 들어간 상태로 appBar에 있는 홈 버튼을 누르면, 다시 메인 화면으로 돌아올 것이다.