내용 정리 Part. 1 - [코드팩토리의 플러터 프로그래밍]

24년 6월을 기준으로 작성되었습니다.

 

 

1. [07장] 앱을 만들려면 알아야 하는 그 밖의 지식

➡️ UI 프로토타입 도구

 

 

➡️ 이 책에서 사용한 폴더 구조

 

 

➡️ 플러터에서 지원하는 대표적인 주변 장치

 

---

※ Flutter에서 Hex 코드 사용

Flutter에서 헥스 코드를 색상으로 사용하려면, Colors 대신 Color 라는 클래스를 사용해야 한다.

기본 6자리 헥스 코드의 앞에 + 16진수를 의미하는 0x + 불투명도 100%를 의미하는 FF 를 추가했다.

 

 

---

2. [08장] 블로그 웹 앱 : 콜백 함수, 웹 뷰, 네이티브 설정

웹뷰 (WebView) : 브라우저를 앱의 네이티브 컴포넌트에 임베딩(embedding)하는 플러터에 내장된 기능

즉, 앱에서 웹 브라우저 기능을 구현해주는 기술이다. 웹 뷰는 네이티브 컴포넌트에 비해 속도가 느리고, 애니메이션이 부자연스럽다는 단점이 있다. 하지만 기존에 만든 웹사이트를 손쉽게 활용할 수 있기 때문에 자주 사용된다.

 

웹뷰 위젯은 controller 파라미터에 WebViewController 객체를 입력해야 한다.

웹뷰 컨트롤러는 웹뷰 위젯을 제어하는 데, 필요한 기능들을 제공한다. 흔히 사용하는 함수는 다음과 같다.

 

 

웹뷰 위젯은 화면에 웹뷰를 렌더링 해서 웹 사이트를 보여주는 역할을 한다.

 

※ WebViewController 에는 그외에도 유용한 함수가 있다.

goBack() : 페이지 뒤로 가기

goForward() : 페이지 앞으로 가기

---

2-1. 권한 및 네이티브 설정

1) 안드로이드 설정

android/app/src/main/AndroidManifest.xml 파일에서 권한을 부여할 수 있다.

 

android/build.gradle : 프로젝트 파일. 주로 클래스패스나 레포지토리 정보를 입력한다.

 

android/app/build.gradle : 모듈 파일. 의존성이나 버전 정보를 관리한다.

 

※ webview_flutter 플러그인을 사용하려면, 안드로이드 최소 버전(minSdkVersion)을 20 이상으로 설정해야 한다.

 

안드로이드와 iOS에서는 모두 기본적으로 http 웹사이트를 사용할 수 없도록 설정되어 있다.

이 설정을 해제하려면, AndroidManifest.xml 파일에 아래 코드를 추가해야 한다.

 

---

2) iOS 설정

ios/Runner/Info.plist : iOS 앱의 런타임을 설정하는 파일이다. 플러터 프로젝트를 생성하면, 자동으로 필수 키가 생성된다.

 

NSAppTransportSecurity는 http 프로토콜을 허용하는 키-값이지만, 앞으로 Info.plist에 입력할 값들은 대부분 앱에서 이미지, 카메라 등 권한 요청을 할 때 보여줄 메시지를 정의한다.

 

 

나머지 키에 관련된 정보는 공식 사이트에서 찾을 수 있다.

https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Introduction/Introduction.html

About Info.plist Keys and Values

 

---

2-2. WebView를 사용하기 위해 main.dart 수정

Flutter 프로젝트를 실행하는 runApp() 함수는 내부적으로 "WidgetsFlutterBinding.ensureInitialized()" (이하 ensureInitialized() 함수)를 실행하고 있다.

이 함수는 플러터 프레임워크가 앱을 실행할 준비가 됐는지 확인하는 역할을 한다.

일반적으로 개발자가 직접 이 함수를 실행하지는 않지만, WebViewController를 Property로 직접 인스턴스화하려면,

main.dart에서 ensureInitialized() 함수를 직접 실행해줘야 한다. 또는 StatefulWidget에서 initState()를 오버라이딩하면 된다.

 

 

---

3. [09장] 전자액자 : 위젯 생명주기, PageView, Timer

위젯 생명주기 (LifeCycle) : 위젯이 화면에 그려지는 순간부터 -> 삭제되는 순간까지의 주기를 의미한다.

 

➡️ StatelessWidget

 

 

➡️ StatelfulWidget

StatefulWidget에는 대표적으로 3가지 생명주기가 있다.

 

1) 상태 변경이 없는 생명주기

위젯이 화면에 나타나며 생성되고, 화면에서 사라지며 삭제되는 과정을 의미한다. 중간에 위젯의 상태가 변경되지 않는다.

 

 

2) StatefulWidget 생성자의 파라미터가 변경되었을 때, 생명주기

 위젯이 생성된 후, 삭제가 되기 전에 파라미터가 변경되면 아래와 같은 생명주기가 실행된다.

 

 

3) State 자체적으로 build()를 재실행할 때의 생명주기

StatelessWidget은 생성될 때, build() 함수가 한 번 실행되고, 절대로 다시 실행되지 않는다.

반면 StatefulWidget은 setState() 함수를 실행해서, build() 함수를 자체적으로 재실행할 수 있다.

 

 

---

3-1. Timer

Timer는 특정 시간이 지난 후에, 한번 또는 지속적으로 함수를 실행한다. dart:async 에 정의되어 있다.

이번에는 Timer.periodic()을 사용해서 주기적으로 콜백 함수를 실행한다. Timer.periodic()은 파라미터 2개를 입력받는다.

 

 

---

3-2. BoxFit 속성

사용되는 위젯 : Image 위젯 등등...

 

---

3-3. 상태바 아이콘 색상 변경하기

상태바 (StatusBar) : 앱 실행 중에 핸드폰 배터리, 시간, 와이파이 연결 상태 등을 보여주는 영역이다.

 

 

먼저 Flutter 기본 패키지 중에서, Service 패키지를 import한다. 그리고 build() 함수에 정의한다.

SystemChrome 클래스 : 시스템 UI의 그래픽 설정을 변경하는 기능을 제공한다.

 

// 상태바 색상을 흰색(light)으로 변경한다
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);

 

---

3-4. Curves 클래스

Curves는 애니메이션 작동 방식을 결정한다. Flutter에서 수십 개의 curve 기본 설정이 제공된다.

https://api.flutter.dev/flutter/animation/Curves-class.html

Curves class - animation library - Dart API

 

 

---

4. [10장] 만난 지 며칠 U&I : CupertinoDatePicker, Dialog, DateTime

➡️ setState()

setState() 함수는 파라미터로 콜백 함수 하나를 입력 받는다.

이 콜백 함수에 변경하고 싶은 속성들을 입력해주면, 해당 코드가 반영된 뒤 build() 함수가 재실행된다.

 

※ setState()의 콜백 함수는 비동기(async - await)로 작성되면 안된다!!!

 

---

➡️ showCupertinoDialog() 

showCupertinoDialog()는 다이얼로그(대화창)를 실행하는 함수이다. Cupertino라고 정의된 만큼 iOS 스타일로 다이얼로그가 실행되며, 실행 시 모든 애니메이션과 작동이 iOS 스타일로 적용된다.

 

---

4-1 .of 생성자

 

 

---

4-2. GestureTapCallback 클래스

Material 패키지에서 기본으로 제공하는 Typedef로, 버튼의 onPressed() 또는 onTap() 콜백 함수들이 이 타입으로 정의되어 있다.

 

 

---

5. [11장] 디지털 주사위 : 가속도계, 자이로스코프, Sensor_Plus

5-1. Sensor_Plus 패키지

sensor_plus 패키지를 사용하면, 핸드폰의 가속도계와 자이로스코프 센서를 간단하게 사용할 수 있다.

하지만 가속도계와 자이로스코프 센서의 데이터는 x, y, z 값을 통합해 전반적인 움직임 수치를 계산해서 -> 핸드폰을 흔든 정도를 수치화하는 정규화(normalization)가 필요하다.

즉, 단순히 흔들림을 감지하는 기능이 필요하다면, shake 패키지를 사용하는 것이다.

 

 

간단한 sensor_plus 패키지 사용 예제

 

---

5-2. shake 패키지

단순히 흔들림을 감지하는 기능이 필요하다면, shake 패키지를 사용하는 것이다.

핸드폰 흔들기를 감지할 때마다 -> 실행할 (콜백) 함수를 등록한다.

class _RootScreenState extends State<RootScreen> with TickerProviderStateMixin {
  int number = 1; // 주사위 숫자
  ShakeDetector? shakeDetector;

  @override
  void initState() {
    super.initState();

    shakeDetector = ShakeDetector.autoStart( // 흔들림 감지를 즉시 시작한다
      shakeSlopTimeMS: 100, // 감지 주기
        shakeThresholdGravity: threshold, // 흔들림 감지 민감도
      onPhoneShake: onPhoneShake, // 감지되면 실행할 함수
    );
  }

  /**
   * 휴대폰 흔들림이 감지되면, 실행할 함수이다
   */
  void onPhoneShake() {
    final rand = new Random();
    
    setState(() {
      number = rand.nextInt(5) + 1;
    });
  }

  @override
  void dispose() {
    shakeDetector!.stopListening(); // 흔들림 감지를 중지한다
    super.dispose();
  }

 

ShakeDetector에는 "waitForStart" 생성자도 있다.

이 생성자는 코드만 등록을 해두고, 추후에 흔들림 감지를 시작하는 코드를 따로 실행해줄 수도 있다.

 

 

---

6. [12장] 동영상 플레이어 : 화면 회전, 시간 변환, String 패딩

6-0. 사전 준비

iOS에서 동영상을 불러오려면 -> "갤러리(사진첩)" 권한이 필요하다.

일반적으로 ImagePicker 패키지를 사용하면, 카메라와 마이크 권한까지 필요한 경우가 많으니 3가지 권한을 모두 등록한다.

 

➡️ 갤러리 권한 추가

 

---

6-1. 시간 변환 및 String 패딩

video_player 패키지를 사용하면, 현재 실행되고 있는 동영상의 위치, 동영상의 총 길이 등을 Duration 클래스로 반환받는다.

그러나 개발자가 선호하는 자료 형태와 실제 사용자가 선호하는 자료 형태가 다르기 때문에,

보기 좋은 String 값으로 Duration 클래스를 전환하는 게 매우 중요하다.

 

---

6-2. 구현하기

image_picker 패키지 : 이미지나 동영상을 선택했을 때, XFile 이라는 클래스 형태로 선택된 값을 반환해준다.

 

ImagePicker().pickVideo() 함수를 실행하면, 동영상을 선택하는 화면을 보여줄 수 있다.

이 함수의 source 파라미터로 -> ImageSource.gallery 또는 ImageSource.camera를 선택할 수 있다.

gallery : 이미 저장되어 있는 동영상을 갤러리로부터 선택하는 화면을 실행한다.

camera : 카메라를 실행한 후, 동영상 촬영을 마치면 해당 영상이 선택된다.

 

---

 

6.2.1 BoxDecoration 클래스

BoxDecoration 클래스를 사용하면, Container 위젯의 배경색, 테두리, 모서리 둥근 정도 등등 전반적인 디자인을 변경할 수 있다.

 

➡️ gradient 파라미터

시작 부위부터 끝 부위까지 점점 색이 변하는 LinearGradient

중앙에서 색깔이 점점 퍼져가는 형태인 RadialGradient 가 있다.

Widget renderEmpty() {
    return Container(
      decoration: getBoxDecoration(),
      child: Column(),
    );
  }

/**
* HomeScreen 배경에 그라데이션 적용
*/
BoxDecoration getBoxDecoration() {
    return BoxDecoration(
      gradient: LinearGradient(
        begin: Alignment.topCenter,
        end: Alignment.bottomCenter,
        colors: [
          Color(0xFF2A3A7C),
          Color(0xFF000118),
        ],
      ),
    );
}

 

 

➡️ boxShadow 파라미터

일반적으로 하나의 그림자만 사용하겠지만, 원한다면 List 안에 여러 BoxShadow 클래스를 넣어서 여러 그림자를 적용할 수도 있다.

color : 그림자로 적용할 색상

blurRadius : 흐림 정도

spreadRadius : 퍼짐 정

@override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        decoration: BoxDecoration(
          color: Colors.blue,
          borderRadius: BorderRadius.circular(16.0), // 모서리 둥글게 만들기
          boxShadow: [
            BoxShadow(
              color: Colors.blue[300]!,
              blurRadius: 12.0,
              spreadRadius: 2.0,
            ),
          ],
        ),
      ),
    );
  }

---