인프런 커뮤니티 질문&답변
작성한 질문수
안녕하세요. 강의를 들으면서 앱을 제작하다 여쭤볼게 있어 질문드립니다.
작성
·
790
0
안녕하세요 현재 flutter를 이용하여 앱을 제작 중인 상태입니다.
개발 중 해결이 안되는 부분이 있어서 질문을 드립니다.
현재 앱을 개발하면서 fontsize를 14를 기본 폰트 사이즈로 잡고 앱을 개발 중입니다.
그런데 안드로이드에서 사용 시 안드로이드 디바이스 글자크기 설정을 아주크게로 해놓을 경우
플러터로 제작한 앱 내의 폰트도 영향을받아 글씨가 너무 커져버립니다.
그래서 글자가 다 잘려나오는 상태입니다...
외부의 글자크기 설정을 관여받지 않거나 앱 내에서 고정 폰트를 사용할 수 있는 방법 등을 찾아
앱 에서 나오는 폰트는 크기 변동을 없이 사용하고 싶은데 해결 방법이 있을까해서 한번 여쭤봅니다.
또한 textScaleFactor 함수는 어떠한 기능을 하는지 좀 알고 싶은데 알고 계실까요?
웹 서치를 하다보니 textScaleFactor로 폰트의 사이즈를 고정할 수 있다는 외국 글이 있는데
좀 사용해본 결과로는 배율 움직임 밖에는 되지 않는 것 같아 좀 더 지식이 있으신 전문가 분께 한 번 여쭤봅니다.
두서 없는 질문 이지만 꼭 문제를 해결하고 싶기에 답변 부탁드립니다.
좋은 강의 올려주셔서 정말 너무 잘 듣고 있습니다.
답변 12
0
상속을 받아도 생성자를 그대로 가져오지 않아서 그렇습니다. 예제로 Text속성 다 받을 수 있게 했고요. 생성자에 중괄호 { } 안의 것들은 옵션으로 설정할 수 있는 것들이 됩니다.
class CustomText extends Text {
CustomText(
String data, {
Key key,
style,
strutStyle,
textAlign,
textDirection,
locale,
softWrap,
overflow,
maxLines,
semanticsLabel,
}) : super(data,
key: key,
style: style,
strutStyle: strutStyle,
textAlign: textAlign,
textDirection: textDirection,
locale: locale,
softWrap: softWrap,
overflow: overflow,
maxLines: maxLines,
semanticsLabel: semanticsLabel,
textScaleFactor: 1.0);
}
...
사용예
CustomText('글자 테스트', style: TextStyle(color: Colors.red),)
CustomText('글자 테스트')
0
알려주신 형식을 사용하다가 궁굼한 점이 있어서 하나 여쭤보려고 합니다...
현재
class CustomText extends Text {
final int fontSize;
CustomText(String data, this.fontSize, ): super(data, textScaleFactor: 1.0);
}
이렇게 클래스를 만들고 다른 페이지에서 import 시켜서
Positioned(
left: 16 / 3,
top: 36 / 3,
child: CustomText(userData.memTitle, 20,
style: TextStyle(color:Color(0xFFa6093d),
fontWeight: FontWeight.bold)
),
),
이런 형식으로 받아서 사용을 하고 있습니다.
그런데
style 파라미터가 정의 되지 않았다는 에러로 run이 안되는데
어떤 형식으로 style을 정의해줘야 하는지 좀 알 수 있을까요?...
0
0
네. textScaleFactor는 Text 속성이기 때문에 StatelessWidget에서는 사용 불가능합니다. 그래서 Text를 상속하시라고 말씀드린 거에요.
별도 파일에 CustomText 만들어 두시고 다른곳에서 import 해서 사용하시면 재사용이 가능하지요.
0
자세한 설명 감사합니다.
아래 알려주신 코드를 똑같이 새 dart페이지에 작성해서 해볼땐 되는데
제가 참조 소스첨부에 사용하고 있는 CustomText 클래스에 넣어 사용하려고하니 안되서요...
혹시 StatelessWidget에서는 textScaleFactor가 사용이 불가한걸까요?
0
위에 제가 작성해 드린 코드를 그대로 쓰시면 됩니다. 추가적으로 필요한 속성은 super 쪽 생성자에 추가하시면 됩니다.
예시입니다.
import 'package:flutter/material.dart';
class MyMediaQuery extends StatefulWidget {
@override
_MyMediaQueryState createState() => _MyMediaQueryState();
}
class _MyMediaQueryState extends State<MyMediaQuery> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('MediaQuery'),
),
body: Center(
child: CustomText('글자 테스트'),
),
);
}
}
class CustomText extends Text {
CustomText(String data) : super(data, textScaleFactor: 1.0);
}
0
답변 너무 감사합니다.
그럼 CustomText로 class만든 부분에 추가를 해야하는 건가요?
아님 별도로
class CustomText extends Text { }를 만들어 써야하는 걸까요?...
0
기존 Text를 상속 받는 것이 좋을 것 같네요. 다음과 같이 작성해서 동작하는 걸 확인했습니다.
class CustomText extends Text {
CustomText(String data) : super(data, textScaleFactor: 1.0);
}
0
안녕하세요...
며칠 전에 답변 주신 textScaleFactor를 활용해서 항상 Text를 보통 크기로 유지하고 싶어서 진행해 봤는데
생각보다 적용하기가 힘들어서 다시 문의드리고자 합니다...
위에 알려주신 방법을 토대로 Text 코드만 사용하여 작성했을때는 textScaleFactor가 적용되는 것을 확인하였는데
저 같은 경우는 Text에 대한 Class 함수를 만들어 위젯형식으로 적용을 시켜 전체적으로 Text에대해 이펙트를 먹이고 있습니다.
그런데 아래의 소스에 textScaleFactor를 사용했을때는 에러가 나서
어떻게 적용해야 하는지 좀 도움을 받을 수 있을까해서 문의 남깁니다..
너무 자주 여쭤봐서 죄송합니다 ㅜ
플러터가 처음이다보니 어려움이 많네요...
-----소스첨부----
class CustomText extends StatelessWidget {
final String text;
final int fontSize;
final Color color;
final double height;
final FontWeight fontWeight;
CustomText(this.text, this.fontSize,
{Key key,
this.color = const Color(0xFF434343),
this.height = 1.0,
this.fontWeight = FontWeight.normal})
: super(key: key);
@override
Widget build(BuildContext context) {
return Text(
this.text,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontFamily: 'NanumGothic',
fontSize: this.fontSize.toDouble(),
color: this.color,
height: this.height,
fontWeight: this.fontWeight,
),
);
}
}
——중간생략——
Row(
children: <Widget>[
InkWell(
child: Container(
width: drawerWidth,
height: 120 / 3,
child: Row(
children: <Widget>[
Padding(
padding:
const EdgeInsets.only(left: 50 / 3, right: 44 / 3),
child: Image.asset(
'assets/images/Side_Menu_Monitoring_Btn.png',
width: 66 / 3,
height: 66 / 3,
fit: BoxFit.fill,
),
),
CustomText('Monitoring', 16,
color: Color(0xFF355c7d), fontWeight: FontWeight.bold),
],
)),
onTap: () {
Navigator.pop(context);
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) => new MonitoringPage()));
},
),
],
0
Text(
'Text',
textScaleFactor: 1.0,
),
로 설정하면 됩니다.
Text 위젯은 기본으로 textScaleFactor 값이 기기의 폰트 크기에 따라 설정됩니다. 이 값을 폰트 크기에 곱해서 크기가 결정되는 듯 하고 그 값은 MediaQuery를 통해 얻을 수도 있어요.
제가 아래 코드로 기기의 폰트 설정을 바꿔 가면서 테스트 해 보니
작게 : 0.85, 보통 : 1.0, 크게 : 1.15, 가장 크게 : 1.3 으로 나옵니다.
Text(
'${MediaQuery.of(context).textScaleFactor}'
)
그래서 textScaleFactor 값을 강제로 1.0 으로 주게 되면 항상 보통 크기로 보이게 됩니다.
덕분에 저도 알아가네요.
0
0