플러터 로그인 구현

 

 

login_screen.dart

import 'package:flutter/material.dart';

class LoginScreen extends StatefulWidget {
  const LoginScreen({super.key});

  @override
  State<LoginScreen> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<LoginScreen> {

  final _nameController = TextEditingController();
  final _emailController = TextEditingController();
  final _formKey = GlobalKey<FormState>();

  void _onLogin(){
    final form=_formKey.currentState;

    if(form?.validate() ?? false ){
      print('login 성공');
    }else{
      print('login 실패');
    }
  }



  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Please Login'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              TextFormField(
                controller: _nameController,
                decoration: InputDecoration(labelText: '이름'),
                validator: (text) =>
                  text!.isEmpty ? '이름을 입력해 주세요.' : null,                
              ),
              TextFormField(
                controller: _emailController,
                decoration: InputDecoration(labelText: '이메일'),
                validator: (text){
                  if(text!.isEmpty){
                    return '이메일을 입력해 주세요.';
                  }
                  String pattern= r'^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$';
                  RegExp regex=RegExp(pattern);
                  if(!regex.hasMatch(text)){
                    return '올바른 이메일을 입력해 주세요';
                  }
                  return null;
                } ,
              ),
              SizedBox(
                height: 20,
              ),
              ElevatedButton(onPressed: _onLogin,
              child: Text('로그인'))
            ],
          ),
        ),
      ),
    );
  }
}

main.dart

import 'package:flutter/material.dart';

import 'views/login_screen.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
       
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: LoginScreen(),
    );
  }
}