[Flutter/Project](Instagram Clone) custom Divider, Flatbutton.icon()

---

customDIvider

 

페이스북 로그인 아이콘/텍스트

---

소스코드 및 pubspec.yaml

// sing_up_form.dart

import 'package:flutter/material.dart';
import 'package:flutter_project_IJ/constants/common_size.dart';
import '../home_page.dart';

class SignUpForm extends StatefulWidget {
  @override
  _SignUpFormState createState() => _SignUpFormState();
}

class _SignUpFormState extends State<SignUpForm> {
  // 해당 Form의 상태를 저장
  GlobalKey<FormState> _formKey = GlobalKey();

  // TextFormField의 데이터를 사용하기 위한 Controller
  TextEditingController _emailController = TextEditingController();
  TextEditingController _passController = TextEditingController();
  TextEditingController _cPassController = TextEditingController();

  @override
  void dispose() {
    _emailController.dispose();
    _passController.dispose();
    _cPassController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 디바이스 사이즈에 맞게 화면을 줄여줌. (기본값 true)
      // 기본값이 true이기에 적어주지 않아도 된다.
      //   resizeToAvoidBottomInset: true,
      body: Padding(
        padding: const EdgeInsets.all(common_gap),
        child: Form(
          key: _formKey,
          child: ListView(
            // 안드로이드 디바이스의 사이즈가 작을 수도 있기에
            // 스크롤이 가능한 리스트뷰로 생성.
            children: [
              SizedBox(
                height: common_l_gap,
              ),
              Image.asset('assets/images/insta_text_logo.png'),
              SizedBox(
                height: common_l_gap,
              ),
              TextFormField(
                controller: _emailController,
                decoration: _textInputDec('Email'),
                cursorColor: Colors.black54,
                validator: (text) {
                  // text가 비어있지 않으며 '@'가 존재하면 true
                  if (text.isNotEmpty && text.contains('@'))
                    return null;
                  else
                    return '정확한 이메일 주소를 입력해주세요.';
                },
              ),
              SizedBox(
                height: common_xs_gap,
              ),
              TextFormField(
                // obscureText 비밀번호 숨김.
                obscureText: true,
                controller: _passController,
                decoration: _textInputDec('Password'),
                cursorColor: Colors.black54,
                validator: (text) {
                  if (text.isNotEmpty && text.length >= 4)
                    return null;
                  else
                    return '4자리 이상 입력해주세요.';
                },
              ),
              SizedBox(
                height: common_xs_gap,
              ),
              TextFormField(
                // obscureText 비밀번호 숨김.
                obscureText: true,
                controller: _cPassController,
                decoration: _textInputDec('Confirm Password'),
                cursorColor: Colors.black54,
                validator: (text) {
                  if (text.isNotEmpty && _passController.text == text)
                    return null;
                  else
                    return '비밀번호가 일치하지 않습니다.';
                },
              ),
              SizedBox(
                height: common_s_gap,
              ),
              _submitButton(context),
              SizedBox(
                height: common_s_gap,
              ),
              _orDivider(),
              SizedBox(
                height: common_s_gap,
              ),
              FlatButton.icon(
                onPressed: () {},
                textColor: Colors.blue,
                icon: ImageIcon(AssetImage('assets/images/facebook.png')),
                label: Text('Login with Facebook'),
              ),
            ],
          ),
        ),
      ),
    );
  }

  FlatButton _submitButton(BuildContext context) {
    return FlatButton(
      onPressed: () {
        if (_formKey.currentState.validate()) print('validating success');
        Navigator.of(context).pushReplacement(
            MaterialPageRoute(builder: (context) => HomePage()));
      },
      child: Text(
        'Join',
        style: TextStyle(color: Colors.white),
      ),
      color: Colors.blue,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(6),
      ),
    );
  }

  Stack _orDivider() {
    return Stack(
      // 중앙 정렬
      alignment: Alignment.center,
      children: [
        Container(
          height: 1,
          color: Colors.grey[300],
        ),
        Container(
          height: 3,
          width: 50,
          color: Colors.grey[50],
        ),
        Text(
          'OR',
          style:
              TextStyle(fontWeight: FontWeight.bold, color: Colors.grey[500]),
        ),
      ],
    );
  }

  InputDecoration _textInputDec(String hint) {
    return InputDecoration(
      hintText: hint,
      enabledBorder: _activeInputBorder(),
      focusedBorder: _activeInputBorder(),
      errorBorder: _errorInputBorder(),
      focusedErrorBorder: _errorInputBorder(),
      filled: true,
      fillColor: Colors.grey[100],
    );
  }

  OutlineInputBorder _errorInputBorder() {
    return OutlineInputBorder(
      // TextFormField 테두리
      borderSide: BorderSide(
        color: Colors.red,
      ),
      // TextFormField 모서리 둥글기
      borderRadius: BorderRadius.circular(common_s_gap),
    );
  }

  OutlineInputBorder _activeInputBorder() {
    return OutlineInputBorder(
      // TextFormField 테두리
      borderSide: BorderSide(
        color: Colors.grey[300],
      ),
      // TextFormField 모서리 둥글기
      borderRadius: BorderRadius.circular(common_s_gap),
    );
  }
}