21. 새로 알게된 Flutter 지식 정리(01/11)

1. Tabbarview에서 TABBAR 터치와 스와이프 동작 구분

TabbarView를 바꾸는 방법은 두가지가 있다.
TabBar를 터치해서 변경할 수 있고, TabBarView를 스와이프해서 변경하는 경우가 있다.

위의 경우와 같이 탭바를 통해서 이동을 했을 경우 정확하게 인식을 하나 스와이프로 했을 경우에는 제대로 동작을 하지 않는 경우가 있다. 해당 경우를 해결하기 위한 방법은 다음과 같다.

late TabController tabController;
@override
void initState(){
  super.initState();
  tabController  = TabController(vsync: this,length:2);
  tabController.addListener(onTabPressed);
 }
 
 void onTabPressed(){
   if(!tabController.indexIsChanging){
   	if(tabController.animation!.isCompleted){
      return;
      }else{
      	print('Swiping TabbarView');
      }
   }else{
   	print('touch tabbar');
   }
}

TabController의 속성중 indexIsChanging을 통해 선택된 tabbar의 index가 변하는지 확인할 수 있다. StackOverflow에서 해당 내용 관련해서 검색했을때 대부분의 답변이 해당 속성을 통해 swipe를 했을때와 구분할 수 있다고 했다.

그런 경우에 코드는 다음과 같아진다.

void onTabPressed(){
   if (_tabController.indexIsChanging)
      // Tab Changed tapping on new tab
     onTabTap();
    else if(_tabController.index != _tabController.previousIndex)
      // Tab Changed swiping to a new tab
      onTabDrag();
  });
}

직접 실행을 해본 결과 스와이프 하는 경우에는 onTabDrag 함수만 실행되지만 tabbar를 누르는 경우에는 onTabTap이 실행되고난 이후에 onTabDrag함수가 실행된다.

그래서 나는 tabController.animation.isCompleted로 분기를 하나 더 추가했다. 해당 속성은 페이지 이동하는 애니메이션이 끝났는지 여부를 반환하여 준다. 해당 값이 true인 경우에는 onTabPressed 함수를 종료 시킨다.

2. 길이가 긴 String을 Text위젯으로 표현할 경위 위젯의 사이즈 파악

앱내에서 아래 오른쪽의 사진과 같이 길이가 긴 String을 표현해야 하는 경우가 있다.![]

물론 전체 길이를 보여주는 경우도 있지만 관련 화면 진입했을때 대부분 왼쪽의 사진처럼 축약된 형태를 먼저 보여준다.

그러면 이제 필요한 것은 특정 글씨체로 해당 내용을 표현 했을 떄 핸드폰에서 어떻게 나오는지 알아야 왼쪽같은 위젯으로 표현할 수 있다. 해당 내용을 아래의 코드를 통해 파악을 할 수 있다.

 // Here it is!
 Size _textSize(String text, TextStyle style) {
   final TextPainter textPainter = TextPainter(
       text: TextSpan(text: text, style: style), maxLines: 1, textDirection: TextDirection.ltr)
     ..layout(minWidth: 0, maxWidth: double.infinity);
   return textPainter.size;
 }

위의 코드는 특정 TEXT를 지정 STYLE로 표현하는 경우 해당 text 위젯의 Size을 파악할 수 있다.
해당 함수의 결과 값은 Size로 나오고, size.width / size.height을 통해 너비,높이를 알 수 있다.

int textlines(TextStyle style, double textWidth,String text) {
    final TextPainter textPainter = TextPainter(
      text: TextSpan(text: text, style: style),
      textDirection: TextDirection.ltr,
      maxLines: 1,
    )..layout(minWidth: 0, maxWidth: double.infinity);

    List<UI.LineMetrics> countLines = textPainter.computeLineMetrics();
    return countLines;
  }

위의 함수는 앞서 소개한 함수와 비슷한 개념이지만 살짝 다른 개념이다. 이전의 함수는 위젯의 크기를 return 해줬지만 해당 함수는 text을 특정 style로 표현시 화면에 표현될 String의 전체 줄수를 반환해준다.
해당 값을 이용해 문자열이 화면에 보여질 줄 수를 조정할 수 있다.