플러터 웹뷰 띄우기

플러터 프로젝트를 생성합니다.

(프로젝트 명은 flutter_webview_test 로 하겠습니다.)

 

 

 

1. 제일 먼저 pubspec.yaml 파일에  webview_flutter: ^3.0.4   를 추가해줍니다. (웹뷰 관련 패키지 버전 지정)

추가하고 상단에 Pub get 을 눌러줍니다. 

 

 

 

2. AndroidManifest.xml 파일에  코드 2줄을 추가합니다.

 

상단에 <uses-permission android:name="android.permission.INTERNET" /> 

-> 인터넷 권한 허용

 

그리고 <application 구문 안쪽에  android:usesCleartextTraffic="true"  를 추가해줍니다.

-> 이건 필수는 아니고 HTTPS가 아닌 암호화되지 않은 트래픽을 사용할 수 있게 해주는 코드입니다. (HTTP 를 사용할때 필요함)

 

 

3. 안드로이드에서는 인터넷 권한을 허용했으니, 이젠 iOS에서 해야할 차례입니다.

가장 하단 Open a project or file 을 눌러서 위에서 생성한 프로젝트를 찾아줍니다. 

 

 

 

4. 생성한 프로젝트의 ios -> Runner.xcodeproj 파일을 눌러서 열어줍니다.

 

 

 

5. 그리고 Info 파일에 App Transport Security Settings 를 추가하고, 그 아래에 Allow Arbitrary Loads 를 YES 값으로 추가합니다.

-> 네트워크 통신할 때 사용되는 보안 설정을 정의합니다. Allow Arbitrary Loads 는 안전하지 않은 연결도 가능하게 허용해줍니다. (HTTP 통신 허용)

 

 

6. 설정은 끝이 낫고, 이제 화면을 구성해 보겠습니다.

lib 폴더안에 screen 디렉토리 파일을 생성해주고, 그 안에 home_screen.dart 파일을 만들었습니다.

 

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

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

  @override
  Widget build(BuildContext context){
    return Scaffold(
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(5),
          child: AppBar(
          ),
        ),
      body: WebView(
        initialUrl: 'https://google.com',
        javascriptMode: JavascriptMode.unrestricted,
      )
    );
  }
}

 

코드는 Scaffold 와 Webview를 사용하여 홈 화면을 구성합니다.

appBar는 필수가 아니지만 appBar 를 넣지않으면  최상단에 배터리,시간 나오는 상태창에 웹뷰가 가리는 문제가 있어서  appBar 를 작은 사이즈로 추가해주었습니다. 

 

(24.04.03 10:07 추가)

SafeArea 라는게 있엇네요 ㄷㄷㄷㄷㄷ 이거 사용하면 가리는 문제 해결됩니다.

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

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

  @override
  Widget build(BuildContext context){
    return Scaffold(
      body: SafeArea(
        child: WebView(
          initialUrl: 'https://google.com',
          javascriptMode: JavascriptMode.unrestricted,
        ),
      )
    );
  }
}

 

 

 

 

7. 그리고 다시 main.dart 파일에 들어와서 필요없는 코드는 다 지우고 아래와 같이 작성해줍니다.

 

앱의 진입점 입니다. 앱의 홈 화면으로 HomeScreen 위젯을 설정하고 있습니다.

 

import 'package:flutter/material.dart';
import 'package:flutter_webview_test/screen/home_screen.dart';

void main() {
  runApp(
    MaterialApp(
      home : HomeScreen(),
    ),
  );
}

 

 

이렇게 하면 google 이 뜨는 웹뷰 플러터 앱이 완성되었습니다. 

 

안드로이드 스튜디오에서 코드를 작성하였기 때문에, 기본적으로 실행하면 안드로이드 시뮬레이터에서 정상작동을 확인 할 수 있습니다.

iOS 시뮬레이터 에서 확인하기 위해서는 아래와 같이 진행해주어야 합니다.

 

(추후에 추가할 예정입니다.)