[flutter] SingleChildScrollView) 화면에 스크롤기능을 추가해보자

해당 페이지에서 Textfield를 선택하면 키보드가 올라올것이다. 

키보드가 올라와 Widget들을 가리게되면서 오류가 출력된다. 이러한 오류를 방지하기 위해 필요한 것이 스크롤 기능이다. 

Flutter에서 스크롤 기능을 사용하려면  SingleChildScrollView를 사용하면된다.

 

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: double.infinity,
        height: double.infinity,
        child: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              Container(
                margin: EdgeInsets.only(
                    top: MediaQuery.of(context).size.height * 0.035),
 
                child: SvgPicture.asset(
                  'assets/icons/mini_logo.svg',
                  semanticsLabel: "Flip",
                  width: MediaQuery.of(context).size.width * 0.4,
                ),
              ),
              Container(
                margin: EdgeInsets.only(
                    top: MediaQuery.of(context).size.height * 0.04),
              ),
              Text(
                "회원가입",
                style: TextStyle(
                    fontFamily: 'Plus_Jakarta_Sans',fontSize: 25, fontWeight: FontWeight.w700),
              ),
              emailField(),
              pwField(),
              Container(margin: EdgeInsets.only(top: MediaQuery.of(context).size.height * 0.06),),
              registerBtn(context)
            ],
          ),
        ),
      ),
    );
  }

 

위 코드와 같이 Container로 감싼 body에 child로 SingleChildScrollView를 사용한다. 그 안쪽 child로 내부 위젯을 구성하여 주면 스크롤이 가능한 화면이 구성된다.