[Flutter/Project](Instagram Clone) Scaffold(resizeToAvoidBottomInset: false)

 

 

---

auth_screen.dart 파일의 Scaffold에 resizeToAvoidBottomInset: false 적용 전(좌측 이미지)과 적용 후(우측 이미지)

 

sign_up_form.dart 파일의 Scaffold를 추가하고 resizeToAvoidBottomInset: true 적용 전(좌측 이미지)과 후(우측 이미지) 

상위 파일인 autn_screen.dart 파일에 Scaffold(resizeToAvoidBottomInset: false) 가 적용되어 있기에

하위 파일인 sign_up_form.dart 파일까지 적용되어 키보드로 인해 작아진 화면에서 스크롤이 불가능하다.

이를 해결하기 위해

하위 파일인 sign_up_form.dart 파일에  Scaffold()를 추가한다. (Scaffold의 기본 값은 resizeToAvoidBottomInset: true)

---

auth_screen.dart 파일 수정 (resizeToAvoidBottomInset: false 추가)

sign_up_form.dart 파일 수정 (Scaffold 추가)

---

소스코드 및 pubspec.yaml

// sign_up_form.dart

import 'package:flutter/material.dart';
import 'package:flutter_project_IJ/constants/common_size.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'),
              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: 300,
              ),
              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_xs_gap,
              ),
              FlatButton(
                onPressed: () {
                  if (_formKey.currentState.validate())
                    print('validating success');
                },
                child: Text(
                  'Join',
                  style: TextStyle(color: Colors.white),
                ),
                color: Colors.blue,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(8),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }

  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),
    );
  }
}