TIL - 기차 예매 서비스 (3) <on scroll change AppBar Color issue, 예쁜 로그 만들기>

## 해당 TIL은 주어진 과제를 수행하면서 얻은 학습 내용과, 시행착오 등등을 종합해서 작성한것임

 

1. on scroll change AppBar Color issue

사소하지만, 해결해야할 이슈를 발견했다.

스크롤이 가능한 스크린에서 스크롤을 했을 경우 AppBar의 색상같은것이 바뀌는 오류였다.

해당 버그는 어플 구동에 치명적인 버그는 아니지만, UI 측면에 있어서 매우 거슬리는 부분이기 때문에 수정이 필요했다.

 

< 스크롤 하지 않은 화면 모습 >

 

< 스크롤 하고 난 뒤 화면 모습 >

 

 

## 해결책 ##

• ScrolledUnderElevation

flutter 버전이 3.16.2 이상일 경우 발생되는 문제로써, 사용자가 스크롤을 하면 기본적으로 앱 바에 그림자가 있는 것처럼 나타난다. 이는 콘텐츠가 그 아래에서 스크롤되고 있다는 시각적 피드백을 제공하기 위한 것으로 높이 변화에 반응하는 투명도나 특정 배경색이 있는 경우 'AppBar'의 인지된 색상을 변경할 수도 있다.
그래서 scrolledUnderElevation: 0을 설정하면 스크롤할 때 앱 바에 고도가 표시되지 않으므로 시각적 변화나 그림자 효과가 발생하는 것을 방지할 수 있다... 고 한다.

Flutter (3.16.2) - scroll했을 때 AppBar color 바뀌는 오류

 

따라서 해당 코드를 적용시켜주면, AppBar에 자동적으로 적용되는 Elevation을 0으로 만들어 줌으로써 대부분 해결이 가능하다고 한다.

AppBar(
    scrolledUnderElevation: 0,
)

 

다만.. 나의 경우는 해당 코드가 먹히질 않았다..

실제로 이것저것 해보니, backgroundColor를 설정해 줄 경우, AppBar 색상이 고정되는것을 보면, 고도 변화 때문에 색상이 변한것처럼 보이는것이 아니라 진짜 색상이 변하고 있었다는 것을 알았다..

무엇이 원인이었는지는 솔직히 제대로 확인은 하지 못했지만, 그래도 해결책은 떠올릴 수 있게 되었다.

 

• backgroundColor

backgroundColor값을 스크롤 맨 위에 두어져 있을때의 색상으로 고정시키기 위해 Color값을 직접 지정해 주었다.

특히, 원래 AppBar의 기본값인 Scaffold background컬러를 따라가는 것처럼 보이기 위해, 그냥 배경색을 투명하게 만들어 주어 색상을 통일 시키는 것으로 해결하였다.

AppBar(
    backgroundColor : Colors.transparent,
)

 

 

%% 추가

아래의 사례를 찾아보니, Material3 테마에서

[ 앱 바 높이는 API 레벨 30 이하에서는 변경되지만, API 레벨 30 이상에서는 변경되지 않습니다. ]

라고 한다..

[Material3] App bar elevation change on scroll not working on API levels above 30 · Issue #123878 · flutter/flutter

 

 

 

2. 예쁜 로그 만들기

개발자가 로그를 처리할때 사용할 수 있는 방법은 여러가지가 있다.

일반적으로는 print를 사용하여 로그를 처리하는게 일반적이지만..

flutter는 이러한 방법들 대신 아래의 방법을들 추천한다.

// debugPrint 사용
debugPrint('log : $e');

// log 사용
log('log : $e');

// print 사용은 되도록 kDebugMode에서 사용하는것을 권장
if(KDebugMode){
    print('log : $e');
}

 

다만 위의 방법들은 각자 특징을 가지고 있는데..

 

• debugPrint / KDebugMode

debugPrint는 디버깅 도중 로그를 출력하는 함수로써, 디버그모드에서만 출력되고, 릴리즈 모드에서는 출력되지 않는 특징을 가진다. 때문에, 개발중 오류상황을 발견하는 로그로써는 괜찮지만, 배포후 오류상황에 대해 로그를 출력하는 방식에는 맞지 않는다.

 

마찬가지로 KDebugMode도 디버그 모드시에만 print를 출력하게 하는 조건달린 로그로써 이해하면 된다.

 

• log

log는 debugPrint와 유사하게 작동하며, 일반적인 log를 호출하는데 사용되는 함수로써 다양한 log출력 상황에 대한 것들을 제공해 줄 수 있다. log는 릴리즈 모드에서도 작동되기 때문에, debugPrint보다는 넓게 사용할 수 있다. 다만, 사용하기 위해서는 dart:developer 를 import 해주어야 한다.

 

 

위의 방법들 말고도 log를 다루어줄때 보다 편리하게 해주는 라이브러리가 있어서 사용해 보았다.

이는 Logger 이라는 라이브러리!

logger | Dart package

 

• 설치법

// Terminal
flutter pub add logger

 

• 사용법

import 'package:logger/logger.dart';

final logger = Logger();


logger.t("Trace log");

logger.d("Debug log");

logger.i("Info log");

logger.w("Warning log");

logger.e("Error log", error: 'Test Error');

logger.f("What a fatal log", error: error, stackTrace: stackTrace);