Choe's In coding...

지난번 Hero위젯을 이용해 popup Container를 구현했다. 

 팝업이 뜨고 다시 닫았을때 오른쪽 하단 시계 텍스트가
조금 깨지는 것을 볼 수 있다.

이런 디테일이 너무 신경쓰여서

계속 고민을 해보다 오늘 결국 해결에 성공했다.

방법은 아주 간단했다.

예를 들어

 A 위젯 <---> B 위젯

Hero을 적용시켯다고 하면

나는 페이지라우터를 이용하여 구현했기 때문에

B위젯의 컨테이너를  Material으로 한번 감싸줬다.

따라서

 A 위젯(Material X)<---> B 위젯(Material O)

왔다갔다하니 UI 엔진에서 문제가 생긴듯하다 (내 생각 ㅎㅎ)

A 위젯에도 Material로 한번 감싸주니 해결 완료됐다.

솔플 사이드 프로젝트가 이제 거의 마무리되가고있다.

기능적으로는 구현이 완료가 되었다...

물론 넣을 기능은 많지만 이러다간 출시하지 못할꺼 같아서 우선 여기서 스탑하기로 했다.

가장 집중해서 고민한 부분이 바로 로고 작업이였다.

상업적으로 사용가능한 아이콘을 찾고

편집하는 과정이 힘들고 어려웠다,,,,

내가만든 로고를 앱에 넣으니 아주 그럴싸해졌다.

이제 Launcher Icon을 쉽게 변경하는 법을 소개하겠다.

 https://pub.dev/packages/flutter_launcher_icons

해당 라이브러리를 이용했고

native_splash 라이브러리와 충돌이 일어날 수 있으니 주의하기 바란다.

flutter pub add flutter_launcher_icons

을 통해 설치를 해준뒤

최상위 경로에 flutter_launcher_icons.yaml 파일 하나 만들어주자

그리고 이안에

flutter_icons:
  ios: true
  image_path: "assets/logo/1024icon2.png"
  android: "launcher_icon"

이렇게 넣어주면 된다.

그 다음

flutter pub run flutter_launcher_icons:main

해주면

맨 아랫줄에 성공했다는 문구가 나온다.

이제 앱을 다시 빌드해보자

IOS에서는 앱 아이콘이 정상적으로 나오는데

안드로이드에서는 조금 이상하게 나올것이다.

안드로이드에서 앱들을 보면 원형의 아이콘을 갖고있는데

조금 찾아보니 os에서 사용될 아이콘 경우의 수에 맞게 이미지를 준비해야되는거같다.

여러가지 해결법이 있지만

나는 IOS, 안드로이드 아이콘 파일을 따로 지정해줬다.

flutter_icons:
  ios: true
  image_path_ios: "assets/logo/1024icon2.png"
  android: "launcher_icon"
  image_path_android: "assets/logo/1024icon.png"

이렇게 해도 안되면

 adaptive_icon_background: "assets/logo/back.png"
 adaptive_icon_foreground: "assets/logo/1024icon.png"

이렇게 두개 추가해보자

뒤엔 배경색으로만 채워진 이미지를 넣고

앞엔 아이콘만 있는 이미지를 넣으면 된다.

좌측 - IOS / 우측 - Android

플러터는 크로스플랫폼을 지원한다.

따라서 플러터로 개발하다 보면

각 플랫폼에 맞게 처리를 해줘야하는 상황이 있다.

물론 한가지로 통일해 짜도 좋지만

디테일을 살리기 위해선 각자 처리해주는것이 좋다.

그렇다면 플러터에선 어떤식으로 플랫폼을 구분할 수 있을까?

방법은 간단하다.

dart:io 를 이용하면된다.

import 시켜준뒤

import 'dart:io' show Platform;

Platform.isAndroid
Platform.isFuchsia
Platform.isIOS
Platform.isLinux
Platform.isMacOS
Platform.isWindows

해당 데이터들은 bool 값을 가지고 있다.

따라서 동작 코드에 조건문을 걸어 사용하면된다.

if (GetPlatform.isIOS) {
  showCupertinoDialog(
    context: context,
    builder: (context) => CupertinoAlertDialog(
      title: const Text("Dialog Title"),
      content: const Text("This is my content"),
      actions: [
        CupertinoDialogAction(
          isDefaultAction: true,
          child: const Text("Yes"),
          onPressed: () => Get.back(),
        ),
        CupertinoDialogAction(
          child: const Text("No"),
          onPressed: () => Get.back(),
        )
      ],
    ),
  );
} else {
  showDialog(
      context: context,
      builder: (context) => AlertDialog(
            title: const Text("Dialog Title"),
            content:
                const Text("This is my content"),
            actions: [
              TextButton(
                child: const Text("Yes"),
                onPressed: () => Get.back(),
              ),
              TextButton(
                child: const Text("No"),
                onPressed: () => Get.back(),
              )
            ],
          ));
}

현재 만들고 있는 앱은 IOS와 Android 두가지만 타겟으로 하기떄문에 위와같이 간단하게만 짜줬다.

또 상태관리를 위해 Getx를 사용중인데 마침 또 이런것도 지원해 이용했다.

지난번 AlertDialog에 Hero를 적용시키려다 조금 부자연스러워 많은 고민끝에 드디어 해결했다..

이번에는 AlertDialog를 쓰지않고 페이지라우트를 이용해 다른페이지 Container에 Hero를 입혀줬다.

이때 주의해야할 점은

모든 배경들은 투명처리 해야되며

나와 같이 ListView를 사용한다면 해당 Index 값을 페이지로 넘겨줘야한다.

Hero는 1 대 1 연결이 원칙이다.

따라서 Hero tag의 값은 나 아니면 너 이렇게 1개의 쌍으로만 이루어져야한다.

앱에 필수 요소인 Text

사용자에게서 해당 Text 값을 받을땐

글자 수를 제한둬야한다는 주의사항이 있다.

예를들어 화면에 나타낼 수 있는 글자 수 는 10자라고 하자

그런데 사용자가 15자를 저장했다.

화면에는 당연히 overflow가 나타낼것이다.

Text가 더 노출되도록 영역을 키운다던지 Text 크기를 줄이거나 할것이지만

기기의 케이스가 너무 많아 표준화하기 어렵다.

화면에 나타낼 수 있는 글자 수는 기종마다 다를것이다.

화면이 큰 기종은 작은 화면의 기종보다 상대적으로 나타나는 글자 수가 많을 것이다.

따라서 제일 효과적인 방법은

영역을 제한두고 overflow가 나오면

다양한 효과로 방지하는것이다.

사용법은 간단하다.

Text(
'안녕하세요',
overflow:
    TextOverflow
        .ellipsis,
),

아래 overflow 붙혀주는것이다.

하지만 이렇게만 설정해도 오류가 뜰것이다.

왜냐하면...

overflow의 기준(영역)을 지정해주지 않았기 때문이다.

영역은 다양한 방법으로 지정 가능하나 나는 Expanded 위젯을 이용했다.

TextOverflow의 속성은

이렇게 있는데 직접 다 해보는게 좋을거같다.

추가로 글자 줄 갯수도 지정 가능하다.

Text(
'안녕하세요',
overflow:
    TextOverflow
        .ellipsis,
 maxLines: 1,       
),

바로 maxLines로 지정해줄 수 있다.

flutter의 에니메이션 효과는 정말 대단하다고 느낀다.

하지만 내겐 너무 어렵단점...

ListView에 각각 데이터를 클릭하면 확대되게 보이게 연출하고 싶은데 방법은 정말 많지만

우선 구현 해본것은 AlertDialog와 Hero를 사용한것이다.

기본적으로는 AlertDialog에 Hero는 적용되지않는다.

따라서 Navigator와 PageRouteBuilder를 이용해 페이지라우터 처리하여

효과를 강제로? 입힐 수 있는데 에니메이션이 좀 부자연스럽게 나온거 같다.

내가 잘못 구현 할것일수도 있지만

정석대로 구현하려면 에니메이션 자체로만 좀 더 복잡하게 구현 해야될꺼같다.

다음번에 정석대로 구현이 된다면 그때 코드 리뷰를 진행해보겠다.