Choe's In coding...

앱에 필수 요소인 Text

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

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

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

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

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

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

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

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

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

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

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

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

사용법은 간단하다.

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

아래 overflow 붙혀주는것이다.

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

왜냐하면...

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

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

TextOverflow의 속성은

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

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

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

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

앱을 디자인 하다보면 빠질 수 없는것중에 하나가 바로 에니메이션이다.

직관적이면서 심플한 에니메이션 효과는 앱 사용자에게 몰입감 있는 경험을 준다고 생각한다.

이번에는 이러한 효과가 들어간 AnimatedContainer에 대해 알아보겠다.

AnimatedContainer(
	duration: const Duration(milliseconds: 500),
	width: bool ? 100 : 0,
	height: bool ? 100 : 0,
    curve: Curves.bounceIn,
	child: const Text("test"),
),

기본적인 사용 예시이다.

duration  - 에니메이션 효과의 가동 시간이다.

width, height - bool 의 값에 따라 100 -> 0 or 0 -> 100으로 사이즈가 변한다.

curve - 다양한 에니메이션 효과들을 볼 수 있다. 직접보고싶다면 오른쪽 깃헙 주소에 들어가면된다.

아래 코드는 내가 제작하고 있는 앱의 코드이다.

AnimatedContainer(
                    duration: const Duration(milliseconds: 500),
                    curve: Curves.easeInOutQuart,
                    height: taskcontroller.isAllday.value == false ? 110 : 0,
                    child: ClipRect(
                      child: Wrap(
                        children: [
                          Row(
                            children: [
                              Expanded(
                                child: Inputfield(
                                  title: '시작',
                                  hint: homecontroller.startTime.value,
                                  widget: IconButton(
                                    icon: Icon(
                                      Icons.timer,
                                      color: Mycolor().textwhite,
                                    ),
                                    onPressed: () async {
                                    },
                                  ),
                                ),
                              ),
                              const SizedBox(width: 20),
                              Expanded(
                                child: Inputfield(
                                  title: '종료',
                                  hint: homecontroller.endTime.value,
                                  widget: IconButton(
                                    icon: Icon(
                                      Icons.timer,
                                      color: Mycolor().textwhite,
                                    ),
                                    onPressed: () async {
                                
                                    },
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ],
                      ),
                    ),
                  ),

자식 위젯에 보면 ClipRect 와 Wrap으로 감싸준것을 볼 수 있는데.

이는 에니메이션 가동중 UI가 오버플로우 하지않게 방지해준다.

좌측이 적용하지 않았을떄이며 오른쪽이 적용했을때이다.

개인 프로젝트를 새롭게 시작하고

구현중에 있다.

현재 UI는 다 그렸는데 이제 DB 작업만 남았다..

앱 개발자를 준비하면 프론트, 백 둘다 빡시게 준비해야되는건가,,,

어렵다,,

오늘은 오늘 구현중 알게된 신박한 기능하나 소개하려고한다.

나는 보통 GetX를 이용하여 상태관리를 하고 있는데

수 많은 Get의 기능중

snackbar 이다.

간단한 사용법은

    Get.snackbar("저장 실패", "빈칸 없이 채워주세요",
          colorText: Mycolor().snackbarText,
          snackPosition: SnackPosition.TOP,
          backgroundColor: Mycolor().snackbarBg,
          icon: const Icon(Icons.warning_amber));

이며 설명이 필요한 부분은 따로 없어보인다.

이렇게까지 구현하고 테스트 해봤는데

사진과 같이 버튼을 막누르면 그 횟수만큼 계속해서 창이 나온다는점이다.

이를 해결하기 위해선

isSnackbarOpen를 써주면 된다.

 if (Get.isSnackbarOpen) {
      } else {
        Get.snackbar("저장 실패", "빈칸 없이 채워주세요",
            colorText: Mycolor().snackbarText,
            snackPosition: SnackPosition.TOP,
            backgroundColor: Mycolor().snackbarBg,
            icon: const Icon(Icons.warning_amber));
      }

코드와 같이 If문을 한번 걸어 현재 snackbar가 떠있는 상황인지 확인후 기능을 수행하도록

바꿔주면 아래와같이 해결된 결과를 확인할 수 있다.

플러터로 간단한 To-Do 앱을 하나 만드려고 한다.

이앱은 켈린더를 이용하기에 먼저 구현중인데..

사진과 같이 좌우 스크롤로 날짜를 고를 수 있는 영역을 구현중이다.

사진과 같이 완벽하게 따라하진 못하겠지만

나 나름대로의 방법대로 구현해봤다.

date를 눌르때마다

앞뒤로 총 해당 월의 일수(31개) 만큼 나오며

캘린더를 눌렀을 시엔

빠르게 년, 월, 일 선택 가능하다.

구현하는데 다소 어려웠던 점이 있다면

사용자가 date를 눌렀을때

해당 date가 화면 정가운데(리스트 한가운데)에 위치하여 스크롤을 제어할수있게 하는것이였다.

완벽하게 구현된것은 아니나

내가 짠 방법을 공유하도록 하겠다.

먼저 ListView에 Controller를 등록시켜준뒤

Controller.animateTo를 이용하면 된다.

scrollController.animateTo(
                (scrollController.position.viewportDimension +
                        scrollController.position.maxScrollExtent) *
                    13 /
                    31,
                duration: const Duration(seconds: 1),
                curve: Curves.ease);

쉽게 풀어 설명하자면

스크롤 영역을 감지하여

31개 리스트중 13번째 리스트를 화면 맨 앞에 위치하는것이다.

사진을 보면 이해가 빠르다.

맨 앞쪽에 위치한 Sun 12 리스트가 바로 13번째

리스트이다.

물론 나는 15번째 리스트인 Tue 14를 픽했다.

지난 토요일

7주간 달렸던 GDG code in songdo 플러터 프로젝트가 마무리됐다.

이번 프로젝트 7주 동안 배운 것들이

지난 독학으로 배웠던 것보다 훨씬 값지고 많다고 생각이 들었다.

처음으로 디자이너, 백, 프론트 모두 갖춘 상태에서 정말 현업처럼 소통하며

프로젝트를 진행해본거다.

디자이너 - 개발자 소통에 대해서도 많은것을 배웠고

개발자 - 개발자 소통에 대해서도 많은것을 배웠다.

본인의 생각을 가지고 있으며 

타인의 다른 생각을 듣고 고려하여

협의점을 찾아야한다.

그러면서 끊임없이 고민하고 생각하게 되는것같다.

이번 프로젝트의 결과물은 타 팀에 비해

규모가 크고 결과물도 아주 잘나왔다고 생각한다.

프로젝트 자체의 아쉬운 부분은 없지만

나의 행동에 대해 아쉬운것이 몇 가지 있다.

먼저 팀 회의를 할 때 적극적으로 의견을 말하지 못한점

그리고 질문을 많이하지 않은점

이정도가 아쉬운점으로 남아있다.

다음 기수는 올해 말에 시작한다는데

그때는 취직을 했어도 한번 다시 도전하고싶다.

훨씬 더 발전된 실력으로 임해보고싶다.

로그인 기능 중 가장 쉽다는 구글 로그인 google_sign_in을 구현 하다보면

사용자 에뮬레이터에 따라 될때가 있고 안될때가 있다.

이번 팀프로젝트를 진행하면서 이런 상황이 발생히였기에

이번 글을 통해 정리하고자 한다.

사진과 같이 구글 로그인 아이콘을 눌렀는데도 어두워지는 화면이 지속된다.

원래는 구글 로그인 창이 떠야하는것이 정상이다.

처음에는 인증키 관련 문제인줄 알았으나

아니였고 에뮬레이터에 구글 플레이 스토어가 설치 되지 않아 발생되는 문제라는 것을 알게 되었다.

안드로이드 스튜디오에서 에뮬레이터 create device를 진행할떄

옵션에 보면 구글 플레이스토어가 있는데

반드시 아이콘이 있는 device로 생성해줘야한다.

사람마다 사용되는 에뮬레이터 환경에 따라 코드도 달라지고 시간도 많이 소요된다는게

너무 지쳤다..

분명 내 컴에선 잘돌아갔는데 안드로이드 버전이 다 다르니 해줘야하는 설정도 다르고

너무 시간이 소요됐다.

다음번에 다른 팀프로젝트를 시작한다면 환경부터 맞춰서 진행해ㅇ다.