[Flutter] 1.3 Flutter webview 설정하기

이번 프로젝트의 목적은 flutter 와 웹뷰를 이용하여 최대한 빠르게 프로젝트를 구성하여 사용자의 재유입을 확인하고 프로젝트가 얼마나 사용자의 니즈에 맞는지 확인하기 위한 프로젝트입니다. 

목표 : 빠른 어플개발을 통해 사용자의 니즈를 확인하기

 

이 페이지를 통해 아래 정보를 확인하실 수 있습니다.

1. webview란 무엇인가?
2. webview를 설정하여 페이지를 android 앱으로 생성하기

---

1. webview란 무엇인가?

webview란 안드로이드 앱 내에서 사용가능한 인터넷 브라우저 입니다. 

 

안드로이드 webview를 이용하는 이유는 아래와 같습니다.

안드로이드 네이티브 앱 개발에 비해 개발이 비교적 쉽고 빠릅니다. 

기기간의 호환성을 해결하기가 상대적으로 편리합니다. 

타 웹사이트 링크로 가는 기능등을 지원하기 위해 사용됩니다. 

 

이번 프로젝트에서는 웹서버를 미리 생성해 둔 후 해당 웹서버를 앱으로 만드는 과정을 최대한 간편하게 하기 위해서 webview를 설정하여 작업합니다.

---

2.webview를 설정하여 페이지를 android 앱으로 생성하기

먼저 dependencies에 webview-flutter 모듈을 사용하도록 명시해 주어야 합니다. 

  webview_flutter: ^0.3.22+1      # <== 이 라인을 추가

vscode 에서 flutter 를 수정하겠습니다.

 

다음으로  Ios의 경우 plist 파일을 편집해야합니다. (Ios\Runner\info.plist)

이부분은 아이폰에 배포하는 경우 필요한 설정으로 해당 프로젝트에서는 사용되지 않습니다...

 

    <key>io.flutter.embedded_views_preview</key>
    <string>YES</string>

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

 

android의 android manifest.xml 파일 편집합니다.  (android\app\srcmain\android\Manifest.xml)

android:usesCleartextTraffic="true" 

 

이제 main dart에 와서 main화면 작업을 수행합니다. 

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: WebView(
          initialUrl: 'https://www.naver.com/',
          javascriptMode: JavascriptMode.unrestricted,
        ),
      ),
    );
  }
}

 

필자는 naver를 통해 예시를 들었지만... 여러분은 여러분의 사이트를 직접 입력해서 테스트 해주시기 바랍니다. 저 혼나요...