05-사용자 아이콘 표시하기 - 로딩바

FlutterFlow에서 사용자 정의 아이콘 설정하기

FlutterFlow에서 사용자 정의 아이콘을 설정하는 방법을 알려드릴게요.

사용자 정의 아이콘은 비트맵, JPEG 또는 PNG 파일과 달리 해상도가 손상되지 않고 잘 스케일링되는 벡터 그래픽이에요.

아이콘의 색상을 FlutterFlow에서 커스터마이즈할 수 있으며, font 파일과 Dart 클래스가 필요해요.

font 파일과 Dart 클래스는 플러터아이콘닷컴에서 제공해 주지만 직접 업로드할 수도 있어요.

설정이 완료되면 아이콘을 버튼 등에서 사용할 수 있으며, 크기와 색상을 브랜드 컬러에 맞게 설정할 수 있어요.

 

 

API 통신 상태 시 유저에게 알리는 방법은?

네트워크 요청 시 로딩 인디케이터를 설정해야 해요.

이를 통해 백엔드에서 데이터를 로딩하거나 API 호출하는 동안 사용자에게 로딩 상태를 알려줄 수 있어요.

이 시간 동안 사용자에게 페이지가 고장나지 않았으며 빈 데이터가 반환되지 않았음을 알리고 싶어요.

또한 로딩 인디케이터의 크기와 색상, 애니메이션 옵션도 설정할 수 있어요.

이와 더불어 Flutter 패키지인 Flutter Spin Kit에서 제공하는 로딩 인디케이터 옵션도 사용 가능해요.

UI Builder에서 리스트에 백엔드 쿼리를 연결하고 로딩 효과를 설정하는 방법은?

UI Builder에서 어떤 유형의 리스트를 선택하고 백엔드 쿼리를 연결하여 더미 API와 바인딩하면 됩니다.

백엔드 로딩 위젯 옵션에서는 프로젝트 테마 로딩 인디케이터뿐만 아니라 커스텀 로딩 인디케이터를 선택할 수 있습니다.

또한, 컴포넌트 옵션에서는 쉬머 효과, 롯티 애니메이션, 이미지 등 다양한 컴포넌트를 설정할 수 있습니다.

이미지를 사용할 때는 네트워크 요청으로 설정하지 않고, 에셋으로 로딩해야 합니다.

마지막으로, 로딩 위젯은 다른 장소로 복사해서 사용할 수 있습니다.