주요 기술

• WebView
• AppBar
• pub.dev(외부 패키지 활용법)

프로젝트에 패키지 추가하기

pub.dev 홈페이지에 접속해서 webview 검색합니다.
flutter.dev팀이 개발한 패키지에 들어간다.

클릭해서 복사 한다.

pubspec.yaml

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.4

pubspec.yaml에 dependencies 맨 아래에 아까 복사해준 것을 붙여넣어준다.
webview_flutter: ^3.0.4: 매이저버전.마이너버전.패치버전 으로 불리는데 마이너버전과 패치버전을 자동으로 업데이트 해주고 매이저버전은 자동으로 패치하지 않게 하는 기능이다.
만약에 매이저버전이 자동으로 업데이트를 하게 된다면 높은 확률로 오류가 나타난다.

WebView 사용하기

HomeScreen.dart

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/@weme',
        javascriptMode: JavascriptMode.unrestricted,
      ),
    );
  }
}

import 'package:webview_flutter/webview_flutter.dart': WebView를 사용
initialUrl: 초기 URL
javascriptMode: JavascriptMode.unrestricted: 자바스크립트모드를 해야지 동영상을 볼수있다.

기본값은 javascriptMode: JavascriptMode.disabled

전(javascriptMode: JavascriptMode.disabled) 후(javascriptMode: JavascriptMode.unrestricted)

AppBar 사용하기

AppBar를 사용 할 때 주의사항이 있다.
코드를 보고 알아보자

HomeScreen.dart

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.black,
        title: Text(
          'wemeBlog'
        ),
        centerTitle: true,
      ),
      body: WebView(
        initialUrl: 'https://velog.io/@weme',
        javascriptMode: JavascriptMode.unrestricted,
      ),
    );
  }
}

appBar: 앱바를 사용 할 수 있다.
centerTitle: true: 안드로이드와 아이폰이 상단 타이틀 배열이 다르다 그래서 둘이 맞게 설정을 해줘야한다.

기본값은 centerTitle: false

전(centerTitle: false) 후(centerTitle: true)

Controller 사용하기

HomeScreen.dart

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

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.black,
        title: Text(
          'wemeBlog'
        ),
        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,
      ),
    );
  }
}

WebViewController? controller: null이 가능하게 선언.
actions[]: 아이콘들을 배치 할 수 있다.
IconButton(onPressed: (){if(controller == null){ return; } controller!.loadUrl(homeUrl);}): 아이콘 버튼을 생성하고 눌렀을 뗴 null값이면 리턴함.
controller!.loadUrl(homeUrl): if문을 통과하고 controller!.loadUrl을 불러온다.(!: 절대로 null이 될 수 없다.)
icon: Icon( Icons.home, )): 아이콘의 이미지를 넣을 수 있다.
final homeUrl = "https://velog.io/@weme": URL 주소 변수로 선언.
onWebViewCreated: (WebViewController controller) { this.controller = controller; }:

Android와 IOS에서 HTTP 프로토콜을 사용하는 법

http://
https://
둘 있는데 http는 보안상 취약해서 안드로이드와 IOS에서 막고 있다.
http를 사용 될 떄가 있으므로 풀어줘보자.

IOS 설정

info.plist에 들어가서

<key>NSAppTransportSecurity</key>
	<dict>
	    <key>NSAllowsLocalNetworking</key>
	    <true/>
	    <key>NSAllowsArbitraryLoadsInWebContent</key>
	    <true/>
	</dict>

입력해주면 된다.

Android 설정

AndroidManifest.xml에 들어가서

 <uses-permission android:name="android.permission.INTERNET" />
 <application
       android:label="blog_web_app"
       android:name="${applicationName}"
       android:icon="@mipmap/ic_launcher"
      android:usesCleartextTraffic="true">

<uses-permission android:name="android.permission.INTERNET"/>: 배포 할 떄 꼭 넣어야지 인터넷을 사용 할 수 있음.
android:usesCleartextTraffic="true": http를 사용 할 수 있음.