[Flutter] 29. 로그인 화면 만들어보기

[Flutter] 29. 로그인 화면 만들어보기

 

 

import 'package:flutter/material.dart';

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

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

  // TextEditingController로 TextField의 controller에 넣을 객체를 선언
  final TextEditingController _emailController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text('로그인'),
        ),
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(30.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Padding(
                  padding: EdgeInsets.symmetric(vertical: 30),
                  child: Image.asset(
                    'assets/images/c.png',
                    width: 100,
                    height: 100
                  ),
                ),
                TextField(
                  decoration: InputDecoration(
                    filled: true,
                    fillColor: Color(0xffFEDDBD),
                    labelText: '이메일',
                    hintText: '이메일',
                    labelStyle: TextStyle(color: Colors.brown),
                    hintStyle: TextStyle(color: Colors.brown),
                    focusedBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.all(Radius.circular(10.0)),
                      borderSide: BorderSide(width: 1, color: Colors.red),
                    ),
                    enabledBorder: OutlineInputBorder(
                      borderSide: BorderSide(width:1.5, color: Colors.brown),
                    ),
                    prefixIcon: Icon(Icons.email_outlined),
                  ),
                  keyboardType: TextInputType.emailAddress,
                  textInputAction: TextInputAction.search,
                  obscureText: false,
                  // TextEditingController 객체를 controller에 설정
                  controller: _emailController,
                ),
                Padding(
                  padding: EdgeInsets.symmetric(vertical: 10.0),
                  child: TextField(
                    decoration: InputDecoration(
                      filled: true,
                      fillColor: Color(0xffFEDDBD),
                      labelText: '비밀번호',
                      hintText: '비밀번호',
                      labelStyle: TextStyle(color: Colors.brown),
                      hintStyle: TextStyle(color: Colors.brown),
                      focusedBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.all(Radius.circular(10.0)),
                        borderSide: BorderSide(width: 1, color: Colors.red),
                      ),
                      enabledBorder: OutlineInputBorder(
                        borderSide: BorderSide(width:1.5, color: Colors.brown),
                      ),
                      prefixIcon: Icon(Icons.lock_outlined),
                    ),
                    keyboardType: TextInputType.emailAddress,
                    textInputAction: TextInputAction.search,
                    obscureText: false,
                    // TextEditingController 객체를 controller에 설정
                    controller: _emailController,
                  ),
                ),
                const SizedBox(height: 20),
                Padding(
                  padding: EdgeInsets.symmetric(vertical: 10),
                  child: ElevatedButton(
                    style: ElevatedButton.styleFrom(
                      backgroundColor: Colors.brown
                    ),
                    onPressed: () {
                      // TextEditingController 객체의 text 속성으로 TextField의 입력된
                      // 문자열을 가져올 수 있음
                      print(_emailController.text);
                    },
                    child: Text('로그인', style: TextStyle(color: Colors.white)),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.symmetric(vertical: 10),
                  child: Text('비밀번호를 잊으셨나요?',style: TextStyle(color: Colors.brown)
                  ),
                ),
                Padding(
                  padding: EdgeInsets.symmetric(vertical: 10),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Text('계정이 없으신가요?'),
                        Text(
                            '회원 가입',
                        style: TextStyle(color: Colors.brown, fontWeight: FontWeight.bold),),
                    ]
                  ),
                ),
                Padding(
                  padding: EdgeInsets.symmetric(vertical: 20),
                  child: Container( height:1.5,
                    width:500.0,
                    color:Colors.grey,),
                ),
                ElevatedButton(
                  style: ElevatedButton.styleFrom(
                      backgroundColor: Color(0xffFEDDBD)
                  ),
                  onPressed: () {
                    // TextEditingController 객체의 text 속성으로 TextField의 입력된
                    // 문자열을 가져올 수 있음
                    print(_emailController.text);
                  },
                  child: Text('Google로 로그인', style: TextStyle(color: Colors.brown)),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}