4. 입력 및 라우터 처리

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      initialRoute: "/login",
      routes: {
        "/login": (context) => LoginPage(),
        "/home": (context) => HomePage(),
      },
    );
  }
}

//------------------------
class LoginPage extends StatelessWidget {
  var username = TextEditingController();
  final password = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(

        resizeToAvoidBottomInset: true,
      appBar: AppBar(),
        body: ListView(// 키보드가 올라올떄 높이 값떄문에 에러가난다 보통 input을 사용할떄는 listview를 사용함

      children: [
        Container(
          height: 500,
          color: Colors.yellow,
        ),
        TextFormField(

          controller: username,
          decoration: InputDecoration(
            hintText: "Username",
            prefixIcon: Icon(Icons.person),
          ),
        ),
        TextFormField(
          obscureText: true,
          controller: password,
          decoration: InputDecoration(
              hintText: "Password", prefixIcon: Icon(Icons.password)),
        ),
        //익명함수사용 리턴값이 없는 void라서
        ElevatedButton(
            onPressed: () {
              //1. 값 가져오기
              String un = username.text;
              String pw = password.text;
              print(un);
              print(pw);

              //2. 통신하기

              //3. 화면 이동(A -> B)
              // (A -> B) pushName 계속 올림
              //( B) pushReplaceName 그전 페이지만 날림
              //( B) pushNamedAndRemoveUntil 체진이전 모든 페이지를 날림
              Navigator.pushNamed(context, "/home");//어차피 appbar를 사용해서 안씀 개념만 이해

              print("버튼 클릭됨");
            },
            child: Text("로그인")),
      ],
    ));
  }
}

//-----------------------------------
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
        body: Center(
            child: ElevatedButton(
                onPressed: () {
                 // Navigator.pushNamed(context, "/login"); //[a, b ,a]
                  //Navigator.pushNamed(context, "login");//[a, b ,a]
                 // Navigator.pushNamedAndRemoveUntil(context, "/login", (route)=>true); 아이뒤비밀번호가 안! 남아잇음
                 // Navigator.pop(context);//[a] 뒤로가기 히스토리 빽 아이디 비빌번호가 남아있음
                },
                child: Text("뒤로가기"))));
  }
}

1. TextFormField와 TextEditingController

• TextFormField: Flutter에서 사용자의 텍스트 입력을 받기 위한 위젯입니다. 사용자가 입력한 값을 실시간으로 관리하고, 화면 상에 텍스트 필드를 표시하는 역할을 합니다.

• TextEditingController: TextFormField와 함께 사용되어, 입력 필드의 값을 읽고 관리하는 데 사용됩니다. 이를 통해 텍스트 필드에 입력된 값을 쉽게 가져오거나, 텍스트 필드에 미리 정의된 값을 설정할 수 있습니다.

코드에서의 사용 예시:

dart
코드 복사
var username = TextEditingController();
final password = TextEditingController();

dart
코드 복사
TextFormField(
  controller: username,  // 입력된 값을 자동으로 추적
  decoration: InputDecoration(
    hintText: "Username",
    prefixIcon: Icon(Icons.person),
  ),
),

2. 라우터 처리 (Navigator)

dart
코드 복사
Navigator.pushNamed(context, "/home");

주제에 따른 코드 설명

1. 입력 처리 (Input Handling)
• TextFormField를 사용하여 사용자의 입력을 받아들이고, TextEditingController를 사용해 실시간으로 그 값을 관리합니다.
• username.text와 password.text를 통해 사용자가 입력한 값을 추출할 수 있습니다.

2. 라우팅 (Routing)
• 로그인 버튼을 눌렀을 때, 사용자의 입력 값을 기반으로 Navigator.pushNamed를 호출하여 새로운 페이지 ("/home")로 이동합니다.
• 페이지 전환이 이루어질 때, 이전 화면의 상태를 유지하거나 초기화할 수 있습니다.

코드 흐름

1. 로그인 페이지 (LoginPage)
• 사용자는 TextFormField에 username과 password를 입력합니다.
• ElevatedButton을 누르면 Navigator를 통해 HomePage로 이동합니다.

2. 홈 페이지 (HomePage)
• 로그인 화면에서 입력된 값을 사용해 다음 화면으로 이동한 후, "뒤로가기" 버튼을 눌러 다시 로그인 페이지로 돌아갈 수 있습니다.

예시 코드 흐름 설명:

1. 로그인 페이지
• 사용자가 username과 password 필드에 텍스트를 입력합니다.
• 입력된 값은 각각 TextEditingController(username과 password)에 실시간으로 저장됩니다.

2. 로그인 버튼 클릭
• 사용자가 "로그인" 버튼을 클릭하면, 입력된 사용자 이름과 비밀번호가 username.text와 password.text를 통해 출력됩니다.
• 그 후 Navigator.pushNamed(context, "/home")을 통해 HomePage로 라우팅되어 홈 화면으로 이동합니다.

3. 홈 페이지
• 홈 화면에서는 "뒤로가기" 버튼이 있고, 이를 누르면 다시 로그인 페이지로 돌아갈 수 있습니다.

결론