1. Padding이 먹지 않았던 이유
오늘 로그인 UI를 만들다가 Padding이 먹지 않는 문제가 발생했다.
원인은 아주 단순했다.
- Padding() 안에 child가 없으면 여백이 생길 수가 없다.
- Padding은 “안에 있는 위젯에게 여백을 주는 상자”인데, 안에 아무 것도 없으니 여백을 줄 대상이 없었던 것.
해결
- Column 전체를 Padding으로 감싸는 방식이 가장 깔끔하다.
- 레이아웃 구조는 보통 SafeArea → Padding → Column 순으로 많이 쓴다.
2. ElevatedButton에서 배경색 지정 오류
style: ButtonStyle(backgroundColor: Color(...))을 썼는데 오류가 났다.
이유는 backgroundColor가 Color 하나를 직접 받는 타입이 아니라 MaterialStateProperty<Color> 타입을 요구하기 때문이다.
해결
backgroundColor: MaterialStateProperty.all(Color(0xFF35E581))
또는 더 쉬운 방법은 styleFrom() 사용하기.
3. Container 테두리(선)만 색 넣기
Container의 배경은 투명하게 두고, 선(border)에만 색 넣고 싶을 때는
decoration: BoxDecoration(border: Border.all(...)) 구조를 사용한다.
decoration: BoxDecoration( border: Border.all(color: Colors.green, width: 2), )
이러면 내부는 그대로고 선만 색이 생긴다.
4. TextField Outline 색깔 변경
TextField는 enabledBorder와 focusedBorder를 사용해서 테두리 색을 바꾼다.
enabledBorder: OutlineInputBorder(...), focusedBorder: OutlineInputBorder(...),
- enabledBorder = 기본 상태
- focusedBorder = 클릭 후 포커스가 들어온 상태
5. "Or login with" 구분선 UI 만들기
가운데 텍스트를 두고 양쪽에 선이 있는 UI는
Row + Expanded + Divider + Text + Divider 조합으로 만든다.
이 방식이 실무에서도 가장 많이 쓰인다.
6. Segmented Control(Log in / Sign up) UI 만들기
rounded segmented bar(알약형 토글)을 만들고 싶었고, 구조는 다음과 같다.
- 회색 배경의 큰 Container (둥근 모서리)
- Row로 두 개의 영역(Log in, Sign up)을 균등 분배
- 선택된 쪽만 초록색 Capsule(AnimatedContainer)로 변경
- GestureDetector로 탭 이벤트 처리
이 형태는 iOS segmented control과 굉장히 유사하며, Flutter에서도 구현하기 쉬운 구조다.
7. “LoginToggle isn't defined” 오류
SignUpPage에서 LoginToggle()를 사용했을 때,
정의되지 않았다는 오류가 발생했다.
원인은 두 가지 중 하나였다.
- LoginToggle 위젯을 파일에 넣지 않은 경우
- 다른 파일에 만들었는데 import 하지 않은 경우
해결은 간단하다.
- LoginToggle 클래스를 SignUpPage 파일 안에 넣거나
- import 'login_toggle.dart';로 불러오면 해결된다.
오늘 배운 핵심 정리
- Padding은 child가 있어야 여백이 생긴다.
- ElevatedButton 배경색은 MaterialStateProperty.all() 로 넣어야 한다.
- Container 선 색은 Border.all()
- TextField 테두리는 enabledBorder / focusedBorder
- 구분선 UI는 Row + Expanded + Divider + Text + Divider
- Segmented Toggle은 Container + Row + AnimatedContainer 조합
- “위젯이 정의되지 않았다” 에러는 대부분 import 누락 또는 클래스 자체가 없음