20220913 TIL #타이머만들기 #overflow #Hero

이번주부터 오늘 해야할 일, 내일 해야할 일을 간단하게 메모를 하면서 업무를 하고 있다.

어떤 걸 먼저해야 하는지, 내가 이 일이 얼마나 걸리는지도 파악할 겸, 간단하게 메모만 하고 있는데

오늘 계획한 일은 거의 다 끝난 거 같아서 뿌듯하다.

 

타이머 만들기

간단하게 타이머를 만들었다.

마침 우리 앱에서 사용하고 있는 riverpod을 사용한 예제를 발견해서 많이 참고가 되었다.

https://medium.com/flutter-community/flutter-riverpod-tutorial-timer-app-186d04637775

Flutter Riverpod tutorial: Timer app

 

개발을 하면서 보니 피그마에 있는 디자인만으로는 기능이 다 파악되지 않아서 따로 체크를 하기 위해 메모를 남겨두었다.

 

riverpod을 사용하면서 어떻게 provider를 써야하는지 잘 몰랐는데 예제에서 provider를 사용하는 부분이 있어서 좋았고,

timerModel에서 관리하는 두 가지 상태, 남은 시간과 버튼 상태에 대해서 따로따로 watch하도록 리펙토링 하는 부분이 있어서 어떻게 해야 효율적으로 위젯을 빌드할 수 있을지 생각해 볼 수 있었다.

 

overflow

플러터에서는 Text 위젯에서 overflow를 이용해 값이 넘어가면 어떻게 처리할지 정할 수 있다.

 

예를 들어, 이런식으로 maxLines을 지정해주면, maxLines을 넘어갈 경우 overflow에 지정한 enum에 따라 다르게 표현이 된다.

TextOverflow.ellipsis를 하면 알아서 나머지 부분이 생략되고 ...으로 끝난다.

Text(
  "hahahahahahahahahahahahahahah",
  overflow: TextOverflow.ellipsis,
  maxLines: 1,
),

 

이렇게 생략된 text를 see more 이러는 TextButton으로 만들고, 누르면 dialog로 전체 text를 보여주도록 만들었다.

처음에는 생략된 줄에 ... see more로 보여주려고 했는데, 이렇게 되면 기기마다 한줄에 몇 글자가 들어가야하는지 계산하기가 어려워서 다음 줄로 넘겼다.

짐깐 사수와도 얘기했는데 우선 우리는 기능을 구현하는게 더 급하고, 여기에 시간을 많이 쓰는 것보다 크게 문제가 없다면 기능을 구현하는 것에 더 초점을 맞추는게 낫다고 판단했다.

see more 글자를 보여주기 위해 overflow 여부를 판단해야 했는데, 이건 TextPainter를 사용했다.

 

static bool hasTextOverflow({
    required String text,
    required TextStyle style,
    double minWidth = 0,
    double maxWidth = double.infinity,
    int maxLines = 2,
  }) {
    final TextPainter textPainter = TextPainter(
      text: TextSpan(text: text, style: style),
      maxLines: maxLines,
      textDirection: TextDirection.ltr,
    )..layout(minWidth: minWidth, maxWidth: maxWidth);
    return textPainter.didExceedMaxLines;
  }

참고: https://velog.io/@sangh518/flutter-TextPainter

 

처음에는 maxWidth를 double.infinity로 값을 넣어서 계속 false가 리턴되었다.

maxWidth를 화면 크기를 기준으로 하는게 낫다고 생각해서, Mediaquery.of(context).size.width 를 기준으로 padding 값을 제외한 크기로 변경해주었다.

 

Hero

Hero는 화면을 전환할 때 사용할 수 있는 애니메이션이다.

이미 기존 코드에서 router로 화면을 전환할 때 Hero가 적용되어 있는 부분이 많아서, 새로 개발한 페이지도 어색하지 않게 hero를 넣어주었다.

처음에 어떤 기능을 하는 건지 햇갈렸는데, Hero를 적용한 Widget 부분이 화면전환될 때 확장되는 듯한 애니메이션 효과를 보여준다.

주의해야할 점은 Hero 안에 tag를 반드시 입력해야 하는데, 전환되는 화면 간에 동일한 tag가 입력되어야 애니메이션 효과가 나타난다.

 

우리 앱에서는 Router를 사용할 tag에 사용할 값을 넘겨줘서 동일한 값이 매핑되도록 하였다.

 

https://docs.flutter.dev/development/ui/animations/hero-animations

Hero animations