Flutter - 배경 이미지, 로그인 관련

1. 배경화면을 색 말고 이미지로 넣을 수 있음 gif까지 가능

gif 파일을 다운 받은 후 root에 assets 폴더 생성 후 해당 폴더에 넣어줌

pubspec.yaml 에서 하단의 asset 부분을 아래와 같이 주석을 제거하고 변경 해 준다.

---

  assets:
    # 해당 폴더 내의 이미지 모두 사용
    - assets/

---

auth_page.dart에서 Container에 이미지를 넣어 주면 된다.

---

child: Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage('assets/image.gif'),
                fit: BoxFit.cover,
              ),
            ),
          )

fit 옵션으로 크기 조절 가능

decoration과 color이 같이 있으면 에러 발생

---

2. 로그인 관련

InkWell을 Alt + Enter 로 Remove 해준후  Container 에 child를 추가해서 배경 위에 form같은 로그인 관련 부분들을 올려준다.

GlobalKey<FormState>를 해당 클래스내의 상단에 생성해서 form 에서 입력한 값이 제대로 된값인지 확인 할 수 있다.

로고 이미지를 넣어주기 위해 logo 이미지를 가져와서 assets 폴더에 넣어 준 후 Form 안에 ListView에서 CircleAvatar로  만들어 준다.

---

return Material(
      child: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('assets/image.gif'),
            fit: BoxFit.cover,
          ),
        ),
        child: Scaffold(
            body: Form(
              key: _formKey,
              child: ListView(
                children: [
                  CircleAvatar(
                    backgroundColor: Colors.white54,
                    radius: 36,
                    child: Image.asset('assets/logo.png'),                    
                  ),
                ],
              ),
            ),
        ),
      ),
    );

---

단 이렇게 만들어 주면 Scaffold가 backgroundcolor을 가지고 있어서 배경이 사라진거처러 보인다.

---

backgroundColor: Colors.transparent,

---

Scaffold 안에 backgroundColor 옵션을 투명 배경으로 해줘서 추가해주면 다시 나오는것을 알 수 있다.

해당 로고가 너무 위에 붙어있어 SafeArea와 padding, children에 SizedBox를 추가해서로 떨어 뜨려 준다.

---

child: Scaffold(
          backgroundColor: Colors.transparent,
            body: SafeArea(
              child: Form(
                key: _formKey,
                child: ListView(
                  padding: EdgeInsets.all(6),
                  children: [
                    SizedBox(
                      height: 16,
                    ),
                    CircleAvatar(
                      backgroundColor: Colors.white54,
                      radius: 36,
                      child: Image.asset('assets/logo.png'),
                    ),
                  ],
                ),
              ),
            ),
        ),

완성 코드

---

3. 이메일과 암호 작성 form

CircleAvatar 아래에 TextFromField로 form을 만들어 준다. 사이 공간이 필요하다면 SizedBox를 넣어 준다.

InputDecoration를 만들어서 입력창을 만들어 준다. 단 기본 상태가 보기에 좋지 않아서 모양을 변경 시켜준다.

---

child: ListView(
                  padding: EdgeInsets.all(6),
                  children: [
                    SizedBox(
                      height: 16,
                    ),
                    CircleAvatar(
                      backgroundColor: Colors.white54,
                      radius: 36,
                      child: Image.asset('assets/logo.png'),
                    ),
                    SizedBox(
                      height: 16,
                    ),
                    TextFormField(
                      decoration: InputDecoration(
                        hintText: "testing",
                      ),
                    ),
                  ],
                ),

---

textform의 색도 변경해주고 border 색도 변경 해주기 위해서 OutlineInputBorder 를 사용한다. filled가 false면 fillColor에 색을 지정해도 기본 색으로 지정되므로 true를 설정 해준다.

border 옵션도 color과 radius를 위해 지정해주기 위해 border 옵션에 아래와 같이 작성해준다.

---

OutlineInputBorder( //Input 창에 border 그려주는 부분
    borderRadius: BorderRadius.circular(8),
    borderSide: BorderSide(color: Colors.transparent,width: 0,),//현재 이렇게 색을 해준 상태는 클릭을 안한 상태, 클릭한 상태를 바꾸려면 다른 옵션을 설정 해줘야 함
  )

---

이렇게 작성해주면 해당 form을 선택하지 않을 시에만 바뀌어서 error border 외에 같은 모양으로 바꾸기 위해서 class내 상단에 아래와 같이 만들어 주고

---

OutlineInputBorder _border = OutlineInputBorder( //Input 창에 border 그려주는 부분
    borderRadius: BorderRadius.circular(8),
    borderSide: BorderSide(color: Colors.transparent,width: 0,),//현재 이렇게 색을 해준 상태는 클릭을 안한 상태, 클릭한 상태를 바꾸려면 다른 옵션을 설정 해줘야 함
  );

---

하단은 아래와 같이 추가 해주면 된다.

---

TextFormField(
                      decoration: InputDecoration(
                        hintText: "E-MAIL", //뭔가 입력하기전에 먼저 나오는 글씨
                        filled: true,//원하는 색 칠하게 하는 기능
                        fillColor: Colors.black45,
                        //border error일때만 빼고 똑같이 해주기 위해서 상단으로 올림
                        border: _border,
                        enabledBorder: _border,
                        focusedBorder: _border,
                      ),
                    ),

---

4. 그외의 form에 다양한 옵션

cursorColor로 커서의 색과 hintText 대신 labelText를 사용 할 수도 있다. controller도 사용 할 수 있다. class내 상단에 TextEditingController을 만들어 준 후 controller에서 사용 하면 된다.

---

TextEditingController _emailController = TextEditingController();

---

validator로 유효값 확인 가능. _formKey로 하면 됨.

TextFormField 는 같은 입력창을 여러개 사용하므로 해당부분 드래그 해서 우클릭 후 Refactor에서 Extract Method 해준다.

그 후 controller도 메일, 암호, 암호확인 3개로 만들어 준후 3가지 입력창을 만든다.

---

TextEditingController _emailController = TextEditingController();
TextEditingController _passwordController = TextEditingController();
TextEditingController _cPasswordController = TextEditingController();
  
//CircleAvatar하단
_buildTextFormField("Email Address", _emailController),
_buildTextFormField("Password", _passwordController),
_buildTextFormField("Confirm Password", _cPasswordController),

---

 

리팩터 한 부분.

---

  TextFormField _buildTextFormField(String labelText, TextEditingController controller) {
    return TextFormField(
                    cursorColor: Colors.white,
                    controller: controller,
                    validator: (text){
                      if(text==null || text.isEmpty){
                        return "입력창이 비어있어요.";
                      }
                      return null;
                    },
                    style: TextStyle(
                      color: Colors.white,
                    ),
                    decoration: InputDecoration(
                      //hintText: labelText, //뭔가 입력하기전에 먼저 나오는 글씨
                      labelText: labelText,
                      filled: true,//원하는 색 칠하게 하는 기능
                      fillColor: Colors.black45,
                      //border error일때만 빼고 똑같이 해주기 위해서 상단으로 올림
                      border: _border,
                      enabledBorder: _border,
                      focusedBorder: _border,
                      labelStyle: TextStyle(color: Colors.white,)//글씨가 흰색으로 보임
                    ),
                  );
  }
}

---

버튼은 다음시간에