[flutter] 웹사이트를 웹뷰 만들기

ㅁ 들어가며

ㅇ  코드팩토리의 플러터 프로그래밍 책을 보며 실습한 내용이다.

ㅇ 웹뷰를 통해 웹앱을 만드는 과정을 정리하였다.

ㅇ 소스는 이곳

 

ㅁ blogWebApp 프로젝트 생성

 

ㅁ pubspec.yaml 설정

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  # webview를 위한 플러그인 추가
  webview_flutter: 3.0.4

 ㅇ 플러그인 갱신을 위해 Put get을 클릭한다.

 

ㅁ AndroidManifest.xml 수정

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    # 인터넷 사용권한
    <uses-permission android:name="android.permission.INTERNET"/> 
    <application
        android:label="blog_web_app"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher"
        # http 접속권한
        android:usesCleartextTraffic="true">
        ........

 ㅇ 인터넷 접속과 http 접근 권한을 설정하였다.

 ㅇ 안드로이드 정책으로 기본 http 접근 권한을 막고 있었다.

 ㅇ [flutter] 안드로이드 웹뷰 URL 호출 에러 ERR_CLEARTEXT_NOT_PERMITTED
      ㄴ http 접근 시 권한 오류의 발생과 해결방법 정리

 

ㅁ Info.plist 변경

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

 ㅇ iOS의 http 프로토콜 사용 설정을 위해 Info.plist에 위 코드를 추가한다.

 

ㅁ Screen 폴더 생성

 ㅇ 복잡한 파일 구조의 정리를 위해 폴더를 생성한다.

 

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

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

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

class HomeScreen extends StatelessWidget {
  // 생성자
  HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Text('Home Screen'),
    );
  }
}

 

 

ㅁ 웹뷰 연동하기

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: WebView(
        initialUrl: 'https://peterica.tistory.com',
        javascriptMode: JavascriptMode.unrestricted,
      ),
    );
  }
}

 

 

ㅁ 홈 버튼 구현하기

import 'package:flutter/material.dart';
// 웹뷰 플러그인
import 'package:webview_flutter/webview_flutter.dart';

class HomeScreen extends StatelessWidget {
  // 컨트롤러 변수
  WebViewController? controller;

  // 생성자
  HomeScreen({Key? key}) : super(key: key);

  // 웹뷰 연동하기
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        title: Text('피터의 개발이야기'),
        centerTitle: true,

        // 홈버튼 액션
        actions: [
          IconButton(
            onPressed: () {
              if (controller != null) {
                controller!.loadUrl('https://peterica.tistory.com');
              }
            },
            // 홈버튼 아이콘 생성
            icon: Icon(Icons.home)),
        ],
      ),
      body: WebView(
        // 위젯에 컨트롤러 생성
        onWebViewCreated: (WebViewController controller){
          this.controller = controller;
        },
        initialUrl: 'https://peterica.tistory.com',
        javascriptMode: JavascriptMode.unrestricted,
      ),
    );
  }
}

 

ㅁ 함께 보면 좋은 사이트

ㅇ flutter cookbook - Build a Flutter layout

  ㄴ 플루터 쿡북 중 레이아웃 페이지 링크

ㅇ docs.flutter.dev

  - https://pub.dev/packages/webview_flutter