[Flutter] WebView

WebView란?

앱 내에 웹 콘텐츠를 간단히 표시할 수 있게 해주는 패키지이다.

WebView 사용해보기

• PlatformException 오류 발생 시: Terminal에 flutter clean 명령어를 입력하는 방법으로 해결할 수 있다.
  • Native 코드가 포함되어 있는 패키지의 경우 처음부터 다시 패키징을 해주어야 제대로 사용할 수 있기 때문이다.

WebView 3.x.x

Scaffold(
  body: WebView(
    initialUrl: '홈페이지 URL',
    javascriptMode: JavascriptMode.unrestricted,
  )
);

• initialUrl: 최초 실행 될 URL 링크
• javascriptMode: WebView에서 자바스크립트를 허용하게 하는 코드

WebView 4.x.x

메인 함수 안에 WidgetsFlutterBinding.ensureInitialized(); 코드를 작성한다.

• 플러터 프레임워크가 앱을 실행할 준비가 될 때까지 기다린다.
• main함수 안에 runApp만 있다면 자동으로 실행하는 코드이지만, WebView 프레임워크를 사용할 때는 따로 지정해주어야 한다.
  

App bar 생성하기

AppBar
- appBar: AppBar(
	title: Text('텍스트'),
	centerTitle: true,
),

최초 설정은 안드로이드는 왼쪽 정렬, 아이폰은 가운데 정렬이다. 따라서 centerTitle 파라미터를 통해 두 기기 모두에서 가운데 정렬로 타이틀을 보여주도록 설정해주었다.

Controller 사용하기

WebView 3.x.x

class HomeScreen extends StatelessWidget {
  WebViewController? controller;

  HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('텍스트'),
        actions: [
          IconButton(
              onPressed: (){
                if(controller == null) {
                  return;
                }
                controller!.loadUrl('홈페이지 URL');
              },
              icon: Icon(
                Icons.home,
              ),
          ),
        ],
      ),
      body: WebView(
        onWebViewCreated: (WebViewController controller){
          this.controller = controller;
        },
        initialUrl: '홈페이지 URL',
        javascriptMode: JavascriptMode.unrestricted,
      )
    );
  }
}

• WebViewController를 선언
• IconButton을 통해 AppBar에 아이콘으로 된 버튼을 추가해 주었다.
  • onPressed: 버튼을 눌렀을 때 어떤 동작을 할 것인지 선언.
  • icon: 어떤 아이콘을 버튼으로 만들 것인지 선언. Icon() 함수를 이용해 선언해주었다. Icons.home을 통해 플러터에서 기본으로 제공하는 아이콘을 사용하였다.

WebView 4.x.x

final homeUrl = Uri.parse('홈페이지 URL');

class HomeScreen extends StatelessWidget {
  WebViewController controller = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..loadRequest(homeUrl);

  HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('텍스트'),
        actions: [
          IconButton(
              onPressed: (){
                controller.loadRequest(homeUrl);
              },
              icon: Icon(
                Icons.home,
              ),
          ),
        ],
      ),
      body: WebViewWidget(
        controller: controller,
      ),
    );
  }
}

• WebView가 WebViewWidget 으로 변경
  • WebViewWidget에는 controller만 선언
  • 그 외의 내용은 controller를 선언하면서 선언
• URL이 아닌 URI를 사용
  • URL vs. URI? URI가 URL을 포함하는 관계이다.