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

HootJem

Oct 07, 2024

Contents

1. 이미지 위에 텍스트 넣기 2. 위젯 내부 글자 범위 설정 3. 이미지 내부 글자 위치 설정

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

Stack 임.

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

페이지의 넓이와 상관없이 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 를 사용하여 직접 위치를 설정해줌.

만약 SizedBox 로 그냥 처리하면 옆에 붙어버린다