padding 3

UILabel Inset and CornerRadius (UIKit)

UILabel Inset and CornerRadius (UIKit) UILabel에서 텍스트 주변으로 인셋을 주기 위한 코드 히스토리2023-06-23: InsetLabel 구현2025-01-21: CapusuleLabel 추가 목차InsetLabel 전체 코드InsetLabel 사용법CapsuleLabel 전체 코드 InsetLabel 전체 코드/// UILabel의 text와 컨테이너 사이의 inset값을 설정할 수 있는 커스텀 라벨final class InsetLabel: UILabel { /// text와 UILabel 사이의 inset값을 설정 var edgeInsets: UIEdgeInsets = .init(top: 2.0, left: 8.0, bottom: 2.0, ri..

Flutter에서 Drawer 메뉴 만들기

Flutter에서 Drawer 메뉴 만들기 이번 시간에는 AppBar의 햄버거(☰) 버튼을 클릭했을 때 열리는 Drawer 메뉴를 만들어보자.아래 이미지를 보면, AppBar 왼쪽의 아이콘을 누르면 사이드 패널이 열리는 UI를 말한다. Drawer를 사용할 때 주의할 점Drawer는 내부적으로 AppBar의 왼쪽 영역(leading 부분)을 자동으로 제어하기 때문에 수동으로 지정하면 충돌이 발생.// ❌ 아래처럼 leading에 IconButton을 추가하면 Drawer가 작동하지 않는다!leading: IconButton( icon: Icon(Icons.menu), onPressed: () { print("menu button clicked"); },), Drawer 샘플 스크린샷 1..

Flutter/2.0 2021.08.10

캐릭터 페이지 디자인 실습

캐릭터 페이지 디자인 실습이번에는 캐릭터 페이지를 만들어보는 실습을 진행. AppBarCenterTitle : title을 중앙에 위치 시킴 - True or Falseappbar Background : 앱바 배경색 바꿈elavation : 앱 바에 있는 그림자 설정 Padding Widget패딩도 하나의 위젯임즉, 하나의 View라는 의미. 플러터에서 가로 방향에 대해서는 width를 가능한 넓게 채우도록 레이아웃이 설정되어 있고, 세로 축에 대해서는 별도의 레이아웃을 잡지 않음.따라서 아래 코드처럼 세로축을 기준으로 중심에 위치하게 하는 코드이다.mainAxisAlignment: MainAxisAlignment.center Center Widget얘도 뷰라서 결국은 위젯으로 볼 수 있고 레이아웃..

Flutter/2.0 2021.08.10