Flutter 어플 개발 Sign_up.dart(firebase 연동)

1. 개요

 

 

Sing_up.dart 파일을 따로 만들어 코드를 관리한다.

회원가입 UI를 만든다.

Firebase을 통해 회원들의 데이터를 관리한다.

 

 

2. 구현 내용 및 설명

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:graduationproject/main.dart';
import 'package:graduationproject/login.dart';

void main() => runApp(Sign_up());


class Sign_up extends StatefulWidget {
  @override
  _Sign_upState createState() => _Sign_upState();
}

 

소스코드의 첫 참조 라이브러리와 필수 main함수 statefulWidget의 성격을 가진 Sign_up 클래스이다.

material.dart는 flutter의 Widget을 가져오기 위해 필수로 참조해야 하는 라이브러리이다.

main.dart와 login.dart 페이지를 참조해 내비게이터를 사용하여 데이터를 넘겨주거나 페이지를 이동할 때 사용할 예정이다.

마지막으로 firebase을 사용하기 위해 firebase라이브러리를 참조해준다.

 

class _Sign_upState extends State<Sign_up> {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

  final TextEditingController _emailController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

 

가장 먼저 statefulWidget성격에 Sign_up 클래스를 생성해 주고 그 안에 값들을 초기화시켜준다.

먼저 Globalkey<FormState> _formket 을 선언한다. Flutter의 폼에서는 각 위젯의 고유한  ID를 부여할 때 GlobalKey 함수를 이용한다. 회원가입과 로그인 구현할 때 꼭 필요한 key이다.

_emailController과 _passwordController는 TextFormField의 값을 관리할 Controller이다.

 

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(70.0),
        child: AppBar(
          // Here we take the value from the MyHomePage object that was created by
          // the App.build method, and use it to set our appbar title.
          title: Column(
            children: <Widget>[
              Center(
                child: Text(
                  'Sign up',
                  style: TextStyle(
                      height: 1.5,
                      fontWeight: FontWeight.bold,
                      fontSize: 35,
                      fontFamily: 'Nanum Barumpen',
                      //나눔 글꼴
                      fontStyle: FontStyle.normal),
                ),
              ),
            ],
          ),
        ),
      ),

 

가장 먼저 PreferredSize을 사용해 AppBar을 두껍게 해준다.(공부한다는 마인드로 이것저것 사용해 보자)

AppBar 가운데에 글을 쓰기 위해 Center 위젯으로 Text 위젯을 감싼다.

Text 속성으로는 위치, 글자 크기, 글자 폰트 등을 설정해 준다. 글자 폰트는 네이버에서 무료로 지원해주는 나눔 붓팬을 사용했다. 폰트 적용에 관한 내용은 나중에 다루도록 하자

위젯을 감싸는 꿀팁이 하나 있는데 커서를 위젯 앞으로 옮긴 다음 Alt + Enter을 클릭하면 Wrap with Widget을 클릭하면 자동으로 위젯을 감쌀 수 있게 해준다.

 

body: Container(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: <Widget>[
              TextFormField(
                controller: _emailController,
                decoration: InputDecoration(
                    icon: Icon(Icons.account_circle),
                    labelText: "회원가입할 이메일을 입력해주세요",
                    border: OutlineInputBorder(),
                    hintText: 'E-mail'),
                validator: (String value) {
                  if (value.isEmpty) {
                    return "이메일을 입력해주세요";
                  }
                  return null;
                },
              ),
              /*Container(
                margin: const EdgeInsets.only(top: 16.0),
                alignment: Alignment.centerRight,
                child: RaisedButton(
                  onPressed: () {
                    //클릭시 검증
                  },
                  child: Text(
                      '이메일 인증'
                  ),
                ),
              ),*/
              SizedBox(
                height: 30.0,
              ),
              TextFormField(
                obscureText: true, // 비밀번호를 적을때 안보이도록
                controller: _passwordController,
                decoration: InputDecoration(
                    icon: Icon(Icons.vpn_key),
                    labelText: "회원가입할 비밀번호를 입력해주세요",
                    border: OutlineInputBorder(),
                    hintText: 'password'),
                validator: (String value) {
                  if (value.isEmpty) {
                    return "비밀번호를 입력해주세요";
                  }
                  return null;
                },
              ),
              SizedBox(
                height: 16.0,
              ),
              TextFormField(
                obscureText: true, // 비밀번호를 적을때 안보이도록
                decoration: InputDecoration(
                    icon: Icon(Icons.vpn_key),
                    labelText: "비밀번호를 한번 더 입력해주세요",
                    border: OutlineInputBorder(),
                    hintText: 'password'),
                validator: (String value) {
                  if (value != _passwordController) {
                    return "비밀번호가 일치하지 않습니다.";
                  }
                  return null;
                },
              ),
              Container(
                margin: const EdgeInsets.only(top: 16.0),
                alignment: Alignment.centerRight,
                child: RaisedButton(
                  onPressed: () {
                    _register();
                    Navigator.push(
                      context,
                      MaterialPageRoute(builder: (context) => MyApp())
                    );
                  },
                  child: Text('회원가입'),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }

 

두둥 드이어 body 부분이다. 가장 전체적인 모양을 잡아주기 위해 Container 위젯을 사용하고 Padding을 설정해준다. Padding은 여백이라고 생각하면 편한다. 직접 사용해보고 느낌을 익히길 바란다.

가장 중요한 것은 key : _formKey이다. Form Widget 안에 key 값이 있어야 이메일 비밀번호를 이용 할 수 있다. 

그 다음 위에서 부터 차례대로 정렬하기 위해 Column을 사용한다. Column안에 이메일을 입력할 수 있는 TextFormField을 작성하고 그 안에 emailController을 사용해 이메일을 관리하기 위한 준비를 한다. 비밀번호 역시 마찬가지로 구현해 준다. 나머지는 UI 적인 부분으로 직접 사용해 보면서 익히는 것이 좋다. obscureText : True는 비밀번호 입력시 비밀번호가 UI에 보이지 않는 UI 구성이다. SizedBox는 위에 UI이와 아래 UI 사이를 좀 벌리기 위해 사용한 폼이다.

 

마지막으로 회원가입 버튼 부분이다. 회원가입 버튼 부분을 가장 밑, 오른쪽에 배치하기 위해 Container을 사용했다. 버튼 모양은 RaisedButton으로 구현했고 버튼을 누르면 _register()함수가 실행된다. _resgister함수는 firebase의 회원가입 함수로 다음 소스코드에서 보도록 하자. 회원가입 버튼을 누루면 네이게이터로 main.dart함수로 페이지가 넘어갈 수 있게 된다.

 

  //회원가입 하는 메소드
  void _register() async {
    final AuthResult result = await FirebaseAuth.instance
        .createUserWithEmailAndPassword(
            email: _emailController.text, password: _passwordController.text);
    final FirebaseUser user = result.user;

    if (user == null) {
      final snacBar = SnackBar(
      content: Text("Please try again later"),
    );
    Scaffold.of(context).showSnackBar(snacBar);
  }
  }
}

별로 크게 설명할 것이 없다. 이렇게 코드를 작성해야 회원가입이 되도록 약속 한 것이다.

futuer을 사용한 것이 특징인데 비동기 작업의 결과를 나타낸다. 자세한 개념음 다음에 기회가 된다면 알아보도록 하자

밑에 if문은 회원가입중에 문제가 생겼을 때 오류를 출력하는 조건문이다.

 

3. 전체 소스 코드

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:graduationproject/main.dart';
import 'package:graduationproject/login.dart';

void main() => runApp(Sign_up());


class Sign_up extends StatefulWidget {
  @override
  _Sign_upState createState() => _Sign_upState();
}

class _Sign_upState extends State<Sign_up> {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

  final TextEditingController _emailController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(70.0),
        child: AppBar(
          // Here we take the value from the MyHomePage object that was created by
          // the App.build method, and use it to set our appbar title.
          title: Column(
            children: <Widget>[
              Center(
                child: Text(
                  'Sign up',
                  style: TextStyle(
                      height: 1.5,
                      fontWeight: FontWeight.bold,
                      fontSize: 35,
                      fontFamily: 'Nanum Barumpen',
                      //나눔 글꼴
                      fontStyle: FontStyle.normal),
                ),
              ),
            ],
          ),
        ),
      ),

      body: Container(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: <Widget>[
              TextFormField(
                controller: _emailController,
                decoration: InputDecoration(
                    icon: Icon(Icons.account_circle),
                    labelText: "회원가입할 이메일을 입력해주세요",
                    border: OutlineInputBorder(),
                    hintText: 'E-mail'),
                validator: (String value) {
                  if (value.isEmpty) {
                    return "이메일을 입력해주세요";
                  }
                  return null;
                },
              ),
              /*Container(
                margin: const EdgeInsets.only(top: 16.0),
                alignment: Alignment.centerRight,
                child: RaisedButton(
                  onPressed: () {
                    //클릭시 검증
                  },
                  child: Text(
                      '이메일 인증'
                  ),
                ),
              ),*/
              SizedBox(
                height: 30.0,
              ),
              TextFormField(
                obscureText: true, // 비밀번호를 적을때 안보이도록
                controller: _passwordController,
                decoration: InputDecoration(
                    icon: Icon(Icons.vpn_key),
                    labelText: "회원가입할 비밀번호를 입력해주세요",
                    border: OutlineInputBorder(),
                    hintText: 'password'),
                validator: (String value) {
                  if (value.isEmpty) {
                    return "비밀번호를 입력해주세요";
                  }
                  return null;
                },
              ),
              SizedBox(
                height: 16.0,
              ),
              TextFormField(
                obscureText: true, // 비밀번호를 적을때 안보이도록
                decoration: InputDecoration(
                    icon: Icon(Icons.vpn_key),
                    labelText: "비밀번호를 한번 더 입력해주세요",
                    border: OutlineInputBorder(),
                    hintText: 'password'),
                validator: (String value) {
                  if (value != _passwordController) {
                    return "비밀번호가 일치하지 않습니다.";
                  }
                  return null;
                },
              ),
              Container(
                margin: const EdgeInsets.only(top: 16.0),
                alignment: Alignment.centerRight,
                child: RaisedButton(
                  onPressed: () {
                    _register();
                    Navigator.push(
                      context,
                      MaterialPageRoute(builder: (context) => MyApp())
                    );
                  },
                  child: Text('회원가입'),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }

  //회원가입 하는 메소드
  void _register() async {
    final AuthResult result = await FirebaseAuth.instance
        .createUserWithEmailAndPassword(
            email: _emailController.text, password: _passwordController.text);
    final FirebaseUser user = result.user;

    if (user == null) {
      final snacBar = SnackBar(
      content: Text("Please try again later"),
    );
    Scaffold.of(context).showSnackBar(snacBar);
  }
  }
}

4. 구현된 UI 및 Firebase 인증 관리

 

회원 가입을 하게 되면 다음과 같이 firebase에 회원목록이 보인다. FIirebase와 flutter을 연동하는 자세한 방법은 다음번에 다루어 보도록 하자

 

5. 문제점 및 개선할 부분

 

 

회원 가입 버튼을 누루게 되면 회원 가입이 되지 않아도 네비게이터로 메인 화면으로 넘어가게 된다.

조건문을 사용하여 회원가입이 되지 않았음을 알려주어야 한다.

메인 화면으로 회원가입 후 돌아가면 메인 화면이 변하지 않는다.

회원가입을 하고 사용자 인증이 되면 메인화면에서 인증된 화면을 보여주어야 한다.

이 부분은 데이터를 넘기고 인증된 상태를 메인 화면에 알려주어여 하기 때문에 provider을 사용해야 될 것으로 예상된다. 좀 더 공부 후 개선 하도록 한다.