행복한 스마일맨 ^^*

이전 글에서 콜백 함수, 웹뷰 위젯에 대해서 알아보았다.

이를 이용하여 이제 웹 앱 만들기에 도전해보자.

이미 만들어진 웹 페이지를 앱에서 불러와서 보여주는 앱을 웹 앱이라 부른다.

웹 앱을 만들기 전에 사전 설정이 필요하다.

 

1. 플러그인 추가

 - 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

위와 같이 웹뷰 플러그인을 추가하고 "pub get" 을 클릭하여 플러그인을 내려받는다.

"pub get" 버튼을 클릭하지 않고 플러그인을 내려받는 방법은...

아래처럼 안드로이드 스튜디오 하단의 "터미널" 탭에서 명령어를 실행하는 것이다.

- flutter pub get

 

2. 권한 및 네이티브 설정

 - 웹 앱을 만들기 위해 인터넷 사용 권한을 추가하고 http / https 프로토콜을 이용할 수 있게 설정해야 한다.

 - android/app/src/main/AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.flutter_sample">
....
   <uses-permission android:name="android.permission.INTERNET" />
....
</manifest>

 

 - 안드로이드 빌드 툴인 gradle 설정 파일인 build.gradle 은 모듈 파일로써 의존성이나 버전 정보를 관리한다.

 - android/app/build.gradle(android/build.gradle 파일은 프로젝트 파일이며 주로 클래스패스나 repository 정보등을 설정한다)

....

android {
    // 변경.
    // compileSdkVersion flutter.compileSdkVersion
    compileSdkVersion 32

....

    defaultConfig {
        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
        applicationId "com.example.flutter_sample"
        // You can update the following values to match your application needs.
        // For more information, see: https://docs.flutter.dev/deployment/android#reviewing-the-gradle-build-configuration.
        // 변경
        // minSdkVersion flutter.minSdkVersion
        minSdkVersion 20
        targetSdkVersion flutter.targetSdkVersion
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
    }

....
}

....

 - minSdkVersion : 안드로이드 운영체제의 최소 SDK 버전을 설정

 - compileSdkVersion : 앱을 빌드할 때 사용할 SDK 버전. 앱은 compileSdkVersion 이하 버전의 기능을 모두 지원한다.

이런 네이티브 설정 관련 정보는 각 플러그인의 pub.dev 페이지에서 확인 할 수 있다.참고로 webview_flutter 플러그인 정보는 webview_flutter | Flutter Package (pub.dev) 에서 확인 할 수 있다.

아직 많은 사이트들이 https 가 아닌 http 만 지원하는 곳도 있을 수 있다. 따라서 http 프로토콜을 허용하도록 설정한다.

 - android/app/src/main/AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.flutter_sample">

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

   <application
        android:label="flutter_sample"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher"
        android:usesCleartextTraffic="true"> <!-- 여기 부분 추가 -->
        
       ....
       
</manifest>

 

다음 글에서 본격적으로 웹 앱을 만들어 보도록 하자!!

가볍게 연습용으로 간단한 앱을 만들어 보자.

앱 개발 시 이미 잘 만들어진 오픈 소스 프로젝트를 불러와서 개발하면 편리하게 진행 할 수 있다.

수많은 플러그인이 플러터 오픈 소스 저장소 pub.dev 에 공개되어 있으니 불러와 사용하면 된다.

플러그인 사용법을 알아보자.

플러터 프로젝트를 생성하면 자동으로 생성되는 pubspec.yaml 파일에 원하는 플러그인을 추가하고 pub get 버튼을 클릭하여 프로젝트에서 사용할 수 있다.

자주 사용하는 플러그인 중 하나인 WebView 플러그인 추가하는 예제.

# Dependencies specify other packages that your package needs in order to work.
# To automatically upgrade your package dependencies to the latest versions
# consider running `flutter pub upgrade --major-versions`. Alternatively,
# dependencies can be manually updated by changing the version numbers below to
# the latest version available on pub.dev. To see which dependencies have newer
# versions available, run `flutter pub outdated`.
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

 

자! 이제 간단한 앱을 만들어 보자.

Column 위젯과 Row 위젯만을 사용하여 연습용으로 만든다.

위젯은 내부에서 값이 변경되었을 때 위젯 자체에서 다시 렌더링을 실행 시킬 수 있는 StatefulWidget 과 위젯 내부에서 값이 변경되어도 위젯 자체적으로 다시 렌더링 할 수 없는 StatelessWidget 으로 나뉜다.

이번에는 StatelessWidget 을 직접 구현할 예정이다.

기본 구조는 다음과 같다.

lib/main.dart 파일

import 'package:flutter/material.dart';

void main() {
  runApp(
  	// SplashScreen 위젯을 렌더링.
    SplashScreen(),
  );
}

// StatelessWidget 을 상속 받아 구현한다.
class SplashScreen extends StatelessWidget {

	// build 함수를 필수로 구현해야 한다.
    // 화면에 그리고 싶은 위젯을 입력.
  @override
  Widget build(BuildContext context) {
  }
}

 

 

화면 가운데 글자를 출력하는 앱을 만들어보자.

import 'package:flutter/material.dart';

void main() {
  runApp(
    SplashScreen(),
  );
}

class SplashScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
  
  	// 항상 최상단에 입력되는 위젯
    return MaterialApp(
    
    	// 항상 두번째로 입력되는 위젯
      home: Scaffold(
      
      	// 중앙 정렬 위젯
        body: Center(
        
        	// Text 를 화면에 보여주는 위젯
          child: Text('Splash Screen'),
        ),
      ),
    );
  }
}

 

위 파일을 실행하면 아래와 같은 화면을 가진 앱이 된다.

 

다음에는 배경색을 추가하여 화면을 꾸며보자!!

 

 

jad : Java Decompiler

jad 실행 파일 : http://www.varaneckas.com/jad
이클립스 플러그인 : http://sourceforge.net/projects/jadclipse/files/jadclipse3.3/3.3.0%20%28for%20Eclipse%20_%3D3.3M6%29/net.sf.jadclipse_3.3.0.jar/download

1. 이클립스용 플러그인을 이크립스 설치 디렉토리의 plugins 디렉토리에 복사.
2. 이클립스 재 시작.
3. 이클립스 환경 설정.
 - Window -> Preference 창에서 java -> JdaClipse 메뉴 선택.
 - Path to decompiler 에 jad 실행 파일 위치 입력.(c:\tmp\jad.exe)
 - Use Eclipse code formatter 체크.
 -  Misc 메뉴의 Convert Unicode strings into ANSI strings 체크.(한글깨짐 방지)