[flutter] RaisedButton을 사용해 여러 줄의 텍스트를 표시하는 방법
Flutter에서 RaisedButton은 사용자가 탭하면 반응하는 볼록한 버튼을 만드는 데 사용됩니다. 기본적으로 RaisedButton은 한 줄의 텍스트만 표시할 수 있지만, 여러 줄의 텍스트를 표시하는 방법도 있습니다.
1. RaisedButton 안에 여러 줄을 포함하는 위젯을 사용하기
RaisedButton 위젯 안에 여러 줄의 텍스트를 표시하는 위젯을 사용할 수 있습니다. 예를 들어, Column 위젯을 사용하여 여러 Text 위젯을 설정할 수 있습니다.
RaisedButton(
onPressed: () {
// 버튼이 눌렸을 때 실행할 코드
},
child: Column(
children: <Widget>[
Text(
'첫 번째 줄 텍스트',
style: TextStyle(fontSize: 16),
),
Text(
'두 번째 줄 텍스트',
style: TextStyle(fontSize: 12),
),
],
),
),
위의 예제에서는 RaisedButton의 child로 Column 위젯을 사용하고, Column 위젯 안에 두 개의 Text 위젯을 추가했습니다. 이렇게 함으로써 RaisedButton 위젯 안에 여러 줄의 텍스트를 표시할 수 있습니다.
2. RaisedButton을 확장하여 여러 줄의 텍스트를 표시하기
RaisedButton을 확장하여 여러 줄의 텍스트를 표시할 수도 있습니다. 이렇게 하면 커스텀 위젯을 생성하고 원하는대로 여러 줄의 텍스트를 표시할 수 있습니다.
class MyRaisedButton extends RaisedButton {
final String text1;
final String text2;
MyRaisedButton({Key key, this.text1, this.text2, VoidCallback onPressed}) : super(
onPressed: onPressed,
child: Column(
children: <Widget>[
Text(
text1,
style: TextStyle(fontSize: 16),
),
Text(
text2,
style: TextStyle(fontSize: 12),
),
],
),
);
}
위의 예제에서는 RaisedButton을 상속하여 MyRaisedButton을 만들었습니다. 이 커스텀 버튼은 text1과 text2라는 두 개의 텍스트를 받아와서 Column 위젯 안에 표시됩니다. 이렇게 만든 커스텀 버튼을 사용하면 RaisedButtons과 동일한 방식으로 여러 줄의 텍스트를 표시할 수 있습니다.
이제 여러 줄의 텍스트를 표시하는 방법에 대해 알게 되었습니다. 위에서 제시한 두 가지 방법 중 하나를 선택하여 사용하면 됩니다. 각 방법에 맞게 텍스트 스타일을 설정하고 원하는 내용을 표시하면 됩니다.