WebView

• pubspec.yaml파일에서 cupertino_icons 밑에 webview_flutter를 추가한다.

• andriod - app - build.gradle에 minSdkVersion 20을 설정 해준다.

• WebView()를 불러오면 패키지가 import 된다.

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://velog.io/@sjho0428',
      // initialUrl : WebView를 처음 실행시켰을 때 어떤 사이트를 띄울건지 정한다.
    ));
  }
}

여러가지 설정

javascriptMode

• javascript 사용설정을 하지않아 위와 같은 에러 메시지를 볼 수 있다.
• javascriptMode: 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://velog.io/@sjho0428',
      javascriptMode: JavascriptMode.unrestricted,
      // javascript 설정
    ));
  }
}

AppBar

• 페이지 상단에 있는 Bar를 AppBar라고 한다.
• AppBar는 Scaffold 위젯에서 사용한다.
• AppBar는 andriod 경우 기본 정렬이 좌측이지만 ios경우 중앙에 위치한다.
• centerTitle: true 를 사용해서 중앙으로 위치시킬수 있다.

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(
        appBar: AppBar(
          title: Text('Hello'),
          centerTitle: true,
          // 중앙 정렬
        ),
        body: WebView(
          initialUrl: 'https://velog.io/@sjho0428',
          javascriptMode: JavascriptMode.unrestricted,
        ));
  }
}

Controller

• 위젯들을 프로그램적으로 조종할 수 있게 제공해주는 것이다.
• WebView에는 onWebViewCreated라는 파라미터가 있다.
• onWebViewCreated에는 하나의 파라미터를 받는 함수를 실행할 수가 있다. 이 파라미터에는 WebViewController controller를 받는다.
• onWebViewCreated 정의를 살펴보면 다음과 같다.

• onWebViewCreated의 타입인 WebViewCreatedCallback?을 확인해보면 WebViewController controller를 제공하는 하나의 함수인것을 확인할 수 있다.

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(
        appBar: AppBar(
          backgroundColor: Colors.orange,
          title: Text('Hello'),
          centerTitle: true,
        ),
        body: WebView(
          onWebViewCreated: (WebViewController controller){},
          // 보통 앞에 on이 붙으면 어떤행동이 시작됐을 때를 말한다.
          // 여기서는 WebView가 생성이 됐을 때를 말한다.
          // WebView가 생성이 되면 controller를 함수에서 파라미터로 받을 수 있다.
          // controller를 생성하게 되면 controller로 WebView를 마음대로 조종할 수 있다.
          // onWebViewCreated가 실행되고 controller를 불러왔을 때, 만약 controller가 어딘가에 저장되어있다면 그 저장되어있는 곳에서 계속 빼내어 사용할 수가 있다.
          initialUrl: 'https://velog.io/@sjho0428',
          javascriptMode: JavascriptMode.unrestricted,
        ));
  }
}

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

class HomeScreen extends StatelessWidget {
  WebViewController? controller;
  // null이 가능하게 controller를 선언한다.

  HomeScreen({Key? key}) : super(key: key);
  // const를 지워준다.
  //  const의 경우 빌드타임에 값을 알고있을때만 사용 가능하다. 
  // WebViewController? controller로 선언하는순간 controller 값은 언제든 바뀔 수 있기 때문에 사용이 불가능하다.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.orange,
          title: Text('Hello'),
          centerTitle: true,
        ),
        body: WebView(
          onWebViewCreated: (WebViewController controller) {
            this.controller = controller;
            // this.controller - 위젯의 컨트롤러
            // controller - 파라미터에 들어온 컨트롤러
          },
          initialUrl: 'https://velog.io/@sjho0428',
          javascriptMode: JavascriptMode.unrestricted,
        ));
  }
}

controller 사용해서 홈버튼 만들기

• IconButton을 생성하고 홈버튼을 만든다.
• onPressed 함수에 controller를 넣어준다.
• controller를 그냥 사용하면 안되고 앞서 WebViewController? controller에서 null이 가능하다고 했기 때문에 null인 경우를 처리해야 한다.
• if문을 사용해서 null일 경우 아무것도 안하고 return 하도록 한다.
• null이 아닐경우 controller.loadUrl(url);을 실행하게 되는데 여기서 에러가 발생하게 된다. controller가 null값일 수 있기 때문에 loadUrl을 실행할 수 없다고 뜬다.
• 앞서 if문에서 null일 경우 아무것도 안하도록 설정해서 controller가 절대 null이 될 수 없다. 하지만 Android Studio에서는 인식을 하지 못해 controller!를 사용해야 한다.

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

class HomeScreen extends StatelessWidget {
  WebViewController? controller;
  final homeUrl = 'https://velog.io/@sjho0428';

  HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.orange,
          title: Text('Hello'),
          centerTitle: true,
          actions: [
            IconButton(
              onPressed: () {
                if (controller == null) {
                  return;
                }
                controller!.loadUrl(homeUrl);
              },
              icon: Icon(
                Icons.home,
              ),
            )
          ],
        ),
        body: WebView(
          onWebViewCreated: (WebViewController controller) {
            this.controller = controller;
          },
          initialUrl: homeUrl,
          javascriptMode: JavascriptMode.unrestricted,
        ));
  }
}