위젯 내부 글자 범위 조건 설정

HootJem's avatar
Oct 07, 2024
위젯 내부 글자 범위 조건 설정

1. 이미지 위에 텍스트 넣기

notion image
Stack 임.
 

2. 위젯 내부 글자 범위 설정

 
notion image
페이지의 넓이와 상관없이 250을 최대 넒이로 갖도록 설정함.
Container( constraints: BoxConstraints( maxWidth: 250, ), child: Text( "이제, 여행은 가까운 곳에서", style: h4(mColor: Colors.white), ), ),
이 코드인데 BoxConstraints 가 그 역할을 한다.
 

3. 이미지 내부 글자 위치 설정

이미지 내부에서 글자가 위치를 갖는 이유는 Positioned 때문이다.
Widget _buildBannerCaption() { return Positioned( top: 40, left: 40, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Container( constraints: BoxConstraints( maxWidth: 250, ), child: Text( "이제, 여행은 가까운 곳에서", // 생략
top, left 를 사용하여 직접 위치를 설정해줌.
notion image
만약 SizedBox 로 그냥 처리하면 옆에 붙어버린다
 
Share article

[HootJem] 개발 기록 블로그