[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과 동일한 방식으로 여러 줄의 텍스트를 표시할 수 있습니다.

이제 여러 줄의 텍스트를 표시하는 방법에 대해 알게 되었습니다. 위에서 제시한 두 가지 방법 중 하나를 선택하여 사용하면 됩니다. 각 방법에 맞게 텍스트 스타일을 설정하고 원하는 내용을 표시하면 됩니다.