[Flutter] 왜 TextFormField가 안 나타날까?

▪ 완성 할 레이아웃

저 레이아웃을 만들어야하는데, 전체적으로 감싼 Container 가 있고, 그 안에 Column로 한번 더 감싸고, 각 레이아웃을 만들기 위해서 설계 계획을 세웠다. 

 

Column(

 children: [

    1. Container - 학교 이메일이라는 Text를 쓸 것

    2. Row - TextFormField(이메일 input) , OutlinedButton(인증하기)

    3. SizedBox - input 사이에 간격을 위해서 

    4. TextFormField - 인증번호 입력 input

    5. OutlinedButton - 다음 버튼

  ]

)

 

 

 

 

▪ 문제 발생

1을 하고 2번으로 넘어갈 때 우선 Row를 안 쓰고, TextFormField를 먼저 썼는데 화면에 출력이 안 되는거다! 이 전에 유튜버 '코딩셰프'님의 채팅 어플 만들기를 보면서 공부하고 있었기 때문에 TextFromField를 쓰면 바로 출력이 될 줄 알았다. 하지만 안 됨. 

 

 

 

▪ 해결

Stackoverflow에도 찾아보고 구글링도 해봤는데, 명확한 이유를 찾지 못 했다. 다만 여러 사람들의 코드를 훑어보면서 어떤 식으로 적용했나를 유심히 봤다. 그리고 여러번의 수정을 통해서 찾아냈다. 

 

 Row - TextFormField(이메일 input) , OutlinedButton(인증하기)

 

이 부분에서 Row 안에 - Container 안에 TextFormField를 , Container 안에 OutlinedButton을 넣어줬더니 둘 다 출력이 된다!!!! 나머지 4,5번도 Container로 한 번 더 감싸서 코드를 적어줬더니 잘 출력된다. 

 

Row(
    children: [
      Container(
        width: 200,
        child: TextFormField(),
        ),
       Container(
        width: 80,
        child: OutlinedButton(
           child: Text('인증하기', style: TextStyle(
                         color: Colors.grey,),
                      ),
           style: OutlinedButton.styleFrom(
               side: BorderSide(width: 1.0, color: Colors.grey),
                ),
               onPressed: () => null
           ),
        ),
     ],
),