Choe's In coding...

ToDo앱을 만드는데 두 날짜를 비교하여 어떤 날짜가 전인지 후인지 판단해야되는 기능을 구현해야했다.

엄청난 고민이 필요했다.

떠오른 아이디어로는

1) 날짜를 숫자로 변경하여 단순 비교

2) 날짜를 문자형으로 변경하여 비교

우선 간단해 보이는 1번으로 진행해보았다.

1) timestamp으로 변환하여 비교하면 간단하게 구현 가능하다.

if (startDate.microsecondsSinceEpoch < EndDate.microsecondsSinceEpoch) 
	{ print("1"); 
    } else if (startDate.microsecondsSinceEpoch > EndDate.microsecondsSinceEpoch)
    { print("2");}

두개의 날짜를 각각 timestamp으로 변환한다. 변환하면 자동으로 int로 변형되어 단순비교가 가능하다.

2) DateTime -> Datefomat -> compareTo

String startDate2 = DateFormat("yyyy-MM-dd").format(startDate);
String EndDate2 = DateFormat("yyyy-MM-dd").format(EndDate);
int result = startDate2.compareTo(EndDate2);
print(result);
// startDate가 EndDate보다 앞일자면 -1을 뒤일자면 1을 반환한다.

역시 1번이 좋아보인다.

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

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

이번에는 이러한 효과가 들어간 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를 다그리고

혹시나해서 화면을 회전 시켰더니

오른쪽과 같이 레이아웃에 오류가 떴다..

해당 앱은 세로모드를 지원안해도 될꺼같아 화면회전을 막는 법에 대해 소개하겠다.

방법은 간단하다.

import 'package:flutter/services.dart';

해당 파일을 import 후

Widget build(BuildContext context)

이 안에 아래 코드를 추가해주면된다.

  SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);

위 코드를 간단하게 설명하자면 화면을 고정시키는 것이다. 

portraitUp - 정방향

landscapeRight :정방향에서 시계 방향으로90도 회전한 형태

portraitDown :정방향에서 시계 방향으로 180도 회전한 형태

landscapeLeft : 정방향에서 시계 방향으로 270도 회전한 형태

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

구현중에 있다.

현재 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주 동안 배운 것들이

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

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

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

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

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

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

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

협의점을 찾아야한다.

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

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

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

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

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

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

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

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

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

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

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