[Flutter/Project](Instagram Clone) 로그인 화면, Align()

 

---

FlatButton 자체에 alignment가 존재하지 않기에 Text 위젯을 Align으로 감싼 후 위치조절.

---

소스코드 및 pubspec.yaml

// widgets/sign_in_form.dart

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

class SignInForm extends StatefulWidget {
  @override
  _SignInFormState createState() => _SignInFormState();
}

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

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

  @override
  void dispose() {
    _emailController.dispose();
    _passController.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자리 이상 입력해주세요.';
                },
              ),
              FlatButton(
                onPressed: () {},
                child: Align(
                  alignment: Alignment.centerRight,
                  child: Text(
                    'Forgotten Password?',
                    style: TextStyle(color: Colors.blue),
                  ),
                ),
              ),
              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(
        'Sign In',
        style: TextStyle(color: Colors.white),
      ),
      color: Colors.blue,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(6),
      ),
    );
  }
}