[flutter] 플러터 Column을 사용한 폼 입력 UI 구성하기

20 Dec 2023

flutter

플러터(Flutter)를 사용하여 폼 입력 UI를 만들 때 일반적으로 Column 위젯을 사용합니다. Column은 각 입력 필드나 버튼을 포함하는데 효과적인 방법입니다. 이 포스트에서는 플러터 Column을 사용하여 폼 입력 UI를 구성하는 방법에 대해 알아보겠습니다.

Column 위젯 소개

Column 위젯은 수직 방향으로 위젯을 배열하는 데 사용됩니다. 주로 텍스트 필드, 체크박스, 라디오 버튼 등을 수직으로 배열하는 데 유용합니다. 각 위젯을 Column에 추가하면, 간단한 코드로 수직 정렬된 UI를 만들 수 있습니다.

폼 입력 UI 구성하기

아래는 Column을 사용하여 간단한 회원가입 폼 입력 UI를 구성하는 예시 코드입니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('회원가입'),
        ),
        body: Padding(
          padding: EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              TextFormField(
                decoration: InputDecoration(
                  labelText: '이름',
                ),
              ),
              SizedBox(height: 16.0),
              TextFormField(
                decoration: InputDecoration(
                  labelText: '이메일',
                ),
              ),
              SizedBox(height: 16.0),
              TextFormField(
                decoration: InputDecoration(
                  labelText: '비밀번호',
                ),
                obscureText: true,
              ),
              SizedBox(height: 24.0),
              ElevatedButton(
                onPressed: () {
                  // 회원가입 처리 로직
                },
                child: Text('가입하기'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

위 코드에서는 Column 위젯으로 TextFormField(텍스트 필드)와 ElevatedButton(버튼)을 포함하는 폼 입력 UI를 만들었습니다.

마무리

이제 당신도 Column을 사용하여 플러터에서 폼 입력 UI를 만드는 방법을 배웠습니다. Column을 잘 활용하면 간단하면서도 가독성 있고 효과적인 UI를 만들 수 있습니다. 여러분의 앱에 적용해보세요!

Flutter 공식 문서를 참고하여 더 많은 정보를 얻을 수 있습니다.