[flutter] 플러터 스택드 위젯에서 텍스트 입력 폼 만들기
플러터에서 화면을 구성할 때 여러 위젯을 쌓아 올리는 방식으로 UI를 설계할 수 있습니다. 이때 스택드(stacked) 위젯을 사용하면 여러 위젯을 겹쳐서 화면을 구성할 수 있습니다. 이번 포스트에서는 스택드 위젯을 사용하여 텍스트 입력 폼을 만드는 방법에 대해 알아보겠습니다.
1. 스택드 위젯으로 레이아웃 구성하기
먼저, 스택드 위젯을 사용하여 레이아웃을 구성합니다. 이때 텍스트 입력 폼을 포함한 다른 위젯들을 겹쳐서 배치할 수 있습니다.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Stack(
children: [
// 다른 위젯들과 텍스트 입력 폼을 포함한 위젯들을 여기에 추가
],
),
),
);
}
}
2. 텍스트 입력 폼 추가하기
스택드 위젯 안에 텍스트 입력 폼을 추가합니다.
Stack(
children: [
// 다른 위젯들 추가
Positioned(
top: 100,
left: 20,
child: Container(
width: 200,
child: TextFormField(
decoration: InputDecoration(
labelText: '이름',
border: OutlineInputBorder(),
),
),
),
),
],
),
위와 같이 Positioned 위젯으로 텍스트 입력 폼을 위치시킬 수 있습니다.
3. 다른 위젯 추가하기
텍스트 입력 폼 외에도 다른 위젯들을 스택드 위젯 안에 추가하여 화면을 구성할 수 있습니다.
요약
이렇게 플러터에서 스택드 위젯을 사용하여 텍스트 입력 폼을 만들 수 있습니다. 스택드 위젯을 활용하여 다채로운 UI를 구성해보세요!