테마 위젯은 위젯의 재사용이 가능한 스타일이며, CSS 클래스처럼 작동해요.
위젯 스타일이 없는 경우, 설정을 통해 새로운 스타일을 적용할 수 있으며, 이를 테마 위젯이라고 해요.
테마 위젯 설정은 색상, 타이포그래피, 아이콘 설정 이후에 이루어져야 하며, 이는 디자인 시스템 설정 과정 중 하나에 해당돼요.
테마 위젯을 설정하면, 위젯 개별 스타일 설정보다 빠르게 일괄 적용할 수 있고, 이후에 세부적인 스타일링은 컴포넌트에서 처리할 수 있어요.
위젯을 생성하고 재사용 가능하도록 디자인하는 방법에 대한 설명이에요.
다양한 텍스트 필드와 버튼을 테마 위젯으로 디자인해요.
디자인 작업은 Figma에서 진행하며, 이어지는 구현은 Flutter에서 이루어져요.
텍스트 필드 위젯에는 border radius와 높이 등이 스타일링에 반영돼요.
라벨 설정에서는 텍스트 컬러, 텍스트 내용 등 테마 위젯의 스타일에 따른 설정이 가능해요.
텍스트 필드의 높이는 글꼴 크기와 컨텐츠 패딩의 합으로 설정해요.
버튼 위젯의 스타일링은 서로 다른 두 가지 색상과 높이 50, 완전한 border radius를 적용하여 만들어요.
테마 위젯을 사용하는 방법에는 두 가지가 있어요.
위젯 패널에서 직접 끌어다 놓거나, UI Builder에서 액세스하는 등 여러 방법이 있어요.
'theme widget'에 위젯을 추가할 때, 해당 위젯을 선택해 오버라이딩 하여 쉽게 스타일링이 가능해요.
테마 위젯의 스타일링을 수정하면 하위 구성 요소에서도 동일한 스타일을 유지할 수 있어요.
FlutterFlow에서 테마 위젯을 설정하는 것은 앱 개발을 빠르고 효율적으로 만드는데 매우 중요하기 때문에, 이 작업에 약간의 시간을 투자하면 나중에 많은 작업을 절약할 수 있어요.
'no code low code > flutterflow' 카테고리의 다른 글
08-디자인시스템-네비게이션바 (0) | 2024.02.08 |
---|---|
07-디자인시스템-기본전환 (0) | 2024.02.08 |
05-사용자 아이콘 표시하기 - 로딩바 (0) | 2024.02.08 |
04_Fonts (2) | 2024.01.17 |
03_Color import generate test (0) | 2024.01.17 |