본문 바로가기
Flutter/Flutter FAQ

Flutter 플러터에서 텍스트를 동적으로 크기 조정하는 방법은 무엇인가요?, How to dynamically resize text in Flutter?

by 베타코드 2023. 5. 17.
반응형

질문


API에서 텍스트 조각을 검색합니다. 일정한 공간을 할당하려고합니다 (예 : 너비 : 300.0 및 높이 : 100.0의 최대 컨테이너). 때로는 글꼴 크기 30.0으로이 컨테이너에 맞습니다. 다른 경우에는 텍스트 크기를 24.0으로 설정하지 않으면 맞지 않습니다.

텍스트 크기를 부모 컨테이너 공간에 따라 동적으로 조정하는 방법이 있습니까?

ConstrainedBox를 사용하여 최대 텍스트 공간의 크기를 정의 할 수있는 컨테이너를 만들었습니다. 또한 Text를 LayoutBuilder로 래핑했습니다. 텍스트 공간의 높이를 확인하고 그에 따라 텍스트 크기를 조정할 수 있기를 바랬습니다. 이렇게 :

    Container(
      child: ConstrainedBox(
        constraints: BoxConstraints(
          minWidth: 300.0,
          maxWidth: 300.0,
          minHeight: 30.0,
          maxHeight: 100.0,
        ),
        child: LayoutBuilder(
            builder: (BuildContext context, BoxConstraints constraints) {
          if (/* height is larger than 100.0? height is over the constraints? */) { return textWithSize24(); }
          return textWithSize30();
        }),
      ),
    ),

만약 "텍스트가 30.0 크기였을 때 차지 할 높이"를 결정할 수있는 방법이 있을까요? 아마도 이것을 결정하기 위해 maxLines을 사용해야하는 것 같습니다. 그러나 우리는 어떻게 더 이상 maxLines보다 많은 것을 확인할 수 있습니까?

다른 방법은 문자열의 문자 수를 사용하여 글꼴 크기를 변경 할 때 결정하는 것입니다. 이것은 다소 수동적입니다.


답변


FittedBox을 사용하여 높이 또는 너비에 따라 텍스트를 관리할 수 있습니다.

예시:

Text 위젯을 FittedBox 위젯으로 감싸기만 하면 됩니다. 여기에서는 AppBar 텍스트를 너비에 따라 크기를 조정하려고 합니다.

AppBar(
    centerTitle: true,
    title: FittedBox(
        fit: BoxFit.fitWidth, 
        child: Text('Hey this is my long text appbar title')
    ),
),

텍스트는 AppBar의 너비에 따라 크기가 조정됩니다.

반응형

댓글