LoginApp - 풀이

1. main.dart 만들기

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      initialRoute: "/login", // 앱이 시작될 때 페이지 설정하기
      routes: {
        "/login" : (context) => LoginPage(), // 함수가 들어가야함
        "/home" : (context) => HomePage(),
      },
    );
  }
}

• routes는 map 타입!

• 함수를 사용한 이유 : 호출시 new가 됨

• Align : 정렬가능

• Center : 가운데 정렬만 가능

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(
      initialRoute: "/login",
      routes: {
        "/login": (context) => LoginPage(),
        "/home": (context) => HomePage()
      },
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: Text("Login")),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Align(
        alignment: Alignment.topCenter,
        child: ElevatedButton(
          child: Text("move login page"),
          onPressed: () {},
        ),
      ),
    );
  }
}

• 클릭하면 이동하기

 onPressed: () {
            Navigator.pushNamed(context, "/login");
          }

유효성 검사하기

• form 태그랑 text가 분리되어있으면 관리하기 어려움

• if 분기처리하기

import 'package:flutter/material.dart';

class CustomForm extends StatelessWidget {

  TextEditingController email = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Form(
        child: Column(
          children: [
            Text("Email"),
            TextFormField(
              controller: email,
              decoration: InputDecoration(
                hintText: "Enter Email",
                enabledBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(20),
                ),
                focusedBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(20),
                ),
                errorBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(20),
                ),
                focusedErrorBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(20),
                ),
              ),
            ),
            TextButton(
              onPressed: () {
                print("email:${email.text}");
              },
              child: Text("login"),
            ),
          ],
        ));
  }
}

import 'package:flutter/material.dart';

class CustomForm extends StatelessWidget {

  TextEditingController email = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Form(
        child: Column(
          children: [
            Text("Email"),
            TextFormField(
              validator: (value) {
                print("value : ${value}");
              },
              controller: email,
              decoration: InputDecoration(
                hintText: "Enter Email",
                enabledBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(20),
                ),
                focusedBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(20),
                ),
                errorBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(20),
                ),
                focusedErrorBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(20),
                ),
              ),
            ),
            TextButton(
              onPressed: () {
                print("email:${email.text}");
                if(email.text.isNotEmpty){
                  email.text="";
                }
              },
              child: Text("login"),
            ),
          ],
        ));
  }
}

import 'package:flutter/material.dart';

class CustomForm extends StatelessWidget {

  TextEditingController email = TextEditingController();
  final formkey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Form(
      key: formkey, // Form 위젯에 key 속성 할당
      child: Column(
        children: [
          Text("Email"),
          TextFormField(
            validator: (value) {
              print("value : ${value}");
              if(value!.isEmpty){
                return "비어있을 수 없습니다"; // 비어있을 때
              } else {
                return null; // 정상
              }
            },
            controller: email,
            decoration: InputDecoration(
              hintText: "Enter Email",
              enabledBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(20),
              ),
              focusedBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(20),
              ),
              errorBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(20),
              ),
              focusedErrorBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(20),
              ),
            ),
          ),
          TextButton(
            onPressed: () {
              if(formkey.currentState!.validate()) {
                print("Validation Passed ============================");
              }
            },
            child: Text("login"),
          ),
        ],
      ),
    );
  }
}

import 'package:flutter/material.dart';

class CustomForm extends StatelessWidget {
  final formkey = GlobalKey<FormState>();
  final email = TextEditingController();
  final password = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Form(
      key: formkey,
      child: Column(
        children: [
          Column(
            children: [
              Text("Email"),
              TextFormField(
                validator: (value) {
                  print("value : ${value}");

                  if (value!.isEmpty) {
                    return "비어있을수 없습니다";
                  } else {
                    return null; // 정상일때 null을 리턴한다.
                  }
                },
                controller: email,
                decoration: InputDecoration(
                  hintText: "Enter Email",
                  enabledBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(20),
                  ),
                  focusedBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(20),
                  ),
                  errorBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(20),
                  ),
                  focusedErrorBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(20),
                  ),
                ),
              ),
            ],
          ),
          TextButton(
            onPressed: () {
              //print("email : ${email.text}");
              if (formkey.currentState!.validate()) {
                Navigator.pushNamed(context, "/home");
              }
            },
            child: Text("Login"),
          ),
        ],
      ),
    );
  }
}

import 'package:flutter/material.dart';

import 'costom_form_text_field.dart';

class CustomForm extends StatelessWidget {
  final formkey = GlobalKey<FormState>();
  final email = TextEditingController();
  final password = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Form(
      key: formkey,
      child: Column(
        children: [
          costomFormTextField(email: email),
          TextButton(
            onPressed: () {
              //print("email : ${email.text}");
              if (formkey.currentState!.validate()) {
                Navigator.pushNamed(context, "/home");
              }
            },
            child: Text("Login"),
          ),
        ],
      ),
    );
  }
}

import 'package:flutter/material.dart';

class costomFormTextField extends StatelessWidget {
  const costomFormTextField({
    super.key,
    required this.email,
  });

  final TextEditingController email;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text("Email"),
        TextFormField(
          validator: (value) {
            print("value : ${value}");

            if (value!.isEmpty) {
              return "비어있을수 없습니다";
            } else {
              return null; // 정상일때 null을 리턴한다.
            }
          },
          controller: email,
          decoration: InputDecoration(
            hintText: "Enter Email",
            enabledBorder: OutlineInputBorder(
              borderRadius: BorderRadius.circular(20),
            ),
            focusedBorder: OutlineInputBorder(
              borderRadius: BorderRadius.circular(20),
            ),
            errorBorder: OutlineInputBorder(
              borderRadius: BorderRadius.circular(20),
            ),
            focusedErrorBorder: OutlineInputBorder(
              borderRadius: BorderRadius.circular(20),
            ),
          ),
        ),
      ],
    );
  }
}

import 'package:flutter/material.dart';

import 'custom_form_text_field.dart';

class CustomForm extends StatelessWidget {
  final formkey = GlobalKey<FormState>();
  final email = TextEditingController();
  final password = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Form(
      key: formkey,
      child: Column(
        children: [
          CustomTextFormField(
            controller: email,
            text: "Email",
            validator: (value) {
              print("value : ${value}");

              if (value!.isEmpty) {
                return "비어있을수 없습니다";
              } else {
                return null; // 정상일때 null을 리턴한다.
              }
            },
          ),
          CustomTextFormField(
            controller: password,
            text: "Password",
            obscureText: true,
            validator: (value) {
              print("value : ${value}");

              if (value!.length < 4) {
                return "패스워드는 4자보다 작을 수 없습니다.";
              } else {
                return null; // 정상일때 null을 리턴한다.
              }
            },
          ),
          TextButton(
            onPressed: () {
              //print("email : ${email.text}");
              if (formkey.currentState!.validate()) {
                Navigator.pushNamed(context, "/home");
              }
            },
            child: Text("Login"),
          ),
        ],
      ),
    );
  }
}

import 'package:flutter/material.dart';

import '../size.dart';

class CustomTextFormField extends StatelessWidget {

  final text;
  final TextEditingController controller;
  final obscureText;
  final validator;

  CustomTextFormField({required this.controller, required this.text, this.obscureText = false, required this.validator});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.symmetric(vertical: smallGap),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text("${text}"),
          TextFormField(
            obscureText: obscureText,
            // 키보드 화면 올라옴
            validator: validator,
            controller: controller,

            decoration: InputDecoration(
              hintText: "Enter ${text}",
              enabledBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(20),
              ),
              focusedBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(20),
              ),
              errorBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(20),
              ),
              focusedErrorBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(20),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Function validatePassword() {
  return (String? value) {
    if (value!.isEmpty) {
      return "패스워드 공백이 들어갈 수 없습니다.";
    } else if (value.length > 12) {
      return "패스워드의 길이를 초과하였습니다.";
    } else if (value.length < 4) {
      return "패스워드의 최소 길이는 4자입니다.";
    } else {
      return null;
    }
  };
}