입력 값 전달하기

1. 주요 구성

• 사용자 입력값을 처리하고 전달하는 플러터 로그인 페이지.

2. 주요 위젯

• TextFormField: 사용자 입력값을 받는 위젯.

• ElevatedButton: 클릭 시 입력값을 처리하는 버튼.

• CustomInput: 재사용 가능한 입력 필드.

3. 예시 코드와 출력

1. 예시코드

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    // 앱의 루트 위젯 설정
    return MaterialApp(
      home: LoginPage(), // 홈 화면으로 LoginPage 설정
    );
  }
}

class LoginPage extends StatelessWidget {
  LoginPage({super.key});

  // 사용자 입력값을 저장하기 위한 변수와 컨트롤러 초기화
  String? username; // 사용자 이름 저장
  final password = TextEditingController(); // 비밀번호 입력값 컨트롤러
  final email = TextEditingController(); // 이메일 입력값 컨트롤러

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: true, // 키보드가 올라와도 화면이 조정되도록 설정
      body: ListView(
        children: [
          Column(
            children: [
              // 사용자 이름 입력 필드
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: TextFormField(
                  onChanged: (value) {
                    username = value; // 입력된 값을 실시간으로 username에 저장
                  },
                  decoration: InputDecoration(
                    filled: true, // 배경색 활성화
                    fillColor: Colors.yellow, // 배경색 노란색 설정
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(12.0), // 둥근 외곽선
                    ),
                  ),
                ),
              ),
              // 비밀번호 입력 필드 (CustomInput 사용)
              CustomInput(
                password, // 컨트롤러 연결
                "패스워드를 입력하세요", // 힌트 텍스트
                obsecure: true, // 텍스트 숨김 활성화
              ),
              // 이메일 입력 필드 (CustomInput 사용)
              CustomInput(
                email, // 컨트롤러 연결
                "이메일을 입력하세요", // 힌트 텍스트
              ),
              // 로그인 버튼
              ElevatedButton(
                onPressed: () {
                  fetch(username!.trim(), password.text.trim()); // 입력값 전달
                },
                child: Text("로그인"), // 버튼 텍스트
              ),
            ],
          ),
        ],
      ),
    );
  }
}

// 재사용 가능한 입력 필드 위젯
class CustomInput extends StatelessWidget {
  CustomInput(this.controller, this.hint, {this.obsecure = false});

  final TextEditingController controller; // 입력값 관리 컨트롤러
  final String hint; // 힌트 텍스트
  final bool obsecure; // 텍스트 숨김 여부

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0), // 입력 필드의 외부 여백
      child: TextFormField(
        controller: controller, // 입력값 컨트롤러 연결
        obscureText: obsecure, // 텍스트 숨김 여부
        decoration: InputDecoration(
          hintText: hint, // 힌트 텍스트 표시
          suffixIcon: Icon(Icons.password), // 입력 필드의 아이콘
          focusedBorder: OutlineInputBorder(), // 포커스 시 외곽선 스타일
          enabledBorder: OutlineInputBorder(), // 기본 외곽선 스타일
        ),
      ),
    );
  }
}

// 서버로 입력값을 전송하는 함수
void fetch(String username, String password) {
  // 입력값을 콘솔에 출력
  print("$username과 $password를 전송하였습니다");
}

2. 출력

4. 코드 구성

• LoginPage 클래스
1. username, password, email: 사용자 입력값 저장.
2. onChanged: username 값 실시간 저장.
3. TextEditingController: password, email 값 관리.
4. ElevatedButton.onPressed: 입력값을 fetch 함수로 전달.

• CustomInput 클래스
1. 재사용 가능한 입력 필드 생성.
2. controller와 hint로 동적 필드 구성.
3. obscureText: 비밀번호 입력 시 텍스트 숨김 옵션.

• fetch 함수
1. username, password 값을 전달.
2. 입력값을 출력하거나 서버로 전송할 때 사용.