[flutter] 스택드 위젯에서 텍스트 위젯 사용하기
Flutter에서 UI 디자인을 할 때, 여러 위젯을 겹쳐서 사용해야 하는 경우가 종종 있습니다. 이때 스택드(Stacked) 위젯을 사용하면 여러 위젯을 겹칠 수 있습니다. 하지만 스택드 위젯에서 텍스트 위젯을 사용하는 것에 있어서 몇 가지 주의할 점이 있습니다.
텍스트 위젯의 위치 지정
스택드 위젯 안에서 텍스트 위젯을 사용할 때, 텍스트 위젯의 위치를 지정하기 위해 Positioned
위젯을 사용해야 합니다. Positioned
위젯은 스택드 위젯 안에서 사용될 때, 각 위젯의 위치를 지정하는 역할을 합니다.
Positioned(
top: 50.0,
left: 20.0,
child: Text('위치 지정된 텍스트'),
),
위의 예시에서 top
은 위쪽으로부터의 거리, left
는 왼쪽으로부터의 거리를 나타냅니다.
텍스트 위젯의 중첩 사용
스택드 위젯 안에서 텍스트 위젯을 중첩하여 사용할 때는 Positioned
위젯을 통해 위치를 지정할 수 있습니다. 여러 개의 텍스트를 겹쳐서 사용하려면 각 텍스트 위젯을 Positioned
위젯으로 감싸서 위치를 지정하면 됩니다.
Stack(
children: <Widget>[
Positioned(
top: 50.0,
left: 20.0,
child: Text('첫 번째 텍스트'),
),
Positioned(
top: 100.0,
left: 40.0,
child: Text('두 번째 텍스트'),
),
],
),
위의 예시에서 첫 번째 텍스트는 (20.0, 50.0), 두 번째 텍스트는 (40.0, 100.0)의 위치에 표시됩니다.
스택드 위젯에서 텍스트 위젯을 사용할 때는 Positioned
위젯을 통해 정확한 위치를 지정하여 겹쳐 사용할 수 있습니다. 코드를 작성할 때는 이 부분을 주의하면 됩니다.
[Flutter 소개 페이지](https://flutter.dev)