당신의 FlutterFlow 앱에 대한 커스텀 테마를 어떻게 만들 수 있나요?

1단계: FlutterFlow 프로젝트로 이동하십시오

FlutterFlow 프로젝트는 FlutterFlow의 UI 빌더의 핵심에 위치해 있습니다. 시작하려면 FlutterFlow 대시보드로 이동하여 사용자 정의 테마를 적용하려는 프로젝트를 엽니다.

2단계: 테마 에디터 열기

왼쪽 사이드바에서 '테마' 아이콘을 찾아 클릭하십시오. 이렇게 하면 '테마 에디터'가 열리고, 여기에서 앱에 대한 사용자 정의 테마를 설계하고 적용할 수 있습니다.

3단계: 기본 테마 선택

사용자 정의 테마를 만들기 전에 사용자 정의하려는 테마의 유형을 결정해야 합니다. FlutterFlow에는 두 가지 주요 테마 유형이 있습니다: 라이트 테마와 다크 테마. 선호하는 것에 따라 테마 에디터 상단의 아이콘 중 하나를 클릭하십시오. 이렇게 하면 선택한 테마의 자세한 보기가 열립니다.

4단계: 색상 수정

모든 테마에는 다음과 같은 다섯 가지 색상 속성이 있습니다: primary, secondary, background, surface, error. 이를 수정하려면 각 속성 옆의 색상 팔레트를 클릭하고 선호하는 색상을 설정하십시오. 보다 정확한 색상 설정을 위해 특정 Hex 색상 코드를 입력할 수 있습니다.

5단계: 텍스트 테마 사용자 정의

FlutterFlow를 사용하면 앱 내에서 다양한 텍스트 스타일을 사용자 정의할 수 있습니다. 이에는 headline1, headline2, bodyText1, bodyText2 등이 포함됩니다. 각 텍스트 스타일 아래에서 스타일 수정을 클릭하여 글꼴 크기, 자간, 글꼴 두께, 글꼴 스타일, 텍스트 색상을 수정할 수 있습니다.

6단계: 버튼 사용자 정의

버튼 스타일을 수정하려면 테마 에디터의 하단으로 스크롤하십시오. 여기에서 두 가지 버튼 스타일을 발견할 수 있습니다: 일반 버튼과 윤곽선 버튼. 버튼 스타일을 수정하려면 스타일 수정을 클릭하십시오. 이렇게 하면 텍스트 스타일, 버튼 색상, 모양을 수정할 수 있는 대화 상자가 열립니다.

7단계: 테마 저장 및 적용

테마를 선호하는 대로 사용자 정의한 후에는 저장하고 적용할 시간입니다. 테마 에디터의 오른쪽 상단에 있는 저장 버튼을 클릭하십시오. 저장되면 새 테마가 자동으로 FlutterFlow 앱에 적용됩니다.

8단계: 테마 테스트

마지막으로 새로운 테마를 테스트하여 성공적으로 적용되었는지, 앱 내에서 어떻게 표시되는지 확인하십시오. 이를 하려면 메인 FlutterFlow 프로젝트 페이지로 돌아가서 오른쪽 상단에 있는 미리 보기 버튼을 클릭하십시오. 이렇게 하면 앱이 새 창에서 시작되어, 새 테마가 어떻게 보이는지 확인하면서 앱과 상호 작용할 수 있습니다.

참고: 테마는 앱 전체에 영향을 미치지 않으며 단일 화면 또는 위젯만 영향을 미칩니다. 테마 에디터에서 만든 변경 사항은 애플리케이션의 모든 화면에서 복제됩니다. 필요한 경우 개별 위젯을 조정하여 해당 특정 위젯에 대한 테마를 무시하세요.